首页 前端知识 echarts geo3D结合map3D 生成可以点击获取省份信息跳转到相应省份 且地图显示省份名称

echarts geo3D结合map3D 生成可以点击获取省份信息跳转到相应省份 且地图显示省份名称

2024-08-14 00:08:32 前端知识 前端哥 862 228 我要收藏

echarts geo3D结合map3D 生成可以点击获取省份信息跳转到相应省份 且地图显示省份名称

先上效果图

在这里插入图片描述
在这里插入图片描述

先讲下需求:
1.地图上显示各个省份的名称
2.对不同省份进行区分(项目涉及到省份排名之类的);
3. 点击进入不同省份 展示各个省份的市区信息;
4. 在省份地图上添加marker ;

讲下实现思路

1.中国地图使用geo3d 和scatter3D做文字图层,用map3d实现点击可以获取省份信息,如果单独使用geo3d,无法获取到点击的省份信息。还有一些思路写在代码中了。

上代码

 var dom: any = document.getElementById("container")

 myChart = echarts.init(dom);
 let geoCoordMap: any = [
  {
    "name": "北京市", "value": [116.405285, 39.904989, 0] },
  {
    "name": "天津市", "value": [117.190182, 39.125596, 0] },
  {
    "name": "河北省", "value": [114.502461, 38.045474, 0] },
  {
    "name": "山西省", "value": [112.549248, 37.857014, 0] },
  {
    "name": "内蒙古自治区", "value": [111.670801, 40.818311, 0] },
  {
    "name": "辽宁省", "value": [123.429096, 41.796767, 0] },
  {
    "name": "吉林省", "value": [125.3245, 43.886841, 0] },
  {
    "name": "黑龙江省", "value": [126.642464, 45.756967, 0] },
  {
    "name": "上海市", "value": [121.472644, 31.231706, 0] },
  {
    "name": "江苏省", "value": [118.767413, 32.041544, 0] },
  {
    "name": "浙江省", "value": [120.153576, 30.287459, 0] },
  {
    "name": "安徽省", "value": [117.283042, 31.86119, 0] },
  {
    "name": "福建省", "value": [119.306239, 26.075302, 0] },
  {
    "name": "江西省", "value": [115.892151, 28.676493, 0] },
  {
    "name": "山东省", "value": [117.000923, 36.675807, 0] },
  {
    "name": "河南省", "value": [113.665412, 34.757975, 0] },
  {
    "name": "湖北省", "value": [114.298572, 30.584355, 0] },
  {
    
转载请注明出处或者链接地址:https://www.qianduange.cn//article/15538.html
标签
评论
发布的文章

04-Json/Ajax/Vue的知识

2024-08-21 10:08:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!