echarts中国地图开发 第三章 下钻与返回

已于 2024-01-24 14:11:41 修改
阅读量891 收藏 12
点赞数 14
分类专栏： Echars地图开发 文章标签： echarts 前端 javascript
于 2024-01-22 15:43:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/add_ysd/article/details/135746583
版权

上期回顾：上期文章讲解了如何在地图上打点与连线，本章将讲述如何实现双击下钻与tip标签返回上级。
本期将使用到的素材有 chinaProvince.js 省级JSON 和 市级JSON 文件，JSON素材可以私聊我或者评论区百度云下载。
链接：https://pan.baidu.com/s/1EB3bv2JgvSlDDz2h5caDXw
提取码：9hj8
下钻其实就是JSON文件的替换与刷新，实现过程如下，完整代码在最底下，感谢支持！

第一步还是在data声明如下变量

  currentLevel: 0, //目前下钻层级
  endLevel: 2, //最深下钻层级
  nowDomainName: "china", //当前地图区域名
  history: [], //下钻历史记录

第二步为地图绑定双击事件

initMap(){
	  ······
      上述代码请见上章或者最底部
	  ······
	  const el = document.getElementById("china");
      this.chart = this.$echarts.init(el);
      // 注册双击事件
      this.chart.on("dblclick", (params) => {
        if (params.componentSubType == "map") {
          // 下钻事件进行下钻
          this.fnGoDown(params.name);
        }
      });
      this.chart.setOption(this.options);
}

    fnGoDown(name) {
      console.log("_fnGoDown_", name);
      //先判断可不可以下钻
      if (this.currentLevel >= this.endLevel) {
        return false;
      }
      const mapname = name == ("中国" || "china") ? "china" : name;
      this.nowDomainName = mapname;
      if (mapname == "china") {
        this.$echarts.registerMap(mapname, china);
        this.options.geo.map = mapname;
        this.options.series[0].map = mapname;
        this.chart.setOption(this.options);
      } else {
        // 下钻省
        if (this.currentLevel == 0) {
          // 寻找省id
          import("./mapJson/chinaProvince.json").then((provinceData) => {
            provinceData.features.forEach((element) => {
              if (element.properties.fullname === name) {
                // 获取省id
                const provinceId = element.properties.id;
                import(
                  "./mapJson/geometryProvince/" + provinceId + ".json"
                ).then((res) => {
                  // 清除打点与连线数据
                  this.options.series[1].data = [];
                  this.options.series[2].data = [];
                  //将options中数据替换掉，并刷新
                  const newMapJson = res.default;
                  this.options.geo.map = mapname;
                  this.options.series[0].map = mapname;
                  this.history.push(name);
                  this.currentLevel = 1;
                  this.nowGoDownData = res;
                  this.$echarts.registerMap(mapname, newMapJson);
                  this.chart.setOption(this.options);
                });
              }
            });
          });
        } else if (this.currentLevel == 1) {
          // 下钻市
          this.nowGoDownData.features.forEach((element) => {
            if (element.properties.name === mapname) {
              console.log("_element_", element, element.properties.id);
              import(
                "./mapJson/geometryCouties/" + element.properties.id + "00.json"
              ).then((res) => {
                // 清除打点与连线数据
                this.options.series[1].data = [];
                this.options.series[2].data = [];
                //将options中数据替换掉，并刷新
                const newMapJson = res.default;
                this.options.geo.map = mapname;
                this.options.series[0].map = mapname;
                this.history.push(name);
                this.currentLevel = 2;
                this.$echarts.registerMap(mapname, newMapJson);
                this.chart.setOption(this.options);
              });
            }
          });
        } else {
          console.log("__已经到最底层了！_");
        }
      }
    },

已经可以下钻到市了！
在这里插入图片描述

此时发现可以下钻但无法返回，所以需要在左上角增加一个下钻记录并点击能返回上级，同时为增加点样式，此处使用的是 less UI组件使用的是 iview

<template>
  <div class="mapContnet">
    <div class="tips">
      <Icon
        type="md-pin"
        color="#1FB9FF"
        size="18"
        style="padding-right: 4px;"
      />
      <div class="defaultTip" @click="fnMapTipReturn('china')">
        中华人民共和国
      </div>
      <div
        v-for="(item, index) in history"
        :key="`drill-${index}`"
        style="margin-left: 6px;"
        :class="index == history.length - 1 ? 'nowTip' : 'defaultTip'"
        @click="fnMapTipReturn(item)"
      >
        >
        {{ item }}
      </div>
    </div>
    <div id="china" style="width: 1300px;height: 650px;"></div>
  </div>
</template>

<style lang="less" scoped>
.mapContnet {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #0f1733;
  overflow-y: auto;
  .tips {
    background: linear-gradient(to bottom right, #003c6f, #006aab);
    border: 1px solid #305a8c;
    border-radius: 4px;
    position: absolute;
    padding: 6px 10px;
    color: #7bb4e1;
    display: flex;
    align-items: center;
    left: 46px;
    font-size: 14px;
    z-index: 10;

    .nowTip {
      color: #c5ddec;
    }

    .defaultTip {
      cursor: pointer;
    }
  }
}
</style>

点击事件

fnMapTipReturn(name) {
  if (this.nowDomainName != name) {
    // 返回第二层
    this.currentLevel = 0;
    this.history = [];
    this.fnGoDown(name);
    if (name === "china") {
          // 返回获取大点数据，此处可以优化，把大点数据保存到状态机或者本地都可以
          this.fnGetUnitManagemeData();
        }
  }
},

此时就可以返回上层了！

完整代码如下

<template>
  <div class="mapContnet">
    <div class="tips">
      <Icon
        type="md-pin"
        color="#1FB9FF"
        size="18"
        style="padding-right: 4px;"
      />
      <div class="defaultTip" @click="fnMapTipReturn('china')">
        中华人民共和国
      </div>
      <div
        v-for="(item, index) in history"
        :key="`drill-${index}`"
        style="margin-left: 6px;"
        :class="index == history.length - 1 ? 'nowTip' : 'defaultTip'"
        @click="fnMapTipReturn(item)"
      >
        >
        {{ item }}
      </div>
    </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: [], //连线数据
      currentLevel: 0, //目前下钻层级
      endLevel: 2, //最深下钻层级
      nowDomainName: "china", //当前地图区域名
      history: [], //下钻历史记录
      nowGoDownData: {}, //当前下钻信息
    };
  },
  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.on("dblclick", (params) => {
        if (params.componentSubType == "map") {
          // 下钻事件进行下钻
          this.fnGoDown(params.name);
        }
      });
      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,
            });
          }
        });
        this.chart.setOption(this.options);
      });
    },
    fnGoDown(name) {
      console.log("_fnGoDown_", name);
      //先判断可不可以下钻
      if (this.currentLevel >= this.endLevel) {
        return false;
      }
      const mapname = name == ("中国" || "china") ? "china" : name;
      this.nowDomainName = mapname;
      if (mapname == "china") {
        this.$echarts.registerMap(mapname, china);
        this.options.geo.map = mapname;
        this.options.series[0].map = mapname;
        this.chart.setOption(this.options);
      } else {
        // 下钻省
        if (this.currentLevel == 0) {
          // 寻找省id
          import("./mapJson/chinaProvince.json").then((provinceData) => {
            provinceData.features.forEach((element) => {
              if (element.properties.fullname === name) {
                // 获取省id
                const provinceId = element.properties.id;
                import(
                  "./mapJson/geometryProvince/" + provinceId + ".json"
                ).then((res) => {
                  // 清除打点与连线数据
                  this.options.series[1].data = [];
                  this.options.series[2].data = [];
                  //将options中数据替换掉，并刷新
                  const newMapJson = res.default;
                  this.options.geo.map = mapname;
                  this.options.series[0].map = mapname;
                  this.history.push(name);
                  this.currentLevel = 1;
                  this.nowGoDownData = res;
                  this.$echarts.registerMap(mapname, newMapJson);
                  this.chart.setOption(this.options);
                });
              }
            });
          });
        } else if (this.currentLevel == 1) {
          // 下钻市
          this.nowGoDownData.features.forEach((element) => {
            if (element.properties.name === mapname) {
              console.log("_element_", element, element.properties.id);
              import(
                "./mapJson/geometryCouties/" + element.properties.id + "00.json"
              ).then((res) => {
                // 清除打点与连线数据
                this.options.series[1].data = [];
                this.options.series[2].data = [];
                //将options中数据替换掉，并刷新
                const newMapJson = res.default;
                this.options.geo.map = mapname;
                this.options.series[0].map = mapname;
                this.history.push(name);
                this.currentLevel = 2;
                this.$echarts.registerMap(mapname, newMapJson);
                this.chart.setOption(this.options);
              });
            }
          });
        } else {
          console.log("__已经到最底层了！_");
        }
      }
    },
    fnMapTipReturn(name) {
      if (this.nowDomainName != name) {
        // 返回第二层
        this.currentLevel = 0;
        this.history = [];
        this.fnGoDown(name);
        if (name === "china") {
          // 返回获取大点数据，此处可以优化，把大点数据保存到状态机或者本地都可以
          this.fnGetUnitManagemeData();
        }
      }
    },
  },
  mounted() {
    this.initMap();
    this.fnGetUnitManagemeData();
  },
};
</script>
<style lang="less" scoped>
.mapContnet {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #0f1733;
  overflow-y: auto;
  .tips {
    background: linear-gradient(to bottom right, #003c6f, #006aab);
    border: 1px solid #305a8c;
    border-radius: 4px;
    position: absolute;
    padding: 6px 10px;
    color: #7bb4e1;
    display: flex;
    align-items: center;
    left: 46px;
    font-size: 14px;
    z-index: 10;

    .nowTip {
      color: #c5ddec;
    }

    .defaultTip {
      cursor: pointer;
    }
  }
}
</style>
ryder_yan
关注
  • 14
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
echarts实现河北地图下钻可以下钻到县级
06-04
echarts实现河北地图下钻，可下钻到县级。请使用开发工具打开，直接打来浏览jquery加载json文件会有问题，小白一枚，欢迎大神指导。
echarts全国map可下钻
12-21
echarts全国map可下钻
echarts实现地图下钻
热门推荐
qq_23447231的博客
12-14 1万+
公司的新项目需要写这样的地图，还要能两级下钻到省，下面是我写好了的样子，我今天就是复一下盘： 如何用echarts显示地图 首先需要下载map的Json数据，我放到这里：mapJson 然后使用echarts的geo配置，或者series的type = 'map’就可以加载地图了： import chinaMapJson from "./china.json" echarts.registerMap('china', chinaMapJson) var options = { tooltip:{
echarts中应用中国地图并前往指定的下钻
slom_fxt的博客
09-22 1003
echarts中应用中国地图并前往指定的下钻
echarts中国地图下钻到区
hsany330的专栏
07-09 154
http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5此链接可获取各省代码 可直接到省或市 地图下钻 2.0https://www.makeapie.com/editor.html?c=xO-7sB0Llr 地图下钻 3.0https://www.makeapie.com/editor.html?c=x0-uCepnPl ————————...
echarts实现中国地图下钻进入下一级行政区(地图钻取)
全易
08-07 1608
基于vue echarts 3级行政区下钻+geo数据获取办法。
使用echarts 进行全国地图下钻
06-25
提供echarts 全国地图下钻功能，可以详细到各个省市地区。
VUE echarts中国地图带下钻带返回带数据返回.rar
08-31
VUE echarts中国地图带下钻带返回带数据返回
echarts地图：全球+全国+省级，可下钻层级
07-21
使用echarts来显示世界地图和全国地图，并且可以下钻层级 适用于使用echarts+vue3.0+vite的人员 解决全球下钻到全国到省级的问题 以及不要的地图资源
echarts开发的自动旋转map3D下钻和柱图地图
09-18
1.地图运行，需要通过ajax加载map中的geojson地理数据，必须使用http协议web服务或上传至服务器访问; 2.目录说明 ...├─map ........geojson地理数据 │ ├─chongqing.json ...........下钻核心库，具体见文件注释
echarts全国地图 支持钻取
04-12
该demo基于echarts实现，包含全国地图，支持省市区三级点击钻取
Vue + Echarts 实现中国地图多级钻取功能.zip
08-01
本文为 Vue 2.x + Echarts 5.x 实现中国地图多级钻取功能（基本版 未做过多功能拓展和样式优化 便于二次开发）。（更多说明移步：https://blog.csdn.net/ZYS10000/article/details/119298354）
eCharts全国及各省、市、县三级下钻数据（珍藏版）
11-15
史上最全的map数据，三级数据下钻，全国->省->市，全国->直辖市->县级市 例如：第一级市全国地图，下一级为北京地图数据，再下一级为通州区数据。珍藏版，花费了很久很久才整理的最全最实用的的资料。做地图开发，不需要再找其他资源了
echarts地图下钻（全国、省、市）多级下钻.zip
03-06
echarts地图下钻（全国、省、市）多级下钻，用webstorm导入项目，启动即可呈现效果.
echarts地图下钻下载
08-02
echart地图下钻 ，由全国地图下钻到某省地图， 下载后解压即可
echarts地图省市区三级下钻联动
04-06
vue echarts地图三级下钻，默认全国地图，例如点击湖北省进入湖北省地图，然后点击武汉进入武汉市地图，点击上一级返回，Vue写法，js写法类似
echarts 柱状图点击下钻，点击外部按钮可返回
qq_40295815的博客
10-28 2000
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div style="margin-left:40%;margin-top:2%"> <button id='return-button' value=''.
echarts中国地图实现省市区下钻
m0_50278775的博客
08-17 1324
实现下钻的的思路就是点击省份的时候拿到省份的区域编码然后再请求本地对应编码的json数据，点击市级也是拿到市级编码请求本地的json数据回来渲染地图就行，至于说json数据的话，网上有，但是可能不全，我下载的json数据包就是漏了一些区县的数据，最后我是自己在这上面缺哪个下载哪个的。首先看一下实现的效果图，本项目的需求是根据后端返回的数据，哪些地图有数据的要给颜色，点击省份下钻到市，同样请求后端接口将有数据的城市渲染成绿色，区县也是一样的需求。下面是实现地图下钻的全部代码，我项目里是封装成组件了。
关于echarts实现地图下钻的功能(实现中国省市区下钻功能)
最新发布
qq_46516788的博客
01-27 1386
最近公司的项目用到了地图的下钻功能，百度大多数都是部分，但是也有很多好的参照，我觉得很有意思，自己写了一个vue的，有vue2和vue3的版本，ts没有去实现，就是在vue3的基础上加上类型定义–喜欢研究的自行去试试。
echarts开发的自动旋转map3d下钻和柱图地图
08-05
ECharts是一款强大的数据可视化库，可以用于开发自动旋转的Map3D下钻和柱图地图。该功能使得地图展示更加生动、直观，帮助用户更好地理解数据分布和趋势。 首先，Map3D功能可以将地图呈现为三维效果，使得地理空间关系更加清晰。通过ECharts的地图可视化组件，可以快速创建一个3D地图，并根据需求进行旋转操作。用户可以通过鼠标拖动或程序控制来实现地图的自动旋转，这使得数据展示更加活跃有趣，同时也方便用户从不同角度观察地图上的数据。 其次，ECharts还提供了柱图地图功能。柱图地图是一种直观的数据展示方式，可以清晰地表示不同地区的数据差异。ECharts的柱图地图可以根据不同的数据指标，给每个地区绘制不同高度的柱形图，使得数据的大小关系一目了然。在Map3D场景下，用户可以通过旋转地图和调整视角，更好地观察柱形图的高低变化、不同地区的数据对比等。 在使用ECharts开发自动旋转Map3D下钻和柱图地图时，只需按照ECharts的文档，引入相应的库和组件，并配置相关的图表参数即可。ECharts提供了丰富的API接口，可以用于自定义地图样式、交互行为、数据展示等需求。开发过程中，可以根据具体的业务需求，灵活运用ECharts的功能，实现地图的个性化展示和交互效果。 总结来说，ECharts的自动旋转Map3D下钻和柱图地图功能，能够提供生动直观的数据可视化效果，帮助用户更好地理解和分析数据。通过简单的配置和自定义，可以快速实现这些功能，为用户提供更好的数据展示和交互体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值