echarts中国地图开发第二章 打点与连线

上期回顾：上期渲染出了中国地图，并且为地图增加了贴图与双层效果。
本章讲描述如何打点与连线，最底下有完整的代码。
打点需要经纬度 例如北京 { name: "北京", value: [116.40717, 39.90469] }
代码中的经纬度将会通过 china.json 文件中的 cp 字段获取，正常的开发中经纬度会由后端接口返回。

第一步在 data 中声明 unitManagementData:[] 用于存储打点信息；
第二步在 series 数组中添加 type: "effectScatter"

{
            name: "单位",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: this.unitManagementData,
            symbolSize: function(val) {
              return 10;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            label: {
              show: false,
              color: "#000",
              formatter(value) {
                return ''
              },
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: "#4DEFFF",
                shadowBlur: 10,
                shadowColor: "#4DEFFF",
              },
            },
            zlevel: 1,
},

第三步为 unitManagementData 赋值

fnGetUnitManagemeData(){
      import("./mapJson/china.json").then((econom) =>{
        econom.features.forEach((element1) =>{
        	if (element1.properties.centroid) {
          		this.unitManagementData.push({
            		Name: element1.properties.name,
            		value: element1.properties.centroid,
          		});
         	}
        })
        this.chart.setOption(this.options);
      })
},

别忘了在mounted 中调用函数

 mounted() {
    this.initMap();
    this.fnGetUnitManagemeData();
  },

此时地图上就有点了

第四步连线，连线需要连线数据格式为[[开始经纬度],[结束经纬度]] 与 series 中添加 type: "lines" 类型对象
data中声明 mapLineDataArr: [], //连线数据
series中添加 lines，status为1时连线为蓝色 0为红色

 {
            name: "lines",
            type: "lines",
            coordinateSystem: "geo",
            zlevel: 2,
            large: true,
            effect: {
              show: true, // 开启动态线条效果
              constantSpeed: 30, // 线条速度
              symbol: "pin", // 标记的图形，支持图片和文字
              symbolSize: 10, // 标记的大小
              trailLength: 0, // 动态线条的长度
              loop: true, // 是否循环动画效果
            },
            lineStyle: {
              normal: {
                color: function(params) {
                  // 根据 status 属性判断连线颜色
                  return params.data.status === 0 ? "#CE373F" : "#4DEFFF";
                },
                width: 2,
                opacity: 0.4,
                curveness: 0.2, // 曲线程度
              },
              emphasis: {
                opacity: 0.8,
                width: 5,
              },
            },
            data: this.mapLineDataArr,
},

数据目前也通过 china.json 获取，结束位置为北京

fnGetUnitManagemeData() {
  import("./mapJson/china.json").then((econom) => {
    econom.features.forEach((element1) => {
      if (element1.properties.centroid) {
        this.unitManagementData.push({
          Name: element1.properties.name,
          value: element1.properties.centroid,
        });
        this.mapLineDataArr.push({
          name: `line`,
          fromName: `childPoint`,
          toName: `mainpoint`,
          coords: [element1.properties.centroid, [116.40717, 39.90469]],
          status: 1,
        });
      }
    });
    console.log("_ this.mapLineDataArr_", this.mapLineDataArr);
    this.chart.setOption(this.options);
  });
},

此时连线就完成了

完整代码如下

<template>
  <div>
    <div id="china" style="width: 1300px;height: 650px;"></div>
  </div>
</template>

<script>
import china from "./mapJson/china.json";
import * as echarts from "echarts";
export default {
  data() {
    return {
      chart: null,
      options: null,
      unitManagementData: [],
      mapLineDataArr: [], //连线数据
    };
  },
  methods: {
    initMap() {
      echarts.registerMap("china", china);
      // 加载纹理图片
      let mapTexture = document.createElement("img");
      mapTexture.src = require("./image/chinese_map_texture.png");
      this.options = {
        tooltip: {
          show: false,
        },
        //叠加阴影层
        geo: {
          map: "china",
          aspectScale: 0.8,
          layoutCenter: ["40%", "49.5%"],
          layoutSize: "100%",
          label: {
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            shadowColor: "#1253A0",
            shadowOffsetX: 0,
            shadowOffsetY: 15,
          },
          emphasis: {
            areaColor: "#101B3B",
          },
          regions: [
            {
              name: "南海诸岛",
              itemStyle: {
                areaColor: "#101B3B",
                borderColor: "#101B3B",
                opacity: 0,
                label: {
                  show: false,
                  color: "#009cc9",
                },
              },
              label: {
                show: false,
                color: "#FFFFFF",
                fontSize: 12,
              },
            },
          ],
        },
        series: [
          {
            type: "map",
            selectedMode: "single",
            map: "china",
            aspectScale: 0.8,
            layoutCenter: ["40%", "50%"], //地图位置
            layoutSize: "100%",
            zoom: 1, //当前视角的缩放比例
            label: {
              show: true,
              color: "#87B8DD",
              fontSize: 12,
            },

            itemStyle: {
              // 渲染背景图片
              areaColor: {
                image: mapTexture,
                repeat: "repeat",
              },
              borderColor: "#ADD0ED",
              borderWidth: 1.2,
              shadowColor: "rgba(255, 255, 255, 0.4)", // 设置阴影颜色，带有透明度
              shadowBlur: 15, // 设置阴影的模糊大小
              shadowOffsetX: 2, // 设置阴影在 X 轴方向上的偏移
              shadowOffsetY: 2, // 设置阴影在 Y 轴方向上的偏移
            },
            emphasis: {
              //区域
              areaColor: "#ffeb3b", // 高亮时的颜色
              itemStyle: {
                areaColor: "#1785BF",
              },
              label: {
                show: true,
                color: "#fff",
              },
            },
          },
          {
            name: "单位",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: this.unitManagementData,
            symbolSize: function(val) {
              return 10;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            label: {
              show: false,
              color: "#000",
              formatter(value) {
                return "";
              },
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: "#4DEFFF",
                shadowBlur: 10,
                shadowColor: "#4DEFFF",
              },
            },
            zlevel: 1,
          },
          {
            name: "lines",
            type: "lines",
            coordinateSystem: "geo",
            zlevel: 2,
            large: true,
            effect: {
              show: true, // 开启动态线条效果
              constantSpeed: 30, // 线条速度
              symbol: "pin", // 标记的图形，支持图片和文字
              symbolSize: 10, // 标记的大小
              trailLength: 0, // 动态线条的长度
              loop: true, // 是否循环动画效果
            },
            lineStyle: {
              normal: {
                color: function(params) {
                  // 根据 status 属性判断连线颜色
                  return params.data.status === 0 ? "#CE373F" : "#4DEFFF";
                },
                width: 2,
                opacity: 0.4,
                curveness: 0.2, // 曲线程度
              },
              emphasis: {
                opacity: 0.8,
                width: 5,
              },
            },
            data: this.mapLineDataArr,
          },
        ],
      };

      const el = document.getElementById("china");
      this.chart = this.$echarts.init(el);
      this.chart.setOption(this.options);
    },
    fnGetUnitManagemeData() {
      import("./mapJson/china.json").then((econom) => {
        econom.features.forEach((element1) => {
          if (element1.properties.centroid) {
            this.unitManagementData.push({
              Name: element1.properties.name,
              value: element1.properties.centroid,
            });
            this.mapLineDataArr.push({
              name: `line`,
              fromName: `childPoint`,
              toName: `mainpoint`,
              coords: [element1.properties.centroid, [116.40717, 39.90469]],
              status: 1,
            });
          }
        });
        console.log("_ this.mapLineDataArr_", this.mapLineDataArr);
        this.chart.setOption(this.options);
      });
    },
  },
  mounted() {
    this.initMap();
    this.fnGetUnitManagemeData();
  },
};
</script>