写在前面

持续更新

• 仓库地址
  github
  npm

• 功能

1. 测量工具
2. 绘制工具
3. 图层分组操作
4. setStyle方法重写
5. 回到初始位置
6. 切换图层
7. 涂鸦

功能介绍

图层分组操作

• 图层操作是基于 Map 类添加的扩展，所以可以直接在 Map 的实例中使用以下函数

        /**
         * 所有图层组，不要尝试自行使用
         */
        layerGroups: Dict<string, LayerGroup>

        /**
         * 所有图层组的图层id合集
         */
        getAllGroupLayerIds(): string[]

        /**
         * 创建图层组
         * @param id 图层组id
         */
        addLayerGroup(id: string): LayerGroup

        /**
         * 获取图层组
         * @param id 图层组id
         */
        getLayerGroup(id: string): LayerGroup | undefined

        /**
         * 删除图层组
         * @param id 图层id
         */
        removeLayerGroup(id: string): void

• 使用 addLayerGroup 方法创建的实例（LayerGroup类型）又可以对单图层进行添加、删除、是否显示等操作，具体请在仓库example中查看把?。下面展示一下效果，很方便的将 文字（symbol）、线（line）、面（fill）同时显示和隐藏。

    setTimeout(() => {
        setInterval(() => {
          group.show = !group.show;
        }, 1000)
      }, 1000);

测量

const map = new mapboxgl.Map({...});
map.addControl(new MeasureControl(options)) // 参数可以为空，或自行配置

鼠标操作

• 左键点击 : 添加一个点
• 右键点击 : 删除一个点
• 左键双击 : 完成测量，开始下一次测量

样式
可以通过 options 中的参数自行调整

export interface MeasurePointOptions {
    textSize?: number, // 经纬度文字的大小
    pointSize?: number, // 点大小
    textColor?: string, // 文字颜色
    textOffsetY?: number, // 文字在众方向上的偏移 
    pointColor?: string, // 点颜色
    createText?: (lng: number, lat: number) => string //文字创建
}

export interface MeasureLineStringOptions {
    lineColor?: string, //线颜色
    lineWidth?: number, // 线宽
    segmentPointColor?: string, // 端点颜色
    segmentPointSize?: number, // 端点大小
    textOffsetY?: number, // 文字在纵方向上的偏移
    segmentTextSize?: number, // 端点(距离求和)文字的大小
    segmentTextColor?: string, // 端点(距离求和)文字的颜色
    showCenterText?: boolean, // 是否显示线段中间文字(线段长度)
    centerTextSize?: number, // 线段中间文字(线段长度)大小
    centerTextColor?: string, // 线段中间文字(线段长度)颜色
    createText?: (length: number) => string // 计算长度显示的文字，length 单位为千米(km)
}

export interface MeasurePolygonOptions {
    polygonColor?: string, // 内部颜色
    polygonOpacity?: number, // 内部颜色透明度
    polygonOutlineColor?: string, // 边框颜色
    textSize?: number, // 文字大小
    textColor?: string, // 文字颜色
    createText?: (area: number) => string // 创建面积文字,area为平方米
}

export interface MeasureControlOptions {
    btnBgColor?: string // 按钮背景颜色
    btnActiveColor?: string // 按钮激活颜色
    svgHoverColor?: string // 图标hover颜色
    geometryClick?: boolean // 图形是否可以点击
    enableModes?: MeasureType[] //  允许的测量模式，默认所有
    measurePointOptions?: MeasurePointOptions // 测量点选项
    measureLineStringOptions?: MeasureLineStringOptions // 测量线选项
    measurePolygonOptions?: MeasurePolygonOptions // 测量面选项
}

你也可以使用那三个测量类自定义ui，在 MeasureBase 这个抽象类中可以找到所有的公开方法，很简单?

测量新功能

• 点击绘制图形(包括标记文字)弹出更多操作
  这个功能可以在初始化MeasureControl中通过设置geometryClick:true开启
  

回到初始位置

• 就是一个很简单的map.easeTo功能的封装，默认 zoom center pitch bearing 从map的初始值中取

    map.addControl(new BackToOriginControl({
        //eastToOptions:{}
    }))

切换图层

• 切换到卫星影像
  可以自定义 textColor backgroundImage 和显示名字 name

• 附加图层
  通过配置extraLayers参数，激活附加图层ui，提供图层分组功能，组与组之间图层的显隐不互斥，组可以通过mutex直接设置各个图层互斥，也可以在非互斥组内配置LayerItem的mutex参数设置该图层与其他图层互斥。
  您还可以通过设置active属性设置图层默认加载到地图(显示)，但这个active会在初始化控件时检查互斥是否正确，如果互斥组内存在一个以上的active图层或者非互斥组内存在一个互斥图层以及其他的active图层，则抛出异常。

map.addControl(new SwitchMapControl({
    satelliteOption: {
        textColor: 'white',
        //backgroundImage: '/relics.png'
    },
    extraLayers:{
      'foo':{
      }
    }
}));

涂鸦

为圈选做的控件，模仿画笔在地图上画出多边形，在回调中配置扩展逻辑

map.addControl(new DoodleControl({

    name: '',           // 控件名字
    reName : '',        // 重绘名
    exitText : '',      // 退出文本
    lineColor : '',     //线颜色
    lineWidth : 1,      // 线宽
    polygonColor: '',   // 多边形颜色
    polygonOpacity : 1, // 多边形透明度

    // 绘制开始
    onStart: () => { measureControl.stop() },

    // 绘制多边形完成
    onDrawed: polygon => { () => { alert(JSON.stringify(polygon)) } },

    // 清空回调
    onClear:()=>{},

    // 退出回调
    onExit:()=>{}
}))

写在最后

如果您觉得还不错，欢迎star ???