vue2+echarts地图下钻+地图遮盖物散点

i like stt

已于 2024-05-29 08:02:38 修改

阅读量828

点赞数 12

文章标签： echarts 前端 javascript echarts-gl vue.js

于 2024-05-28 09:17:06 首次发布

本文链接：https://blog.csdn.net/weixin_66412671/article/details/139253274

版权

一、下载工具

npm i echarts echarts-gl axios -S

-S是生产依赖默认是-S不写也可以 -D是开发依赖

二、引入工具

import * as echarts from "echarts";
import "echarts-gl";
import axios from "axios";

三、HTML部分代码

<div class="iconText" v-show="address != '100000'">
      <svg
        style="cursor: pointer"
        @click="backMap"
        t="1681180771137"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3427"
        width="40"
        height="40"
      >
        <path
          d="M426.666667 384V213.333333l-298.666667 298.666667 298.666667 298.666667v-174.933334c213.333333 0 362.666667 68.266667 469.333333 217.6-42.666667-213.333333-170.666667-426.666667-469.333333-469.333333z"
          p-id="3428"
          fill="#ffffff"
        ></path>
      </svg>
      <span style="font-size: 25px; font-weight: 200; color: #fff; text-shadow: 1px 2px 5px rgba(255, 255,255,.8);font-family: my-self-font;"
        >返回上级地图</span
      >
    </div>
<div class="map-chart" id="mapEchart"></div>

四、data函数中定义的数据

 data() {
    return {
      // 地图下钻历史记录
      historyMapData: [{ name: "中国", adcode: "100000" }],
      address: "100000",
      addressName: "中国",
      district: "",
      showtab: false,
      scatterList: [],
    };
  },

五、在methods方法中初始化一下dom

chartMap() {
      // 初始化dom
      const myChart = echarts.init(document.getElementById("mapEchart"));
      // 初始化map
      this.initMap(myChart, "中国", "100000");
      // 添加点击事件
      myChart.on("click", (e) => {
        // 添加历史记录
        this.historyMapData.push(e.value);
        // 初始化地图
        this.initMap(myChart, this.addressName, e.value.adcode, e.value.schoolId);
      });

六、让可视化地图跟随浏览器大小缩放

window.addEventListener("resize", () => {
    myChart.resize();
});

七、下钻的时候清除一下echarts实例

 async initMap(chartDOM, geoName, adcode, id) {
      // 清除echarts实例
      chartDOM.clear();
      // 请求map的json
      const mapData = await this.getMapJSON(adcode, geoName, id);
      // 图表配置项
      const option = this.getOption(geoName, mapData);
      // 渲染配置
      if (this.district == "district") {
        option.series[1].data.push(
          { name: "杨家埠小学", value: [119.2, 36.85],schoolId:1 },
          { name: "杨家埠小学", value: [119.21, 37.01],schoolId:2 },
          { name: "杨家埠小学", value: [119.1, 36.9],schoolId:3 },
          { name: "杨家埠小学", value: [118.9, 37.15],schoolId:4 }
        );
      } else {
        option.series[1].data = [];
      }
      chartDOM.setOption(option);
    },

八、获取阿里云地图数据

async getMapJSON(address, geoName, id) {
      let res = null;
      if (address == undefined) {
        return null;
      }
       //判断地图下钻到district级的时候获取district数据
      if (this.district === "district") {
        res = await axios.get(
          `https://geo.datav.aliyun.com/areas_v2/bound/${address}.json`
        );
      } else if (this.district !== "district") {
        res = await axios.get(
          `https://geo.datav.aliyun.com/areas_v2/bound/${address}_full.json`
        );
      }
      // 重新注册地图
      echarts.registerMap(geoName, res.data);
      // 过滤json数据
      // 去掉台湾合海南岛边线
      if (
        res.data.features[20] &&
        res.data.features[20].properties.adcode == "460000"
      ) {
        res.data.features[20].geometry.coordinates.splice(1);
      }
      if (
        res.data.features[34] &&
        res.data.features[34].properties.adcode == "100000"
      ) {
        res.data.features[34].geometry.coordinates.splice(0);
      }
      const mapData = res.data.features.map((item) => {
        return {
          value: item.properties,
          name: item.properties.name,
        };
      });
      return mapData;
    },

九、地图配置散点配置

getOption(geoName, mapData) {
      const option = {
        geo3D: {
          zlevel: -100,
          show: false, //是否显示全部区域名称
          type: "map3D",
          roam: false,
          center: { x: 0, y: 0 },
          map: geoName, // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
          regionHeight: 2,
          shading: "realistic",
          regions: [
            {
              name: mapData[0].name,
              itemStyle: {
                color: "#ff9900",
              },
            },
          ],
          shading: "lambert",
          //默认高亮区域
          emphasis: {
            label: { show: false },
            itemStyle: {
              color: "transparent",
            },
          },
        },
        series: [
          {
            zlevel: -10,
            regionHeight: 1,
            type: "map3D",
            viewControl: {
              panSensitivity: 0,
              rotateSensitivity: 0,
              // zoomSensitivity: 0,
              minAlpha: 90,
            },
            map: geoName, // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同
            data: mapData, //这里比较重要 获得过滤后的data，这样点击事件时就能获得这个data的值
            label: {
              show: false, // 是否显示标签。
              textStyle: {
                color: "#fff", // 地图初始化区域字体颜色
                fontSize: 14,
                fontWeight: 600,
              },
              formatter: (e) => {
                return ` ${e.name} `;
              },
            },
            shading: "realistic",
            realisticMaterial: {
              detailTexture: "./public/image.png",
            },
            itemStyle: {
              borderColor: "rgba(50, 123, 200, 0.5)", //区域边界线颜色
              borderWidth: 2, // 区域边界宽度
              color: "skyblue",
              opacity: 0.9,
            },
            emphasis: {
              label: {
                show: true, //鼠标划过或停留是否现在区域名称
                textStyle: {
                  borderColor: "#f00",
                  color: "#fff", //鼠标划过或停留的字体颜色
                },
              },
              itemStyle: {
                color: "#fff", //鼠标划过或停留的区域颜色
              },
            },
          },
          {
            zlevel: 1,
            type: "scatter3D", // 三维散点图
            coordinateSystem: "geo3D",
            data: [],
            roam: true,
            symbol: 'path://M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z',
           // symbol: shcoolAddress,
            symbolSize: 20, // 散点大小
            label: {
              // 散点标签设置
              formatter: "{b}", // 显示数据点的名称
              position: "top",
              show: true,
              textStyle: {
                color: "#fff",
                padding: [5, 2],
                backgroundColor: {
                  image: addressImg,
                },
              },
            },
            itemStyle: {
              // 散点样式设置
              color: "gold",
            },
            emphasis: {
              // 高亮状态样式设置
              label: {
                show: true,
              },
              itemStyle: {
                color: "skyblue",
              },
            },
          },
        ],
      };
      return option;
    },

十、返回上级地图

backMap() {
      const myChart = echarts.init(document.getElementById("mapEchart"));
      // 去除当前的地图信息
      this.historyMapData.pop();
      const len = this.historyMapData.length;
      // 获取上一级的地图信息
      const newdata = this.historyMapData[len - 1];
      // 重新渲染地图
      this.initMap(
        myChart,
        newdata?.name || "map",
        newdata?.adcode || "100000"
      );
    },

十一、在mounted中调用chartMap