Vue 使用 Apache Echarts 绘制3d地图、水波动画，插入自定义图标

大家好啊，今天给大家带来的是Echarts 绘制3d地图的使用方法，会详细的说明地图的绘制，地图上的水波纹显示，自定义图标的显示，以及地图的引入，及地图的一些设置选项，下边是地图资源的绘制地址。

向明天乄

2652人浏览 · 2023-12-13 15:59:22

向明天乄 · 2023-12-13 15:59:22 发布

前言：

DataV.GeoAtlas地理小工具

有需要配置Echarts 平面地图配置的点这里

有需要解决Echarts地图省级下钻市级散点图偏移塌陷问题的点这里

一、配置Vue项目

在这里插入图片描述
这个就不多说了。

二、安装Apache ECharts

2.1 安装Apache ECharts

npm install echarts --save

或者

yarn add echarts

2.2 引入Apache ECharts
在main.js中引入echarts

// 引入echarts
import *as echarts from 'echarts'
Vue.prototype.$echarts = echarts

也可以在使用的页面引入都可以

三、创建目录

map: 用于存放地图资源的GeoJSON数据文件
在这里插入图片描述

四、获取地图的GeoJSON

GeoJSON获取地址
在这里插入图片描述
左侧是地图，右侧是JSON数据路径，点击你想要生成的地图省市、地级（郑州市为例）；

点进去是一级，再点进去是二级，直到你想要的省市地区（点击旁边的空白可以返回上一级）；

然后其右侧有JSON数据的链接地址，可以选择下载下来（放在map文件夹中），也可以使用在线地址！（json API与geoJSON数据地址均可用），我们用的是下载下来使用，

五、配置地图信息

5.1、引入 Echarts、郑州地图数据

import * as echarts from "echarts";
import ZhengZhouMap from "@/assets/map/ZhengZhouMap.json";

5.2、准备容器（使用div、canvas均可）

 <div style="width: 700px; height: 500px" ref="chartsDOM"></div>

解释一下： 1. 需要先指定宽高；2. ref标记是为了应和vue获取dom的方式。

5.3、绘制地图
废话不多说直接上代码

<template>
  <div>
    <div style="width: 1000px; height: 540px" ref="chartsDOM" class="map"></div>
  </div>
</template>
  <script>
import * as echarts from "echarts";
import wxb from "../../assets/img/wxb.png";
import ZhengZhouMap from "@/assets/Json/ZhengZhouMap.json";
export default {
  name: "ZhengZhouMapView",
  data() {
    return {};
  },
  mounted() {
    this.initCharts();
    // // 初始化统计图对象
  },
  methods: {
    initCharts() {
      var myChart = echarts.init(this.$refs["chartsDOM"]);
      var option = {
        series: [
          {
            name: "郑州地图",
            type: "map",
            top: "10%",
            zlevel: 5,//地图显示的层级，和z-index 用法一样
            map: "ZhengZhouMap", // 这个是上面注册时的名字哦，ZhengZhouMap（'这个名字保持一致'）
            label: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
            itemStyle: {
              normal: {
                areaColor: "#1f75b8", //更改地图各个区域的颜色背景
                borderColor: "#93eaf8", //更改地图各个区域之间边框的颜色
                borderWidth: 0.5, //边框宽度
                opacity: 1, //透明度
              },
              // 高亮时的设置
              emphasis: {
                //鼠标悬停的样式
                // color: "#000000",
                areaColor: "#77e8e4", //更改鼠标悬浮地图上的颜色
                // borderWidth: 0.5,
              },
            },
             // 地图选中区域样式(点击选中区域时)
            select: {
              label: {
                // 选中区域的label(文字)样式
                color: "#000000",
              },
              itemStyle: {
                // 选中区域的默认样式
                areaColor: "#77e8e4",
              },
            },
          },
          // 地图上显示的波纹动画
          {
            type: "effectScatter",
            coordinateSystem: "geo", //使用地理坐标系
            //要有对应的经纬度才显示，先经度再维度
            // data: [{ name: "中原区", value: [113.546928, 34.780838] }],
            data: [{ value: [113.546928, 34.780838] }],
            showEffectOn: "render", //绘制完成后显示特效
            rippleEffect: {
              scale: 4, // 波纹的最大缩放比例
              brushType: "stroke",
            },
            hoverAnimation: true,
            label: {
              //图形上的文本标签
              show: true,
              formatter: "{b}",
              position: "right",
              fontWeight: 500,
              fontSize: 10,
            },
            //默认样式
            itemStyle: {
              color: "#32cd32",
              shadowBlur: 10,
              shadowColor: "#333",
            },
            //鼠标移入时样式
            emphasis: {
              itemStyle: {
                color: "#f4e925", // 高亮颜色
              },
            },
            zlevel: 6,
          },
          //自定义图标在地图上显示
          {
            type: "effectScatter",
            coordinateSystem: "geo", // 使用地理坐标系
            // 要有对应的经纬度才显示，先经度再维度
            // data: [{ name: "管城区", value: [113.686037, 34.775838] }],
            data: [{ value: [113.686037, 34.775838] }],
            showEffectOn: "render", // 绘制完成后显示特效
            hoverAnimation: true,
            label: {
              // 图形上的文本标签
              show: true,
              formatter: "{b}",
              position: "right",
              fontWeight: 500,
              fontSize: 10,
              width: 50,
              height: 50,
              backgroundColor: {
                image: wxb,
              },
            },
            // 默认样式
            itemStyle: {
              color: "transparent",
              shadowBlur: 10,
              shadowColor: "#333",
            },
            zlevel: 6,
          },
        ],
        geo: [
          {
            map: "ZhengZhouMap",
            top: "11%",
            // bottom:"30%",
            zlevel: 4,
            itemStyle: {
              color: "#3C5FA1", // 背景
              borderWidth: "1", // 边框宽度
              borderColor: "#3C5FA1", // 边框颜色
            },
          },
          {
            map: "ZhengZhouMap",
            top: "12%",
            zlevel: 3,
            itemStyle: {
              color: "#163F6C", // 背景
              borderWidth: "1", // 边框宽度
              borderColor: "#163F6C", // 边框颜色
            },
          },
          {
            map: "ZhengZhouMap",
            top: "13%",
            zlevel: 2,
            itemStyle: {
              color: "#31A0E6", // 背景
              borderWidth: "1", // 边框宽度
              borderColor: "#31A0E6", // 边框颜色
              shadowColor: "#fff", // 外部阴影
              shadowBlur: "10",
            },
          },
        ],
      };
      echarts.registerMap("ZhengZhouMap", ZhengZhouMap);
      myChart.setOption(option);
       //点击事件,获取点击城市详细信息
      myChart.on("click", function (params) {
        console.log(params);
      });
    },
  },
};
</script>