使用Echarts在地图上实现Marker标注

前言：文章仅用于记录，便于自己往后再次学习和使用！！！

推荐一个基于Echarts实现的各种图表集：echarts图表集

实现效果如下：

1、获取街道和乡镇的数据

通过 阿里旗下的高德地图提供的api ，可以获取到中国各个省份/区级/县级的json数据，但是区级和县级，并没有包含街道和乡镇的数据。这里获取乡镇的数据是参考的他人的博客：导出乡镇、街道的地图geoJson数据_乡镇json_117jf的博客-CSDN博客

 2、代码实现

<!-- 中间地图区域部分 -->
<template>
  <div
    class="zhongshanChart"
    ref="charts1"
    style="width: 700px; height: 700px"
  ></div>
</template>
<script>
import geoJson from "../../assets/areajson/zhongshan.json";
import { defineComponent, ref, onMounted } from "vue";
import * as echarts from "echarts";
export default defineComponent({
  name: "zhongshangeo",
  setup(props,cxt) {
    let charts1 = ref(null);
    let myEchart;
    onMounted(() => {
      myEchart = echarts.init(charts1.value);
      initCharts();
    });
 
    function initCharts() {
      let data = [];
      let series = [];
      series.push(
        //设置poi点
        {
          type: "scatter",
          coordinateSystem: "geo",
          zlevel: 2,
          rippleEffect: {
            period: 4,
            brushType: "stroke",
            scale: 4,
          },
          label: {
            show: true,
            color: "#fff",
          },
          symbol: "pin", //定位图标样式
          symbolSize: 40,
          //点的名称和经纬度
          data: [
            {
              value: [113.30545585806637, 22.714065986803993],
              //单独修改圆环上的文字
              label: {
                formatter: "2", //圆环显示文字
              },
              itemStyle: {
                color: "#fe2321",
              },
            },
            {
              name: "东升镇",
              value: [113.30545585806637, 22.613065986803993],
              label: {
                formatter: "2", //圆环显示文字
              },
              itemStyle: {
                color: "#fe2321",
              },
            },
            {
              name: "南区",
              value: [113.34030985842813, 22.41766955088383],
              label: {
                formatter: "4", //圆环显示文字
              },
              itemStyle: {
                color: "#fe2321",
              },
            },
            {
              name: "南区",
              value: [113.35103885834923, 22.452021485741258],
              label: {
                formatter: "5", //圆环显示文字
              },
              itemStyle: {
                color: "#fe2321",
              },
            },
            {
              name: "五桂山",
              value: [113.44738185833575, 22.392456252206048],
              label: {
                formatter: "6", //圆环显示文字
              },
              itemStyle: {
                color: "#fea200",
              },
            },
            {
              name: "五桂山",
              value: [113.42448185833575, 22.422456252206048],
              label: {
                formatter: "6", //圆环显示文字
              },
              itemStyle: {
                color: "#fea200",
              },
            },
          ],
        },
        {
          type: "map",
          geoIndex: 0,
          //设置data是为了给地图不同区域设置颜色
          data: [
            { name: "古镇镇", value: 1001 },
            { name: "小榄镇", value: 10001 },
            { name: "黄圃镇", value: 10001 },
            { name: "东凤镇", value: 101 },
            { name: "南头镇", value: 101 },
            { name: "横栏镇", value: 101 },
            { name: "东升镇", value: 101 },
            { name: "阜沙镇", value: 1001 },
            { name: "三角镇", value: 10001 },
            { name: "民众镇", value: 10001 },
            { name: "港口镇", value: 101 },
            {
              name: "西区",
              value: 1001,
            },
            { name: "沙溪镇", value: 1001 },
            { name: "大涌镇", value: 101 },
            { name: "南区", value: 1001 },
            { name: "东区", value: 101 },
            { name: "火炬开发区", value: 10001 },
            { name: "板芙镇", value: 10001 },
            { name: "五桂山", value: 1001 },
            { name: "南朗镇", value: 10001 },
            { name: "三乡镇", value: 101 },
            { name: "神湾镇", value: 1001 },
            { name: "坦洲镇", value: 1001 },
            { name: "石岐区", value: 1001 },
          ],
        }
      );
      echarts.registerMap("zhouShan", geoJson);
      var option = {
        textStyle: {
          color: "white",
        },
        visualMap: {
          min: 0,
          max: 100000,
          left: 26,
          bottom: 40,
          showLabel: !0,
          text: ["高", "低"],
          // 对应 type=map, geoIndex=0 系列中value的值，通过值匹配颜色
          pieces: [
            {
              gt: 10000,
              label: "> 10000",
              color: "#7faff6",
            },
            {
              gte: 1000,
              lte: 10000,
              label: "1000 - 10000",
              color: "#b3e6ee",
            },
            {
              gte: 100,
              lt: 1000,
              label: "100 - 1000",
              color: "#517ff4",
            },
            {
              gt: 10,
              lt: 100,
              label: "10 - 100",
              color: "#7faff6",
            },
          ],
          show: false,
        },
        geo: {
          aspectScale: 1.3,
          map: "zhouShan", //需要和echarts.registerMap（'变量名'）变量名一致
          geoIndex: 1,
          //图形上的文本标签
          label: {
            normal: {
              show: true,
              color: "#fff",
            },
            emphasis: {
              show: true,
              color: "#000",
            },
          },
          top: 10,
          roam: true, //是否允许缩放
          layoutCenter: ["50%", "45%"], //地图位置
          layoutSize: "105%",
          //地图区域的多边形 图形样式
          itemStyle: {
            // normal: {
              borderColor: "#8292fd", //省市边界线
              borderWidth: 1, //边界宽度
            // },
          },
        },
        series: series,
      };
      myEchart.setOption(option);
      myEchart.on('click','series.scatter',(params)=>{
        //    点击poi点显示侧边栏组件 ---- 触发自定义事件
            cxt.emit('showRight',true)
      })
    }
    return {
      charts1,
    };
  },
});
</script>复制