用echarts绘制的相关地图，热力图层，点，背景等都可修改

实际项目中用echarts绘制的相关地图，热力图层，点，背景等都可修改，点位可点击。

注意事项：

项目中安装的echarts版本必须是4.9.0的，

"echarts": "^4.9.0",
"echarts-countries-js": "^1.0.5",
"echarts-gl": "^1.1.2"

效果如下图所示：

相关完整的组件代码：

<template>
  <!-- 地图 -->
  <div style="width: 100%; position: relative" :style="{ height: height }">
    <div id="main"  :style="{ height: height,width:width }"></div>
  </div>
</template>
<script type="text/ecmascript-6">
    let bdJson;
    export default {
        props:{
            height:{
                type:String,
                default:'550px'
            },
            width:{
                type:String,
                default:'100%'
            },
            MapBtnNum:{
                type:Number,
                default:0
            },
            pointList:{    //相关标记点的数组
                type:Array,
                default:()=>[
                    {
                        name: '业委会一',
                        value: [117.253931,34.870574],
                        datas: 1354,
                        message:'这里展示的相关待定的信息',
                        img : 'image://data:image/png;base64,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'
                    },{
                        name: '业委会二',
                        value: [117.697883,34.695889],
                        datas: 1354,
                        message:'这里展示的相关待定的信息',
                        img : 'image://data:image/png;base64,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'
                    },{
                        name: '业委会三',
                        value: [117.487563,35.132384],
                        datas: 1354,
                        message:'这里展示的相关待定的信息',
                        img : 'image://data:image/png;base64,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'
                    }
                ]
            },
            heatList:{   //热力地图标记展示的数组
                type:Array,
                default:()=>[
                    {
                        name:'点一',
                        coor:[117.463632,35.11275],
                        value:10
                    },{
                        name:'点二',
                        coor:[117.464495,35.108587],
                        value:450
                    },{
                        name:'点三',
                        coor:[117.458566,35.110742],
                        value:110
                    },{
                        name:'点四',
                        coor:[117.457632,35.113784],
                        value:1100
                    },{
                        name:'点五',
                        coor:[117.572337,34.872095],
                        value:1100
                    }
                ]
            },
            mapAbout:{     //map的相关属性的设置
                type:Object,
                default:()=>{
                    return{
                        mapBg:require('../../../assets/indexNormal/mapBg.jpg'),  //地图的覆盖图片
                        mapHoverBg:require('../../../assets/indexNormal/mapBg.jpg'),
                        visualMapMax:100,    //这是热力地图展示的最大值,用来控制颜色的展示
                        inRangeColor:['#D14137','#E7CF1A','#22B536','#047ACF'],   //这是展示的颜色,顺序依次为从大到小
                        geoAspectScale:0.75,   //这里是贴图与背景展示的关系
                        geoLeft:'19%',  //控制贴图的位置'
                        geoLayoutSize:'88%',   //这个控制贴图大小
                        geoSilent: true,  //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
                        geoRoam: true,  //是否开启鼠标缩放和平移漫游
                        geoScaleMin:1.1,//滚轮缩放的最小值
                        geoScaleMax:2.2,//滚轮缩放的最大值
                        geoZoom:1.1,  //这是底部背景的大小
                        mapAreaColor: '#0DD3E4',  //这是底下偏移的柱子的颜色
                        mapShadowColor: 'RGBA(13, 211, 228, 0.9)',   //外发光的颜色
                        mapShadowBlur: 20,  //外发光的距离
                        mapShadowOffsetX: 0,
                        mapShadowOffsetY: 0,
                        mapBorderColor: 'rgba(0, 0, 0, 0.7)',   //底下地图描边的颜色
                        mapBorderWidth: 0,      //底下地图描边的大小
                    }
                }
            },
            series:{         //series的相关树形设置
                type:Object,
                default:()=>{
                    return{
                        labelShow:true,   //文字是否展示
                        labelColor:'#ffffff',  //文字展示的颜色
                        labelHoverColor:'#ffffff',   //鼠标滑过文字展示的颜色
                        mapBorderColor: '#2ab8ff',  //这个是各个区域描边的线
                        mapBorderWidth: 1,   //区域描边的大小
                        mapShadowColor: 'rgba(0, 0, 0, 0.5)', //描边的的shadow
                        mapShadowBlur: 0,   //描边的的shadow的发光
                        mapShadowOffsetX: 0,
                        mapShadowOffsetY: 1,
                        mapHoverBorderColor: '#2ab8ff',   //鼠标滑过的描边的颜色
                        mapHoverBorderWidth: 1,   //鼠标滑过的描边的带线啊哦
                        mapHoverShadowColor: 'rgba(0, 255, 255, 0.7)',   //鼠标滑过的阴影的颜色
                        mapHoverShadowBlur: 10,    //鼠标滑过的阴影的发光的大小
                        mapHoverShadowOffsetX: 0,
                        mapHoverShadowOffsetY: 1,
                        zoom:1.06,  //展示在屏幕上合适的大小
                        roam: true,  //是否开启鼠标缩放和平移漫游
                        left:'19%',   //调整展示距离
                        min:1.06,   //最小
                        max:2.2,    //最大
                        symbolSize: [20, 24],   //点的大小
                        symbolOffset: [0, -20],   //点移动的距离
                    }
                }
            },
        },
        data() {
            return {
                indexMap: '',
            }
        },
        created(){
            bdJson = require('../../../assets/json/bd.json')
        },
        methods: {
            initMap() {
                let that = this;
                var myChart = that.$echarts.init(document.getElementById('main'));
                that.indexMap = myChart
                var bd = bdJson;
                var mapname = bd;
                var mapDate = this.pointList
                //这是相关热力地图的数组数据start
                var heatList = this.heatList
                var geoCoordMap = {}
                heatList.map(item => {
                    geoCoordMap[item.name] = item.coor // 根据自己需求可以拼接
                })
                var convertData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap[data[i].name];
                        if (geoCoord) {
                            res.push(geoCoord.concat(data[i].value));
                        }
                    }
                    return res;
                };

                //热力图end
                //标注的点的base64的图片
                var domImg = document.createElement('img');
                domImg.style.height = domImg.height = domImg.width = domImg.style.width = '500px';
                domImg.src = that.mapAbout.mapBg

                var domImgHover = document.createElement('img');
                domImgHover.style.height = domImgHover.height = domImgHover.width = domImgHover.style.width = '8px';
                domImgHover.src = that.mapAbout.mapHoverBg
                myChart.showLoading('default', {
                    text: '加载中...',
                    maskColor: 'rgba(0,0,0,0)',
                    textColor: '#fff',
                });

                myChart.on('click', function (e) {
                    mapDate.forEach(item=>{
                        if(e.name == item.name){
                            //这里是点的标注的点击事件，根据实际情况来
                            // that.$emit('showInfo',item)
                        }
                    })
                });
                setTimeout(function () {
                    mapInit();
                }, 1000);
                var mapInit = () => {
                    that.$echarts.registerMap('bd', mapname);
                    that.indexMap.hideLoading();
                    that.indexMap.setOption({
                        //热力地图展示
                        visualMap: {
                            min: 0,
                            max: that.mapAbout.visualMapMax,
                            splitNumber: 4,
                            inRange: {
                                color: that.mapAbout.inRangeColor.reverse()
                            },
                            // textStyle: {
                            //     color: '#fff'
                            // },
                            show:false,
                        },
                        //TODO  geo  展示的点
                        geo: {
                            map: 'bd',
                            aspectScale: that.mapAbout.geoAspectScale,
                            left: that.mapAbout.geoLeft,
                            layoutSize:  that.mapAbout.geoLayoutSize,
                            silent:  that.mapAbout.geoSilent,  //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
                            roam:  that.mapAbout.geoRoam,  //是否开启鼠标缩放和平移漫游
                            scaleLimit:{  //滚轮缩放的极限控制
                                min:that.mapAbout.geoScaleMin,
                                max:that.mapAbout.geoScaleMax
                            },
                            z: 0,
                            zoom: that.mapAbout.geoZoom,
                            itemStyle: {
                                areaColor:that.mapAbout.mapAreaColor,  //这是底下偏移的柱子的颜色
                                shadowColor: that.mapAbout.mapShadowColor,   //外发光的颜色
                                shadowBlur: that.mapAbout.mapShadowBlur,  //外发光的距离
                                shadowOffsetX: that.mapAbout.mapShadowOffsetX,
                                shadowOffsetY: that.mapAbout.mapShadowOffsetY,
                                borderColor: that.mapAbout.mapBorderColor,   //底下地图描边的颜色
                                borderWidth: that.mapAbout.mapBorderWidth,      //底下地图描边的大小
                            },
                        },
                        series: [
                            {
                                name:'覆盖图层',
                                type: 'map',
                                label: {
                                    show: that.series.labelShow,
                                    textStyle: {
                                        color: that.series.labelColor,
                                    },
                                    emphasis: {
                                        textStyle: {
                                            color: that.series.labelHoverColor,
                                        },
                                    },
                                },
                                itemStyle: {
                                    borderColor: that.series.mapBorderColor,  //这个是各个区域描边的线
                                    borderWidth: that.series.mapBorderWidth,
                                    areaColor: {
                                        image: domImg,
                                        repeat: 'repeat',
                                    },
                                    shadowColor: that.series.mapShadowColor, //描边的的shadow
                                    shadowBlur: that.series.mapShadowBlur,
                                    shadowOffsetX: that.series.mapShadowOffsetX,
                                    shadowOffsetY: that.series.mapShadowOffsetY,
                                    emphasis: {    //这是鼠标划上的高亮的显示的样式
                                        areaColor: {
                                            image: domImgHover,
                                            repeat: 'repeat',
                                        },
                                        borderColor: that.series.mapHoverBorderColor,
                                        borderWidth: that.series.mapHoverBorderWidth,
                                        shadowColor: that.series.mapHoverShadowColor,
                                        shadowBlur: that.series.mapHoverShadowBlur,
                                        shadowOffsetX: that.series.mapHoverShadowOffsetX,
                                        shadowOffsetY: that.series.mapHoverShadowOffsetY,
                                        label: {
                                            show: false,
                                        },
                                    },
                                },
                                zoom: that.series.zoom,
                                // silent: false,  //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
                                roam: that.series.roam,
                                left:that.series.left,
                                scaleLimit:{
                                    min:that.series.min,
                                    max:that.series.max
                                },
                                map: 'bd',
                            },

                            //坐标点
                            {
                                name:'点标注',
                                coordinateSystem: 'geo',
                                itemStyle: {
                                    color: 'rgba(0,0,0,1)',
                                },
                                // symbol: pointImg,
                                symbol: function (value, params) {
                                    return params.data.img;
                                },
                                symbolSize: that.series.symbolSize,
                                symbolOffset: that.series.symbolOffset,
                                z: 9999,
                                data: mapDate,
                                type:'effectScatter',  //动效展示
                                rippleEffect: {
                                    scale: 3,
                                    brushType: 'stroke',
                                },
                            },
                            {
                                name: '热力图层',
                                type: 'heatmap',
                                coordinateSystem: 'geo',
                                data: convertData(that.heatList),
                                z: 3,
                                silent: false,  //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
                                roam: false,
                            },
                        ],
                    });
                };
                //两层一起滚动拖拽
                that.indexMap.on('georoam',function(params){
                    var option = that.indexMap.getOption();//获得option对象
                    if(params.zoom!=null&&params.zoom!=undefined){ //捕捉到缩放时
                        option.geo[0].zoom=option.series[0].zoom;//下层geo的缩放等级跟着上层的geo一起改变
                        option.geo[0].center=option.series[0].center;//下层的geo的中心位置随着上层geo一起改变
                    }else{//捕捉到拖曳时
                    if(option.geo[0].center!=null&&option.geo[0].center!=undefined){
                        option.series[0].center = option.geo[0].center
                    }else{
                        option.geo[0].center = option.series[0].center
                    }
                    }
                    that.indexMap.setOption(option);//设置option
                });

            },
        },
        mounted() {
            var that = this
            // 新建一个promise对象
            let newPromise = new Promise((resolve) => {
                resolve()
            })
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {
                that.initMap()
            })

        },
    }
</script>
<style scoped lang="scss">
.indexMapBack{
    width: 70px;
    height: 73px;
    position: absolute;
    top:20px;
    left: 20px;
    cursor: pointer;
}
.centerRight {
  width: 260px;
  height: 200px;
  background: url("../../../assets/indexNormal/mapShow.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  .title {
    font-size: 18px;
    color: #ffffff;
    text-align: center;
    padding-top: 30px;
  }
  .message {
    font-size: 14px;
    color: #ccefff;
    padding: 5px 10px 5px 15px;
    span {
      color: #ffc106;
    }
  }
  .closeRight {
    position: absolute;
    top: -2px;
    right: 7px;
    font-size: 20px;
    color: #ffffff;
    cursor: pointer;
  }
}

</style>
<style>
.anchorBL {
  display: none;
}
</style>

展示的相关区县官方json文件的获取方法：

打开：http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=37.549487261960266&lng=118.69568449999997&zoom=9.5

然后输入相关的市的展示，点击其他类型的下载或粘贴即可获取相对应的json