vue2-echarts5.x-3D地图

确认、安装echarts的版本

这个例子是基于echarts5.x版本的。

npm install echarts@5 --save

全局挂载echart到vue

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts //挂载到Vue实例上面

在组件中使用echarts

<template>
  <div class="container">
    <div ref="mapChartRef" class="chart-div"></div>
  </div>
</template>

<script>
import { getOptions } from "./option.js"; // 把option提出去，代码更清爽
import cqGeoJson from "./geoJson/cq.js"; // 重庆的地图信息
export default {
  name: "MapChart",
  data() {
    return {
      myChart: null,
      geoJson: cqGeoJson,
    };
  },
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.mapChartRef);
    this.drawMap();
  },
  methods: {
    drawMap() {
      // 核心代码 registerMap 把地图信息放到echarts中
      this.$echarts.registerMap("重庆", cqGeoJson);
      const option = getOptions("重庆", cqGeoJson);
      this.myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.container {
  height: 500px;
  /* border: 1px solid red; */
  box-sizing: border-box;
}
.chart-div {
  width: 100%;
  height: 400px;
}
</style>

注意点： 1.registerMap 把地图信息放到echarts中。
2.项目结构

3. 这个只是组件，要显示出来。需要在页面中引用组件。

option.js的代码

const points = [
  [108.901671, 31.042831],
  [108.828081, 28.961252],
  [107.834627, 30.343247],
  [105.810925, 29.670715],
];

/**
 * 获取option
 * @param {String} geoName 地区的名称 比如：重庆
 * @param {Object} geoJson 地图信息 包含了区县的经纬度等信息
 * @returns 
 */
export function getOptions(geoName, geoJson) {
  // console.log("geoJson", geoJson);
  let data = geoJson.features.map((item) => {
    return {
      name: item.properties.name,
    };
  });
  return {
    backgroundColor: "transparent",
    geo: [
      {
        map: geoName,
        aspectScale: 1,

        zoom: 0.65,
        layoutCenter: ["50%", "50%"],
        layoutSize: "180%",
        show: true,
        roam: false,
        itemStyle: {
          normal: {
            borderColor: "#a4ac3b",
            borderWidth: 1,
            shadowColor: "#a4ac3b",
            shadowOffsetY: 10,
            shadowBlur: 120,
            areaColor: "transparent",
          },
        },
      },
      // 重影
      {
        type: "map",
        map: geoName,
        zlevel: -1,
        aspectScale: 1,
        zoom: 0.65,
        layoutCenter: ["50%", "51%"],
        layoutSize: "180%",
        roam: false,
        silent: true,
        itemStyle: {
          normal: {
            borderWidth: 1,
            // borderColor:"rgba(17, 149, 216,0.6)",
            borderColor: "#a4ac3b",
            shadowColor: "#a4ac3b",
            shadowOffsetY: 5,
            shadowBlur: 15,
            areaColor: "rgba(5,21,35,0.1)",
          },
        },
      },
    ],
    series: [
      {
        name: "数据",
        type: "map",
        map: geoName, // 自定义扩展图表类型
        aspectScale: 1,
        zoom: 0.65, // 缩放
        showLegendSymbol: true,
        labelLayout: {
          hideOverlap: true, // 当前区县名字堆叠时，隐藏堆叠的
        },
        label: {
          normal: {
            show: true,
            overlay: "hidden",
            textStyle: { color: "#159db2", fontSize: "60%" },
            formatter: (params) => {
              // console.log("params", params);
              let name = params.name;
              name = name.replace("自治县", ""); // 名字太长了不美观
              name = name.replace("土家族", ""); // 名字太长了不美观
              name = name.replace("苗族", ""); // 名字太长了不美观
              return name;
            },
          },
          emphasis: {
            show: true,
            textStyle: { color: "#159db2", fontSize: "60%" },
          },
        },
        itemStyle: {
          normal: {
            areaColor: {
              type: "linear",
              x: 1200,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(21,94,147,0.75)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(21,94,147,0.75)", // 50% 处的颜色
                },
              ],
              global: true, // 缺省为 false
            },
            borderColor: "#a4ac3b",
            borderWidth: 1,
          },
          emphasis: {
            show: false,
            color: "#fff",
            areaColor: "rgba(0,254,233,0.6)",
          },
        },
        layoutCenter: ["50%", "50%"],
        layoutSize: "180%",
        markPoint: {
          symbol: "none",
        },
        data: data,
      },
      {
        // 动效散点公共配置项 -- 水波纹儿
        silent: true, // 暂不支持鼠标交互
        type: "effectScatter",
        coordinateSystem: "geo",
        rippleEffect: {
          //涟漪特效
          period: 4, //动画时间，值越小速度越快
          // brushType: 'stroke', //波纹绘制方式 stroke, fill
          scale: 5, //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: true,
            position: "right", //显示位置
            offset: [-18, 4], //偏移设置
            formatter: function (params) {
              //圆环显示文字
              return params.data.name;
            },
            fontSize: 18,
            fontWeight: "bold",
            color: "green",
          },
          emphasis: {
            show: true,
          },
        },
        symbol: "circle",
        symbolSize: 10,
        itemStyle: {
          normal: {
            show: false,
            borderWidth: 1,
            color: "rgba(255, 86, 11, 1)",
          },
        },
        data: [
          {
            name: "H3",
            value: [...points[0], 323],
          },
          {
            name: "移",
            value: [...points[1], 323],
          },

          {
            name: "移",
            value: [...points[2], 323],
          },
          {
            name: "移",
            value: [...points[3], 323],
          },
        ],
      },
    ],
  };
}

重庆地图信息cq.js

---

注意点1：关于这个地图信息，这里使用的最简单的一种方式，就是 export default {} 一个对象，然后在另一个文件中import就行了。
优点：放到本地文件，访问速度快。
缺点：7千多行代码。
注意点2：地图信息去哪里找，如果换成其他城市怎么办？
https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=500000_full** // 全部 含区县**
https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=500000** // 只有一个重庆板块**
code对应名称：
name:“中国”,adcode:100000
name:“中华人民共和国”,adcode:100000
name:“黑龙江省”,adcode:230000
name:“天津市”,adcode:120000
name:“重庆市”,adcode:500000

注意点3：除此外，还有发送请求，读取本地json文件的方法获取地图信息；但是 比较繁杂。如果有需要可以请教许老师。

---

// 重庆的地图信息
export default {
  type: "FeatureCollection",
  features:[.......]
  }
  // https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=500000_full 
  // 把这个地址放到浏览器地址栏，
  // 然后把数据拷贝到export default { 赋值的json } ; 在vscode中点一下代码格式化