echarts 地图 给每个区域设置定位点图标及散点

首先：echarts地图要先准备好，地图的json数据。.

实现的效果图：

 代码：

import Util from "@/util/echarts/common"; // 引入echarts公共的类\
import yangZhou from "../yangZhouMapdata.json"; // 扬州地图数据

export default class Bar extends Util {
    constructor(el, option) {
        super(el, option); // 继承父类，echarts公共类的值
        this.init(); // 初始化
    }

    init() {
        setTimeout(() => {
            this.myChart = this.$e.init(this.$el);
            this.setCharts();
            this.$e.registerMap("yangzhou", yangZhou); // 注册扬州数据
            this.myChart.setOption(this.chartOption, true); // 将配置项加到echarts中
            window.addEventListener("resize", () => { // 监听屏幕缩放，使echarts同样缩放
                this.myChart.resize();
            });
        }, 1000);
    }

    setCharts() { // 配置echarts
        // 地图上的图标
        var img = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAgCAYAAAAIXrg4AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALxSURBVHgB1VVPTxNBFH9vtgURgiiJmMi/HvRgotDoQb1Y4hUQTDwLnwD5BNJPIF69iGcTA2jixUTUi0abxXgyMe7S9lA0hlKlgNud8c3arbvtzvaPJoZfMtmdee/9fvNm3r4FOOjAMOOUoffYjM8wZFdoOkpjuGwyaaxz4CuPB88vtSQwldHnhIAFeu2BcJgklFQJBQpMpvU7ZLgFTUAALK4OxufrCrRC7sHSymB81rvAvJMJQ5/5C3KJmYmNlC++koG8UKGBDn8uslXk0YbYciyel5NKBjZpNEBulkcYnMpzJxUBpsHNkKBl2lWczjcmh9yhXFM5I2DCfY941kdV5EQ67VuIxU16TF9L68/pmagRQByB6gxAUe+023lQ7VRtGw4SyAc45su7DQTZ1lVxNQJCiBX4RyCuFzUCjONSgG/PuKEnQIGpzFtpqzlahqJSAL4vmS7NgNpSNWUFuXVdIVd/N6asNHfirSJ5aUkKul8VMCyJJtKppGb/XJMLttaWoN5zO4Ccjgce+DirHRRZNAqZ7Zi3MFi1BznMQotAatvVVRfcrjdSi4hsDpqD7+xdsCBPxtkC1O85XsgGNxbIFbQoK6aZo0IBSdUHyVRBFLAmA6EOqGruLg/FF1V2FhZMgQsQ0jUJJuPOfxtaEpAoH5UZRF4uyXxovMow/m71cFts6Jj1QxyJaOIMt8U96sNOW6CjszCi3SiV+Keohtua2Pn2cODybkMC09k3vQDR05Rcr7DFWcHgJDkdBTkEXqVDR8r7Gc236GveQoYfSdDQGG5zDsaj/pGsUuA3efsl+U6XRzUtLlZt5zgK0SUAP3uXOeIrDcAh3uvofPm091TBtfnuIJ3TyIBFhwvBoLb4mv5OmxUHAV985DSnDD645DK2q/jV8u8pANez7/sF2AOcs27GIFoW7PT6UIY7zu45WIzxQimi5b73ncusIZbqCnghLzt6oq9j38Looe52p/vuFfZL7VFhWbnN3ScXJovwP/ELdRUYJKitueUAAAAASUVORK5CYII=";
        var mydata = [   // 总数
        ];

        var RTM_ARR = [ // 对应区域的圆点的数量
            {
                name: "宝应县", locs: [
                    {name: "", value: [119.354952, 33.247371]},
                    {name: "", value: [119.319891, 33.230946]}
                ]
            },
            {
                name: "高邮市", locs: [
                    {name: "", value: [119.499821, 32.788484]},
                    {name: "", value: [119.511176, 32.779256]}
                ]
            },
            {
                name: "江都区", locs: [
                    {name: "", value: [119.576383, 32.440478]},
                    {name: "", value: [119.573257, 32.464578]}
                ]
            },
            {
                name: "市区", locs: [
                    {name: "", value: [119.418183, 32.42738]},
                    {name: "", value: [119.358967, 32.397142]}
                ]
            },
            {
                name: "仪征市", locs: [
                    {name: "", value: [119.249536, 32.26075]},
                    {name: "", value: [119.1541, 32.320819]}
                ]
            }
        ];
        var icon = [ // 给每个区域设置的值，目的是给每个名字 前面添加图标
            {
                name: "宝应县",
                value:[119.336984, 33.2194]
            },
            {
                name: "高邮市",  
                value:[119.413202, 32.848564]
            },
            {
                name: "江都区",
                value:[119.593481, 32.546564]
            },
            {
                name: "市区", 
                value:[119.350777, 32.443899]
            },
            {
                name: "仪征市",
                value:[119.1, 32.416333]
            }
        ];

        function getsimboldata(mapName, XXX_ARR) {
            //console.log(mapName);
            let NullArr = [];

            for (const arr of XXX_ARR) {
                NullArr = NullArr.concat(arr.locs);
            }
            console.log(NullArr);
            return NullArr;
        }

        this.chartOption = {
            // backgroundColor: "rgba(0, 27, 36, 0.3)",
            tooltip: {
                show: false,
                trigger: "item",
                alwaysShowContent: false,
                backgroundColor: "#0C121C",
                borderColor: "rgba(0, 0, 0, 0.16);",
                hideDelay: 100,
                triggerOn: "mousemove",
                enterable: true,
                textStyle: {
                    color: "#DADADA",
                    fontSize: "12",
                    width: 20,
                    height: 30,
                    overflow: "break",
                },
                showDelay: 100,
                formatter: function (params) {
                    if (typeof params.value[2] === "undefined") {
                        return params.name + " : " + params.value.toFixed(1);
                    } else if (params.value[2] === 0) {
                        return params.name;
                    } else {
                        return params.name + " : " + params.value[2].toFixed(1);
                    }
                },
            },
            
            geo: {
                zoom: 1.2, //当前视角的缩放比例
                map: "yangzhou",
                label: {
                    // 通常状态下的样式
                    normal: {
                        show: true,
                        textStyle: {
                            color: "#fff",
                            fontSize:"14",
                           
                        },
                    },
                    // 鼠标放上去的样式
                    emphasis: {
                        textStyle: {
                            color: "#fff",
                        },
                    },
                },
                // 地图区域的样式设置
                itemStyle: {
                    normal: {
                        borderColor: "#4FE2CF",
                        borderWidth: 0.5,
                        areaColor: {
                            type: "radial",
                            x: 0.5,
                            y: 0.5,
                            r: 0.8,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                                },
                                {
                                    offset: 0.9,
                                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                                },
                            ],
                            globalCoord: false, // 缺省为 false
                        },
                        shadowColor: "rgba(128, 217, 248, 1)",
                        shadowOffsetX: -6,
                        shadowOffsetY: 2,
                        shadowBlur: 8,
                    },
                    // 鼠标放上去高亮的样式
                    emphasis: {
                        areaColor: "#389BB7",
                        borderWidth: 1,
                    },
                },
            },
            series: [
                {
                    type: "map",
                    map: "yangzhou",
                    // left: 'center',
                    // top: 'middle',
                    geoIndex: 0,
                    aspectScale: 0.75, //长宽比
                    showLegendSymbol: false, // 存在legend时显示
                    label: {
                        normal: {
                            show: false,
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                color: "#fff",
                            },
                        },
                      
                       
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: "#031525",
                            borderColor: "#3B5077",
                        },
                        emphasis: {
                            areaColor: "#2B91B7",
                        },
                    },
                    animation: false,
                    data: mydata,
                },
                {
                    name: "RTM",
                    type: "scatter",
                    coordinateSystem: "geo",
                    data: getsimboldata("yangzhou", RTM_ARR), // 地图的数据点

                    symbolSize: function () {
                        return 3;
                    },
                    label: { // 圆点的标签
                        normal: {
                            show: false,
                            formatter: function (params) {
                                return params.name;
                            },
                            position: "right",
                            color: "#69A4D9",
                            fontSize: "1",
                        },
                        emphasis: {
                            show: false,
                        },
                    },
                    itemStyle: { // 地图上的数据的
                        normal: {
                            color: "#4FE2CF",
                            borderWidth: 2,
                            borderColor: "#4FE2CF",
                        },
                    },
                },
                // 用于地图中给每个名字设置前面的图标
                {
                    type: "scatter",
                    coordinateSystem: "geo",
                    data: icon,
                    symbol: img,
                    symbolSize:[16, 20],
                    symbolKeepAspect:"true"
                    // itemStyle: {
                    //     normal: {
                    //         color: "#4bbbb2",
                    //         borderColor: "#b4dccd",
                    //         width:12,
                    //         height:16
                    //     }
                    // }
                },
            ]
        };
    }
}