交通地图组件

研发人:刘晖 研发日期: 2021年11月20日 示例框架: Vue 2.0，高德地图 1.4.15

简介

zhdd-map 地图组件是基于高德SDK开发的一款应用（目前仅支持高德版本2.0和1.4.5）

引入

• 在程序执行入口配置文件 以vue main.js为例

// 交通地图组件
import ZhddMap from 'zhdd-map';
Vue.use(ZhddMap,{
    initMapConfig: Object,
    themeConfig: Object,
    mapIconConfig: Array,
    fetchConfig: Object
})

• 应用方式(以添加marker为例)

地图加载：(单地图加载可不传 默认地图id为zhdd-map)
this.$mapSDK(mapId).createZhddMapMarkLayer(data,callBack)

• 应用demo(以vue为例)

<template>
    <div>
        <div class="map">
            <zhdd-map @map-load="onMapLoad" @map-load-event="onWatchMapEvent" :mapConfig="mapConfig">
                <div style="display: flex">
                    <zhdd-map-icon style="margin-left: 10px;" v-for="(item,index) in type" @load-point="loadPoint" :icon-config="item" :key="index" @point-click="onPointClick"></zhdd-map-icon>
                </div>
                <zhdd-map-dialog ref="mapDialog">
                    <div>123</div>
                </zhdd-map-dialog>
                <zhdd-map-layer>
                    <div style="background: #ffffff;">自定义图层</div>
                </zhdd-map-layer>
            </zhdd-map>
            <div>
                <button v-on:click="createAddMarkers">添加标记点</button>
                <button v-on:click="removeMarkers">移除标记点</button>
                <button v-on:click="showMarkers">显示标记点</button>
                <button v-on:click="hideMarkers">隐藏标记点</button>
                <button v-on:click="createMarkerClusterer">创建聚合点</button>
                <button v-on:click="createMarkeLine">画线</button>
                <button v-on:click="addWindowInfo">创建信息窗体</button>
                <button v-on:click="closeWindowInfo">关闭信息窗体</button>
                <button v-on:click="mapMove">地图移动</button>
                <button v-on:click="getMapCenter">获取中心点</button>
                <button v-on:click="getMapZoom">获取层级</button>
                <button v-on:click="clearAll">清除所有</button>
                <button v-on:click="setBounds">设置显示范围</button>
                <button v-on:click="setLimitBounds">设置可拖动区域</button>
                <button v-on:click="clearLimitBounds">取消可拖动区域</button>
                <button v-on:click="addControls">添加地图控件</button>
                <button v-on:click="setMapStyle">设置地图样式</button>
                <button v-on:click="setMapFeatures">设置地图元素</button>
                <button v-on:click="addMapImageLayer">添加图片图层</button>
                <button v-on:click="addRightClick">设置右击菜单</button>

                <button v-on:click="drawRegion('rectangle')">绘制矩形</button>
                <button v-on:click="drawRegion('circle')">绘制圆形</button>
                <button v-on:click="drawRegion({name:'polygon',lineColor:'#ffffff',areaColor:'#ff0000'})">绘制多边形</button>
                <button v-on:click="clearRegion">清除绘制内容</button>
                <button v-on:click="createProvinceBoundary">加载省边界</button>
            </div>
            <WindowInfo ref="windowInfo" v-show="windowInfoVisible"/>
        </div>
        <div style="margin-top: 10vh" class="map">
            <zhdd-map id="secondMapF" @map-load="onMapLoad" @map-load-event="onWatchMapEvent" :mapConfig="mapConfig">
                <div style="display: flex">
                    <zhdd-map-icon style="margin-left: 10px;" v-for="(item,index) in type" :icon-config="item" :key="index" @point-click="onPointClick"></zhdd-map-icon>
                </div>
                <zhdd-map-dialog ref="mapDialog">
                    <div>123</div>
                </zhdd-map-dialog>
                <zhdd-map-layer>
                    <div style="background: #ffffff;">自定义图层</div>
                </zhdd-map-layer>
            </zhdd-map>
            <div>
                <button v-on:click="createAddMarkersT">添加标记点</button>
            </div>
        </div>
    </div>

</template>

<script>

    import WindowInfo from "./WindowInfo";
    import ZhddMapLayer from "../../components/zhdd-map/components/ZhddMapLayer";
    import ZhddMap from "../../components/zhdd-map/components/ZhddMap";

    export default {
        /**
         * @description     地图入口
         * @author          刘晖([email protected])
         * @time            2021/11/9 11:50
         */
        name: "index",
        components:{ WindowInfo},
        data() {
            return {
                map: null,
                type:[
                    {
                        type: 'lk',
                        active: false,
                    },
                    'sxt',
                    {
                        type: 'qbb',
                        img: [require('@/assets/audio.png'),require('@/assets/camera.png')],
                    },
                    'jdd','dlsj','jycl','jc','zfc','lytc','qxd','gq','fwq','sfz','qd','etc','tcq','sn','ql','sd','lx','zh'
                ],
                mapConfig:{
                    zoom: 9,
                    center: [119.206742, 32.464552],
                    // mapStyle: 'amap://styles/f1ffbcf055ee51e896fe7054d6565d0d',
                    mapStyle: 'amap://styles/dark',
                },
                markers : null,
                mouseTool:null,
                windowInfoVisible: null,
            }
        },
        methods: {

            loadPoint(){
                console.log("业务点回调")
            },

            createProvinceBoundary(){
                this.$mapSDK().createProvinceBoundary({});
            },

            createAddMarkersT(){
                let points = [
                    {icon: 'icon-gs-qbb',path: [119.206742,32.464552],name: 'test1'},
                    {icon: 'icon-gs-qbb',path: [119.349907,32.388627],name: 'test2'},
                    {icon: 'icon-gs-qbb',path: [119.401749,32.386017],name: 'test3'},
                    {icon: 'icon-gs-qbb',path: [119.393509,32.323953],name: 'test4'},
                    {icon: 'icon-gs-qbb',path: [119.493416,32.410657],name: 'test5'},
                ]
                this.$mapSDK('secondMapF').createZhddMapMarkLayer(points,(e,data)=>{})
            },

            onMapLoad(map){
                this.map = map;
                console.log("地图加载完成")
            },
            /**
             * 地图事件监听
             * @param e
             */
            onWatchMapEvent(e){

            },
            createMarkerClusterer(){
                let points1 = [];
                let points2 = [];
                let points3 = [];
                for (let i = 0;i < 100;i ++){
                    points1.push({
                        name: '情报板',
                        icon: 'normal-icon-gs-qbb',
                        path: [119.206742 + 0.48058*0.1*Math.random(),32.464552 + 0.60079*0.1*Math.random()],
                        size: [50,50],
                        type: 0
                    })
                    points2.push({
                        name: '收费站',
                        icon: 'normal-icon-gs-sfz',
                        path: [119.206742 + 0.48058*0.1*Math.random(),32.464552 + 0.60079*0.1*Math.random()],
                        size: [30,30],
                        type: 1
                    })
                    points3.push({
                        name: '服务区',
                        icon: 'normal-icon-gs-fwq',
                        path: [119.206742 + 0.48058*0.1*Math.random(),32.464552 + 0.60079*0.1*Math.random()],
                        size: undefined,
                        type: 2
                    })
                }
                this.cluster1 = this.$mapSDK().createZhddMapMarkerCluster(points1,'green');
                this.cluster1 = this.$mapSDK().createZhddMapMarkerCluster(points2,'blue');
                this.cluster1 = this.$mapSDK().createZhddMapMarkerCluster(points3,'yellow');
            },
            createAddMarkers(){
                let points = [
                    {icon: 'icon-gs-qbb',path: [119.206742,32.464552],name: 'test1'},
                    {icon: 'icon-gs-qbb',path: [119.349907,32.388627],name: 'test2'},
                    {icon: 'icon-gs-qbb',path: [119.401749,32.386017],name: 'test3'},
                    {icon: 'icon-gs-qbb',path: [119.393509,32.323953],name: 'test4'},
                    {icon: 'icon-gs-qbb',path: [119.493416,32.410657],name: 'test5'},
                ]
                this.markers = this.$mapSDK().createZhddMapMarkLayer(points,(e,data)=>{
                    console.log('marker点击')
                })
            },
            removeMarkers(){
                this.markers = this.$mapSDK().removeZhddMapMarkLayer(this.markers);
            },
            showMarkers(){
                this.$mapSDK().showZhddMapMarkerLayer(this.markers);
            },
            hideMarkers(){
                this.$mapSDK().hideZhddMapMarkerLayer(this.markers);
            },
            createMarkeLine(){
                let data = [
                    {
                    name: 'test',
                    path: [
                        [120.338348,31.458074],
                        [120.332769,31.453736],
                        [120.328542,31.450551],
                        [120.32498,31.448391],
                        [120.317899,31.444949],
                        [120.301848,31.437736],
                        [120.294016,31.434166],
                        [120.286227,31.430907],
                        [120.275048,31.427264],
                        [120.26552,31.423913],
                        [120.257281,31.42135],
                        [120.245779,31.420086],
                        [120.236338,31.420709],
                        [120.234514,31.421093],
                        [120.234514,31.421093],
                    ],
                    config:{
                        lineWidth: 8,
                        lineColor: '#FF0000',
                        selectWidth: 10,
                        selectColor: '#2eff00',
                    }
                },{
                    name: 'test1',
                    path: [
                        [120.234514,31.421093],
                        [120.217949,31.426238],
                        [120.208078,31.431603],
                        [120.201621,31.43504],
                        [120.155938,31.459442],
                        [120.138493,31.46885],
                        [120.137227,31.469344],
                    ],
                    config:{
                        lineWidth: 8,
                        lineColor: '#00B2D5',
                        selectWidth: 10,
                        selectColor: '#FFEA00',
                        lineStyle: 'dashed'
                    }
                }];
                this.$mapSDK().createZhddMapLineLayer(data,(e,data)=>{

                })
            },
            addWindowInfo(){
                this.windowInfoVisible = true;
                let data = {
                    content: this.$refs.windowInfo.$el,
                    path: [119.378231 + 0.48058 * 1.5 * Math.random(),32.458852+ 0.60079 * 1.5 * Math.random()]
                }
                this.windowInfo = this.$mapSDK().createZhddMapWindowInfo(data,false)
            },
            closeWindowInfo(){
                this.windowInfoVisible = false;
                this.windowInfo.close();
            },
            mapMove(){
                let path = [119.378231 + 0.48058 * 1.5 * Math.random(),32.458852+ 0.60079 * 1.5 * Math.random()]
                this.$mapSDK().setZhddMapCenterAndZoom(path,Math.floor(Math.random() * 7) + 5);
            },
            getMapZoom(){
                alert(this.$mapSDK().getZhddMapZoom());
            },
            getMapCenter(){
                alert(this.$mapSDK().getZhddMapCenter());
            },
            clearAll(){
                this.$mapSDK().clearZhddMap()
            },
            setBounds(){
                this.$mapSDK().setZhddMapBounds([118.27467,32.255442],[119.609509,31.714976]);
            },
            setLimitBounds(){
                this.$mapSDK().setZhddMapLimitBounds([118.27467,32.255442],[119.609509,31.714976]);
            },
            clearLimitBounds(){
                this.$mapSDK().clearZhddMapLimitBounds();
            },
            addControls(){
                this.$mapSDK().addZhddMapControl(['scale','toolBar','controlBar','overView'])
            },
            setMapStyle(){
                this.$mapSDK().setZhddMapStyle('dark')
            },
            setMapFeatures(){
                this.$mapSDK().setZhddMapFeatures(['bg','road','building'])
            },
            addMapImageLayer(){
                this.$mapSDK().createZhddMapImgLayer(
                    'http://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg',
                    [118.27467,32.255442],
                    [119.609509,31.714976]
                )
            },
            onPointClick(e){
                if (e.type != 'pathClick')
                    this.$refs.mapDialog.openDialog(['20vw','20vh'],e.data.lnglat);
            },
            addRightClick(){
                let events = [{
                    name: '绘制矩形',
                    event: this.drawRectangle
                },{
                    name: '绘制圆形',
                    event: this.drawRircle
                },{
                    name: '绘制多边形',
                    event: this.drawPolygon
                }];
                this.$mapSDK().setZhddMapRightClick(events)
            },
            drawRegion(type){
                this.$mapSDK().drawZhddMapRegion(type,this.markers,(e,data)=>{
                    data.map((item,index)=>{
                        this.$mapSDK().setZhddMapMarkerStyle(item,'icon-event-jtsg')
                    })
                    console.log("区域内点有" + data.length + '个')
                });
            },
            clearRegion(){
                this.$mapSDK().clearZhddMapRegion(this.mouseTool)
            },
            createEventPoint(){
                this.$mapBusinessFunction.createEventPoint()
            }
        },
        mounted() {
        },
        created() {

        }
    }
</script>

<style scoped>

    .map {
        width: 100%;
        height: 40vh;
    }

</style>

属性

• 项目初始化参数

• initMapConfig [Object]

地图初始化配置 （非必传）
    - key               地图 AppKey 默认 - ec77a5e5142d5be617922fe37646d704
    - v                 地图版本号   默认 - 1.4.15
    - uiVersion         地图版本对应的UI组件版本号  默认 - 1.1
    - securityJsCode    地图安全密钥（自定义地图样式使用）   默认 - af7e0af2c1e798d2d5d10e71e2d154e6

• themeConfig [Object]

地图主题配置 （非必传 默认深色主题）

示例：

/**
 * @description  业务层主题配置
 * @author       刘晖([email protected])
 * @date         2021/11/18 17:56
 */

import businessApi from "../../components/zhdd-map/api/business-api";

const lightLayerImgConfig = [
    {
        type: 'zh',
        img: [require('../../../public/static/icon-fwq.png'),require('../../../public/static/icon-jc.png')],
        icon: [
            {name: 'icon-test01',url: require('../../../public/static/icon-jy.png')},
            {name: 'icon-test01-active',url: require('../../../public/static/icon-ddzx-active.png')},
        ],
    },{
        type: 'qbb',
        img: [require('../../../public/static/icon-ddzx-active.png'),require('../../../public/static/icon-jy.png')],
        icon: [
            {name: 'icon-test02',url: require('../../../public/static/icon-jc.png')},
            {name: 'icon-test02-active',url: require('../../../public/static/icon-fwq.png')},
        ],
        size:[30,30]
    }];

const lightConfig = {
    theme: 'light', // 主题
    mapConfig:{     // 地图配置
        mapStyle: 'amap://styles/light',
    },
    businessConfig: lightLayerImgConfig,    // 业务图标
    businessStyleConfig: {  // 弹框样式
        iconClose: require('../../assets/icon-fwq.png'), //关闭按钮
        background: '#F2F2F2'   // 弹框背景
    }

};
export { lightConfig };

• mapIconConfig [Array]

地图图标配置 （非必传 默认深色主题图标）
示例：
/**
 * @description  地图图标配置
 * @author       刘晖([email protected])
 * @date         2021/11/3 10:00
 */

const iconStyle = [
    {
        name: 'icon-zl-sn',
        url: require('../assets/images/map/icon/icon-zl-sn.png')
    },
    {
        name: 'icon-zl-sfz',
        url: require('../assets/images/map/icon/icon-zl-sfz.png')
    }
];

export default iconStyle;

• fetchConfig [Object]

地图业务层请求配置 （非必传 默认：baseUrl: 'http://jtqg.gandongyun.cn/map',）
示例：
{
    baseUrl: 'http://jtqg.gandongyun.cn/map', //请求地址,
    headers:{},  //请求头
    ...
}

方法

方法调用方式：
this.$mapSDK().function
具体使用方式见 "实际应用"

• 创建Marker标记点

/**
 * 创建Marker标记点
 * @param data  -Array
 *          -- icon: [] -Array (['icon-gl-etc','icon-gl-etc-active'])
 *          -- path: [lng,lat]
 *          -- name: ''
 * @param callback 回调
 *          -- e 点击marker对象
 *          -- item 点击marker数据
 *          
 * @returns markers实例
 */
createZhddMapMarkLayer(data, callback)

• 移除Marker标记点

/**
 * 移除Marker标记点
 * @param markers Marker实例
 * @returns markers实例
 */
removeZhddMapMarkLayer(markers)

• 显示Marker标记点

/**
 * 显示Marker标记点
 * @param markers Marker实例
 */
showZhddMapMarkerLayer(markers)

• 隐藏Marker标记点

/**
 * 隐藏Marker标记点
 * @param markers Marker实例
 */
hideZhddMapMarkerLayer(markers)

• 修改marker图标

/**
 * 修改marker图标
 * @param marker    -marker对象
 * @param icon      -图标名称
 */
setZhddMapMarkerStyle(marker,icon)

• 创建线图层

/**
 * 创建线图层
 * @param data  -Array
 *          - path: [lng,lat] 
 *          - lineColor: '' 线条颜色
 *          - lineWidth: '' 线条宽度
 *          - lineStyle: '' 线条样式
 * @param callback
 *          - e     对象
 *          - item  对应数据
 */
createZhddMapLineLayer(data,callback)

• 创建文本标记

/**
 * 创建文本标记
 * @param data  Array
 *          - text string 内容
 *          - path: [lng,lat]
 *          - offset: [0,0]    偏移量
 *          - style object  样式
 * @returns 文本标记对象
 */
createZhddMapTextMarker(data)

• 创建弹框

/**
 * 创建弹框
 * @param isCustom Boolean - 是否使用自定义组件
 * @param data - Object
 *          -- path: [lng,lat] -弹框显示位置
 *          -- content: ''/VNode/$el -弹框内容
 */
createZhddMapWindowInfo(data, isCustom)

• 地图中点移动（层级/中心）

/**
 * 地图中点移动（层级/中心）
 * @param center 中心点坐标 [lng,lat]
 * @param zoom   层级
 */
setZhddMapCenterAndZoom(center, zoom)

• 获取地图实例

/**
 * 获取地图实例
 * @returns 地图实例
 */
getZhddMap()

• 获取地图中心点

/**
 * 获取地图中心点
 * @returns 地图中心点坐标
 */
getZhddMapCenter()

• 获取地图层级

/**
 * 获取地图层级
 * @returns 地图当前层级
 */
getZhddMapZoom()

• 清除地图所有的覆盖物

/**
 * 清除地图所有的覆盖物
 */
clearZhddMap()

• 设置地图显示范围

/**
 * 设置地图显示范围
 * @param southWestLngLat([lng,lat])-Array
 * @param northEastLngLat([lng,lat])-Array
 */
setZhddMapBounds(southWestLngLat, northEastLngLat)

• 设置地图可拖动区域

/**
 * 设置地图可拖动区域
 * @param southWestLngLat([lng,lat])-Array
 * @param northEastLngLat([lng,lat])-Array
 */
setZhddMapLimitBounds(southWestLngLat, northEastLngLat)

• 清除地图限制拖动区域

/**
 * 清除地图限制拖动区域
 */
clearZhddMapLimitBounds()

• 设置地图样式

/**
 * 设置地图显示样式
 * @param style - String 
 */
setZhddMapStyle(style)

• 设置地图显示元素

/**
 * 设置地图显示元素
 * @param features( ['bg','point','road','building'] )-Array
 *          -- bg       地图背景
 *          -- point    兴趣点
 *          -- road     道路
 *          -- building 建筑物
 */
setZhddMapFeatures(features)

• 创建图片图层

/**
 * 创建图片图层
 * @param img               图片地址
 * @param southWestLngLat   ([lng,lat])-Array
 * @param northEastLngLat   ([lng,lat])-Array
 * @param zooms             显示层级范围
 */
createZhddMapImgLayer(img, southWestLngLat, northEastLngLat, zooms)

• 地图缩放至适合marker级别

/**
 * 地图缩放至适合marker级别
 */
setZhddMapFitView()

• 添加右击菜单

/**
 * 右击菜单
 * @param events
 *          -- 事件数组  [{name:String,event:Function}]
 */
setZhddMapRightClick(events)

• 判断点是否在区域内

/**
 * 判断点是否在区域内
 * @param region    -区域对象
 * @param markers   -点对象集合
 */
judgePointIsInRegion(region,markers)

• 清除绘制内容

/**
 * 清除绘制内容
 */
clearZhddMapRegion()

• 打开实时路况

/**
 * 打开实时路况
 */
openZhddMapTrafficLayer()

• 隐藏实时路况

/**
 * 隐藏实时路况
 * @param traffic 路况实例
 */
hideZhddMapTrafficLayer(traffic)

• 加载海量点图层

/**
 * 加载海量点图层
 * @param data Array
 *          - id 标注层id
 *          - name  标注层提示信息
 *          - lnglat    标注层经纬度
 *          - position  标注层经纬度
 *          - icon      标注层名称
 *          - zooms     标注层展示层级范围
 *          - zIndex    标注层与其它图层的叠加顺序
 * @param config Object
 *          - width     标注层图片宽度
 *          - height    标注层图片高度
 * @param callBack  事件回调
 */
createZhddMapMassPoint(data, config, callBack)

• 创建点聚合

/**
 * 创建点聚合
 * @param data  Array
 *          - name '' 图标提示信息
 *          - path [lng,lat] 经纬度
 *          - icon '' 图标名称
 *          - size [32,32] 图标大小
 * @param color 点聚合颜色
 * @param callback   单个标记点点击回调
 *          - e 标记点对象
 *          - item 标记点data
 * 
 * @returns {AMap.MarkerClusterer}
 */
createZhddMapMarkerCluster(data,color,callback)

• 绘制区域

/**
 * 绘制区域
 * @param region
 *              -{
 *                  name:'', 绘制类型名称
 *                  lineColor:'', 边框颜色
 *                  areaColor:''  区域颜色
 *              }
 * @param markers  （标记点对象数组 可获取所绘制区域内的markers）
 * @param callback
 *             -return 覆盖物对象
 */
drawZhddMapRegion(region,markers,callback)

• 添加地图控件

/**
 * 添加地图控件
 * @param controls( ['scale','toolBar','controlBar','overView'] )-Array
 *          -- scale        比例尺
 *          -- toolBar      工具条
 *          -- controlBar   工具条方向盘
 *          -- overView     显示鹰眼
 */
addZhddMapControl(controls)

事件

• 地图事件监听

<template>
    <zhdd-map @map-load-event="onWatchMapEvent"></zhdd-map>
</template>
<script>
    methods: {
        /**
         * 地图事件监听
         * @param e
         */
        onWatchMapEvent(e){

        },
    }
</script>

地图组件说明

• 地图组件

<zhdd-map></zhdd-map>
props: {
    id:{                        // 地图实例id
        default: () => 'zhdd-map',
        type: String
    },
    eventType: {                //地图事件监听数组
        default: () => [],
        type: Array
    },
    mapConfig: Object           //地图加载配置
},

• 地图图标组件

<zhdd-map-icon></zhdd-map-icon>

props: {
    iconConfig: null, //图标配置
},

例1：Object(同 themeConfig)

{
    type: 'sxt',                                                            //类型
    name: '摄像头',                                                          //名称
    model: 'point',                                                         //根据model判断加载图层（point、line、lk）
    queryUrl: businessApi.getSXTMapLayerList,                               //数据请求地址
    img: [
        require('../../static/images/map-layer/dark/img-sn.png'), 
        require('../../static/images/map-layer/dark/img-sn-active.png')
    ],                                                                      //图层图标
    icon: [
        {name: 'icon-gs-sn', url: require('../../static/images/map-icon/dark/gs/icon-sn.png')},
        {name: 'icon-gs-sn-active', url: require('../../static/images/map-icon/dark/gs/icon-sn-active.png')},
    ],                                                                      // 标记点图标
    active: false,                                                          //是否默认选中
    iconWidth: '10px',                                                      //图标宽度
    iconHeight: '10px'                                                      //图标高度
}

例2：Object(同 themeConfig)

{
    type: 'lx',                                                             //类型
    name: '路线',                                                            //名称
    model: 'line',                                                          //根据model判断加载图层（point、line、lk）
    queryUrl: businessApi.getSXTMapLayerList,                               //数据请求地址
    img: [
        require('../../static/images/map-layer/dark/img-sn.png'), 
        require('../../static/images/map-layer/dark/img-sn-active.png')
    ],                                                                      //图层图标
    icon: [
        {name: 'icon-gs-sn', url: require('../../static/images/map-icon/dark/gs/icon-sn.png')},
        {name: 'icon-gs-sn-active', url: require('../../static/images/map-icon/dark/gs/icon-sn-active.png')},
    ],                                                                      // 标记点图标
    active: false,                                                          //是否默认选中
    width: 4,                                                               //线宽
    color: '#b0ff00',                                                       //线颜色
}

例3：Object(同 themeConfig)

{
    type: 'lk',                                                             //类型
    name: '路况',                                                            //名称
    model: 'lk',                                                            //根据model判断加载图层（point、line、lk）
    img: [
        require('../../static/images/map-layer/dark/img-sn.png'), 
        require('../../static/images/map-layer/dark/img-sn-active.png')
    ],                                                                      //图层图标
    active: false,                                                          //是否默认选中
}

例4：String（目前仅支持21中配置 ['lk','sxt','qbb','jdd','dlsj','jycl','jc','zfc','lytc','qxd','gq','fwq','sfz','qd','etc','tcq','sn','ql','sd','lx','zh']）
    'qbb'

• 地图弹框组件

<zhdd-map-dialog></zhdd-map-dialog>

props:{
    top:{default:()=>'10px',type:String},            //图标位置
    right:{default:()=>'10px',type:String},          //图标位置
    showClose:{default:()=>true,type:Boolean},       //是否显示关闭图标
},

• 地图图层组件

<zhdd-map-layer></zhdd-map-layer>

地图样式使用说明

若需自定义地图样式，需到高德开放平台创建应用，获取AppKey和securityJsCode
高德开放平台地址：https://console.amap.com/dev/index

地图海量点ToolTip样式说明

设置 map-icon-hover