echartsMap使用

记录一下最近使用的echartsMap的使用，在开发过程中避免不了会遇到使用地图的情况，地图的种类又有很多，其中百度地图，高德地图的使用率相对高一点，但是根据自身的需求也可选择一些别的地图使用来完成自己的开发，其中echartsMap就是一种，如果要用echartsMap首先需要自己有地图所需要的geoJson数据，这个数据需要到指定的开源网站上去下载，还有固定的省市区的code地址，然后才能配合echartsMap去使用:

  let layoutSize = 0
            let layoutCenter = ['50%', '65%']
            if (type != 'cha') {
                layoutSize = '65%'
                layoutCenter = ['50%', '55%']
            } else {
                layoutSize = '100%'
                layoutCenter = ['50%', '70%']
            }
            var map = document.getElementById("mapDiv");
            //先加载全国地图,使用require引入json数据
            // const china = require("@/assets/js/100000_full.json");
            // const ccc = require("@/assets/js/100000_province.json");
            // console.log(ccc)
            // this.city = china;
            //注册地图
            this.$echarts.registerMap("城市", this.mapInfo);
            const option = {
                geo: {
                    type: "map",
                    map: "城市",
                    // roam: true,
                    zoom: 1.2,
                    label: {
                        normal: {
                            show: true,
                            fontSize: "12",
                            fontWeight: "bolder",
                            color: '#fff'
                        },
                    },
                    itemStyle: {
                        normal: {
                            areaColor: 'RGBA(3, 39, 45, 0.3)',
                            borderColor: "#0D6675",
                            borderWidth: 1,
                            // shadowColor: "#2C99F6",
                            shadowOffsetY: 0,
                            shadowBlur: 25,
                        },
 
                    },
                    emphasis: { // 鼠标悬浮地图区域样式
                        // focus: 'self',
                        itemStyle: {
                            show: true,
                            fontSize: "12",
                            areaColor: "RGBA(66, 255, 238, 0.5)",
                        },
                        label: {
                            show: true,
                            color: '#fff'
                        },
                    },
                    select: { // 地图选中区域样式
                        label: { // 选中区域的label(文字)样式
                            show: true,
                            color: '#fff',
                        },
                        itemStyle: {// 选中区域的默认样式
                            show: true,
                            color: '#fff'
                        },
                    },
                },
                series: [{
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: [],
                    symbol: '',
                    symbolSize: [30, 50],
                    // symbolOffset: [0, -60],
                    z: 999,
                    // symbolSize: '20',
                    // symbol: 'circle',
                    // itemStyle: { color: "orange" }
                },
                {
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: [],
                    symbol: '',
                    symbolSize: [30, 50],
                    // symbolOffset: [0, -60],
                    z: 999,
                    // symbolSize: '20',
                    // symbol: 'circle',
                    // itemStyle: { color: "orange" }
                }],
                layoutCenter: layoutCenter,//位置
                layoutSize: layoutSize,//大小
 
            };
            // 使用刚指定的配置项和数据显示图表。
            this.mapBox = this.$echarts.init(map);
            this.mapBox.setOption(option);
 
            // 窗口自适应
            (window.onresize = function () {
                if (this.mapBox) {
                    this.mapBox.resize();
                }
            })
            this.mapBox.off('click');
            this.mapBox.on('click', (param) => {
                this.setDrillDown(param.name)
                // event.stopPropagation() // 阻止冒泡
                // console.log(param.data)
                // // console.log(provinceAlphabet)
                // option.series[0].center = [currentData[i].longitude, currentData[i].latitude];
                // option.series[0].layoutCenter = ['50%', '50%'];
                // option.series[0].zoom = 7;
                // this.mapBox.setOption(option);
            });复制

上面this.$echarts.registerMap(“城市”, this.mapInfo)用到 this.mapInfo就是地图需要的geojson数据，大家可以请求自己有的地图数据去解析成需要的格式进行使用，切换地图的话切换对应的地图genjson数据即可。如果大家想要在地图上加对应的图标什么的就需要再对应的 series里面添加对应的数据进行操作，需要设置对应的地图样式也可在上面数据里面设置对应的参数即可，这点在echarts里面可以找到对应的设置

 let urlo = 'image://' + require('../../../assets/img/地图无人机.png');// 自定义图片路径
 let urlt = 'image://' + require('../../../assets/img/地图机场.png');// 自定义图片路径
 var newOption = this.mapBox.getOption();
 imgurl = urlt
 dataObj = {
        name: '机场',
        value: [Number(lng), Number(lat), '01'], //对应的坐标点
    }
    newOption.series[0].data.push(dataObj);
    newOption.series[0].symbol = imgurl
    this.mapBox.setOption(newOption, true);复制

不同的图标需要不同数组进行操作 option.series[0]的data里面，如果想清空对应的图标清空对应的数组里面的数据即可，好处之一就是数据是自己的可以私有化部署，缺点就是地图数据可能每过一段时间需要进行更新。