写在前面

持续更新

  • 仓库地址
    github
    npm

  • 功能

功能介绍图层分组操作

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

        /**         * 所有图层组，不要尝试自行使用         */        layerGroups: Dict        /**         * 所有图层组的图层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 class MeasurePointOptions {    constructor(        /**         * 经纬度文字的大小         */        public textSize = 12,         /**         * 文字颜色         */          public textColor = "#000000",        /**         * 文字在众方向上的偏移          */        public textOffsetY = -1.2,        /**         * 点颜色         */        public pointColor = "#000000",        /**         * 文字创建         */        public createText = (lng: number, lat: number) => `${lng.toFixed(4)} , ${lat.toFixed(4)}`    ) { }}export class MeasureLineStringOptions {    /**     *     */    constructor(        /**         * 线颜色         */        public lineColor = "#000000",        /**         * 线宽         */        public lineWidth = 1,        /**         * 端点颜色         */        public segmentPointColor = "#000000",        /**         * 文字在纵方向上的偏移         */        public textOffsetY = -1.2,        /**         * 端点(距离求和)文字的大小         */        public segmentTextSize = 12,        /**         * 端点(距离求和)文字的颜色         */        public segmentTextColor = "#000000",        /**         * 是否显示线段中间文字(线段长度)         */        public showCenterText = true,        /**         * 线段中间文字(线段长度)大小         */        public centerTextSize = 12,        /**         * 线段中间文字(线段长度)颜色         */        public centerTextColor = "#ff0000",        /**         * 计算长度显示的文字，length 单位为千米(km)         */        public createText = (length:number) => length > 1 ? `${length.toFixed(3)}km` : `${(length * 1000).toFixed(2)}m`    ) { }}export class MeasurePolygonOptions {    constructor(        /**         * 内部颜色         */        public polygonColor = "#ff0000",        /**         * 内部颜色透明度         */        public polygonOpacity = 0.5,        /**         * 边框颜色         */        public polygonOutlineColor = "#000000",        /**         * 文字大小         */        public textSize = 15,        /**         * 文字颜色         */        public textColor = "#000000",        /**         *  创建面积文字,area为平方米         */        public createText = (area: number) => area > 1000000 ?            `${(area / 1000000).toFixed(4)}km²` :            `${area.toFixed(4)}m²`    ) { }}export interface MeasureControlOptions {    /**     * 按钮背景颜色     */    btnBgColor?: string    /**     * 按钮激活颜色     */    btnActiveColor?: string    /**     * 图标hover颜色     */    svgHoverColor?: string    /**     * 允许的测量模式，默认所有     */    enableModes?: MeasureType[]    /**      * 测量点选项     */    measurePointOptions?: MeasurePointOptions    /**     * 测量线选项     */    measureLineStringOptions?: MeasureLineStringOptions    /**     * 测量面选项     */    measurePolygonOptions?: MeasurePolygonOptions}

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

写在最后

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