vue使用echarts实现3D地图模型

最新推荐文章于 2025-01-08 17:00:52 发布
原创 最新推荐文章于 2025-01-08 17:00:52 发布 · 734 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #echarts #3d 


​​​​​​​<div id="main" class="mainbox" style="width:80%;height:100%;"></div>


//引入省、市 json文件，后面要通过这个json文件请求指定getjson文件
import shengJSON from '../../../../public/static/mapJSON/sheng.json'
import shiJSON from '../../../../public/static/mapJSON/shi.json'; // 引入 JSON 文件
import china from '../../../../public/static/mapJSON/china.json'; // 引入 JSON 文件
// 34个省、市、自治区的名字拼音映射数组
var provinces = shengJSON //省
var cityMap = shiJSON // 市
// 直辖市和特别行政区没有三级地图
var special = ['北京市', '天津市', '上海市', '重庆市', '香港特别行政区', '澳门特别行政区']


 data() {
    return {
  option: {
        series: [
          {
            type: 'lines',
            coordinateSystem: 'geo', // 使用地理坐标系
            data: [],
            zlevel: 2,
            symbol: ['none', 'arrow'], //飞线起点终点点位样式
            symbolSize: 10, // 飞线起点终点点位大小
            lineStyle: {
              color: '#93EBF8',
              width: 2.5, //尾迹线条宽度
              opacity: 0.6, //尾迹线条透明度
              curveness: 0.2, //尾迹线条曲直度
              animation: true, // 启用动画
              type: 'solid' // 设置为虚线
              //solid实线， dashed //虚线
            },
            effect: {
              show: true,
              period: 4, // 动画周期
              trailLength: 0.5, // 尾迹长度
              color: '#93EBF8',
              symbol: 'arrow',
              symbolSize: [10, 5]
            }
          },
          {
            type: 'effectScatter',
            zlevel: 3,
            coordinateSystem: 'geo',
            emphasis: {
              label: {
                show: true,
                position: 'top',
                color: '#fff',
                formatter: '{b|{b}}'
              }
            },
            data: [],
            symbol: 'circle',
            symbolSize: [20, 10],
            label: {
              show: true, // 显示标签
              formatter: '{b}', // 使用名称
              position: 'top', // 标签位置
              color: '#fff' // 标签颜色
            },
            itemStyle: {
              color: 'orange',
              shadowBlur: 10,
              shadowColor: 'orange'
            },
            effectType: 'ripple',
            showEffectOn: 'render', //emphasis移入显示动画，render一开始显示动画
            rippleEffect: {
              scale: 3,
              period: 7,
              //fill,stroke
              brushType: 'stroke'
            }
          }
        ],
        geo: [   //三层的重影模拟3D形态
          {
            map: 'china',
            type: 'map',
            aspectScale: 1,
            zoom: 1.5,
            layoutCenter: ['50%', '63%'],
            layoutSize: '100%',
            show: true,
            roam: false,
            label: {
              show: false, // 各个省市县的名字
              color: '#fff'
            },
            itemStyle: {
              areaColor: 'rgba(58,149,253,1)', // 默认颜色
              borderColor: '#c0f3fb',
              borderWidth: 0.8
            },
            emphasis: {
              itemStyle: {
                show: false,
                color: '#fff',
                areaColor: 'rgba(0,254,233,0.6)'
              },
              label: {
                show: true,
                color: '#fff'
              }
            },
            regions: []
          },
          // 重影
          {
            type: 'map',
            map: 'china',

            zlevel: -1,
            aspectScale: 1,
            zoom: 1.5,
            layoutCenter: ['50%', '64%'],
            layoutSize: '100%',
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 1,
              borderColor: 'rgba(58,149,253,0.8)',
              shadowColor: 'rgba(172, 122, 255,0.5)',
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: 'rgba(5,21,35,0.1)'
            }
          },
          {
            type: 'map',
            map: 'china',
            zlevel: -2,
            aspectScale: 1,
            zoom: 1.5,
            layoutCenter: ['50%', '65%'],
            layoutSize: '100%',
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 1,
              borderColor: 'rgba(58,149,253,0.6)',
              shadowColor: 'rgba(65, 214, 255,0.6)',
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: 'rgba(5,21,35,0.1)'
            }
          }

        ],
        legend: {
          show: false // 这里设置图例不显示
        },
        visualMapOption: {
          show: false
        },
        title: {
          // text: 'Echarts3 离线地图',
          left: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 16,
            fontWeight: 'normal',
            fontFamily: 'Microsoft YaHei'
          },
          subtextStyle: {
            color: 'rgb(104,160,200)',
            fontSize: 13,
            fontWeight: 'normal',
            fontFamily: 'Microsoft YaHei'
          }
        },
        // 鼠标悬停显示信息
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return (
              params.seriesName + '<br />' + params.name + '：' + params.value
            )
          }
        },
        animationDuration: 1000,
        animationEasing: 'cubicOut',
        animationDurationUpdate: 1000
        // visualMap: {
        //   show: false, // 隐藏 visualMap 图标
        //   min: 800,
        //   max: 1000,
        //   text: ['High', 'Low'],
        //   calculable: true,
        //   realtime: false,
        //   inRange: {
        //     color: ['rgba(104,160,200)', 'rgba(56, 143, 162)', 'rgba(56, 143, 162)']
        //   }
        // },
      },
 regions: [
      //北部   // '北部战区': ['黑龙江省、吉林省、辽宁省和内蒙古内蒙古自治区，以及山东省],
      {
        name: '吉林省',
        val: '北部战区',
        itemStyle: { normal: { areaColor: 'rgba(9,134,214)', borderWidth: 0 } },
        label: {
          show: true,
          formatter: '北部战区', // 显示的文本
          textStyle: {
            color: 'white',
            fontSize: 35,
            fontFamily: 'KaiTi'
          }
        }
      },
      {
        name: '黑龙江省',
        val: '北部战区',
        itemStyle: { normal: { areaColor: 'rgba(9,134,214)', borderWidth: 0 } }
      },
      {
        name: '辽宁省',
        val: '北部战区',
        itemStyle: { normal: { areaColor: 'rgba(9,134,214)', borderWidth: 0 } }
      },
      {
        name: '山东省',
        val: '北部战区',
        itemStyle: { normal: { areaColor: 'rgba(9,134,214)', borderWidth: 0 } }
      },
      {
        name: '内蒙古自治区',
        val: '北部战区',
        itemStyle: { normal: { areaColor: 'rgba(9,134,214)', borderWidth: 0 } }
      },
      // '‌中部战区‌': [河北省、河南省、陕西省、山西省、湖北省、天津市和首都北京],
      //华北  中部
      {
        name: '北京市',
        val: '‌中部战区‌',
        itemStyle: { normal: { areaColor: 'rgba(229,6,34)', borderWidth: 0 } }
      },
      {
        name: '天津市',
        val: '‌中部战区‌',
        itemStyle: { normal: { areaColor: 'rgba(229,6,34)', borderWidth: 0 } }
      },
      {
        name: '河北省',
        val: '‌中部战区‌',
        itemStyle: { normal: { areaColor: 'rgba(229,6,34)', borderWidth: 0 } }
      },
      {
        name: '山西省', val: '‌中部战区‌',
        itemStyle: { normal: { areaColor: 'rgba(229,6,34)', borderWidth: 0 } },
        label: {
          show: true,
          formatter: '中部战区', // 显示的文本
          textStyle: {
            color: 'white',
            fontSize: 35,
            fontFamily: 'KaiTi'
          }
        }
      },
      {
        name: '陕西省',
        val: '‌中部战区‌',
        itemStyle: { normal: { areaColor: 'rgba(229,6,34)', borderWidth: 0 } }
      },
      {
        name: '河南省',
        val: '‌中部战区‌',
        itemStyle: { normal: { areaColor: 'rgba(229,6,34)', borderWidth: 0 } }
      },
      {
        name: '湖北省',
        val: '‌中部战区‌',
        itemStyle: { normal: { areaColor: 'rgba(229,6,34)', borderWidth: 0 } }
      },
      // '华东  东部   // '东部': ['江苏省、浙江省、福建省、江西省、安徽省和上海市],
      {
        name: '上海市',
        val: '东部战区',
        itemStyle: { normal: { areaColor: 'rgba(189,50,121)', borderWidth: 0 } }
      },
      {
        name: '江苏省',
        val: '东部战区',
        itemStyle: { normal: { areaColor: 'rgba(189,50,121)', borderWidth: 0 } }
      },
      {
        name: '浙江省',
        val: '东部战区',
        itemStyle: { normal: { areaColor: 'rgba(189,50,121)', borderWidth: 0 } },
        label: {
          show: true,
          formatter: '东部战区', // 显示的文本
          textStyle: {
            color: 'white',
            fontSize: 35,
            fontFamily: 'KaiTi'
          }
        }
      },
      {
        name: '安徽省',
        val: '东部战区',
        itemStyle: { normal: { areaColor: 'rgba(189,50,121)', borderWidth: 0 } }
      },
      {
        name: '福建省',
        val: '东部战区',
        itemStyle: { normal: { areaColor: 'rgba(189,50,121)', borderWidth: 0 } }
      },
      {
        name: '江西省',
        val: '东部战区',
        itemStyle: { normal: { areaColor: 'rgba(189,50,121)', borderWidth: 0 } }
      },
      {
        name: '台湾省',
        val: '东部战区',
        itemStyle: { normal: { areaColor: 'rgba(189,50,121)', borderWidth: 0 } }
      },
      // '中南   南部   // '‌南部战区': ['广东省、湖南省、海南省、云南省、贵州省和广西壮族自治区，以及香港、澳门],

      {
        name: '湖南省',
        val: '南部战区',
        itemStyle: { normal: { areaColor: 'rgba(111,186,42,1)', borderWidth: 0 } },

        label: {
          show: true,
          formatter: '南部战区', // 显示的文本
          textStyle: {
            color: 'white',
            fontSize: 35,
            fontFamily: 'KaiTi'
          }
        }
      },
      {
        name: '广东省',
        val: '南部战区',
        itemStyle: { normal: { areaColor: 'rgba(111,186,42,1)', borderWidth: 0 } }
      },
      {
        name: '广西壮族自治区',
        val: '南部战区',
        itemStyle: { normal: { areaColor: 'rgba(111,186,42,1)', borderWidth: 0 } }
      },
      {
        name: '海南省',
        val: '南部战区',
        itemStyle: { normal: { areaColor: 'rgba(111,186,42,1)', borderWidth: 0 } }
      },
      {
        name: '贵州省',
        val: '南部战区',
        itemStyle: { normal: { areaColor: 'rgba(111,186,42,1)', borderWidth: 0 } }
      },
      {
        name: '云南省',
        val: '南部战区',
        itemStyle: { normal: { areaColor: 'rgba(111,186,42,1)', borderWidth: 0 } }
      },
      {
        name: '南海诸岛',
        val: '南部战区',
        itemStyle: { normal: { areaColor: 'rgba(111,186,42,1)', borderWidth: 0 } }
      },
      // '西南  西部  rgba(111,186,42,1）沙漠色rgba(249,124,4,1)绿洲色    // '西部战区': [四川省、甘肃省、青海省、宁夏回族自治区、西藏自治区、新疆自治区和重庆市],

      {
        name: '四川省',
        val: '西部战区',
        itemStyle: { normal: { areaColor: 'rgba(249,124,4,1)', borderWidth: 0 } }
      },
      { name: '甘肃省', val: '西部战区', itemStyle: { normal: { areaColor: 'rgba(249,124,4,1)', borderWidth: 0 } } },
      {
        name: '重庆市',
        val: '西部战区',
        itemStyle: { normal: { areaColor: 'rgba(249,124,4,1)', borderWidth: 0 } }
      },
      {
        name: '宁夏回族自治区',
        val: '西部战区',
        itemStyle: { normal: { areaColor: 'rgba(249,124,4,1)', borderWidth: 0 } }
      },
      {
        name: '青海省',
        val: '西部战区',
        itemStyle: {
          normal: {
            areaColor: 'rgba(249,124,4,1)', borderWidth: 0
          }
        },
        label: {
          show: true,
          formatter: '西部战区', // 显示的文本
          textStyle: {
            color: 'white',
            fontSize: 35,
            fontFamily: 'KaiTi'
          }
        }
      },
      {
        name: '西藏自治区',
        val: '西部战区',
        itemStyle: { normal: { areaColor: 'rgba(249,124,4,1)', borderWidth: 0 } }
      },
      {
        name: '新疆维吾尔自治区',
        val: '西部战区',
        itemStyle: { normal: { areaColor: 'rgba(249,124,4,1)', borderWidth: 0 } }
      }

    ],
pointsBD: [
      {
        name: '新疆', value: [87.628579, 43.793301], itemStyle: { color: '#00EEFF' }
      },
      {
        name: '郑州', value: [113.6249, 34.7466], itemStyle: { color: '#00EEFF' }
      },
      {
        name: '永州', value: [111.608275, 26.435102], itemStyle: { color: '#00EEFF' }
      },
      {
        name: '哈尔滨市', value: [126.642464, 45.756967], itemStyle: { color: '#00EEFF' }
      },
      {
        name: '南京市', value: [118.796989, 32.060255], itemStyle: { color: '#00EEFF' }
      },
      // {
      //   name: '云南', value: [102.709372, 25.046434], itemStyle: { color: '#00EEFF' }
      // },
      // {
      //   name: '北京', value: [116.407387, 39.904179], itemStyle: { color: '#00EEFF' }
      // },
      {
        name: '武汉', value: [114.2986, 30.5823], itemStyle: { color: '#00EEFF' }
      },

    ],
    linesDataBD: [
      //战区1级
      {
        coords: [[87.628579, 43.793301], [111.608275, 26.435102]],//新疆到永州
        lineStyle: {
          color: '#93EBF8',
          width: 2.5, //尾迹线条宽度
          opacity: 0.6, //尾迹线条透明度
          curveness: 0.2, //尾迹线条曲直度
          type: 'solid' // 虚线

        }
      },
      {
        coords: [[126.642464, 45.756967], [118.796989, 32.060255]], // 哈尔滨市到南京市的飞线
        lineStyle: {
          color: '#93EBF8',
          width: 2.5,
          opacity: 0.6,
          curveness: 0.2,
          type: 'solid' //

        }
      },
    ],
    }
}



init(){
 this.myMapChart = echarts.init(document.getElementById('main'))
  echarts.registerMap('china', china)//注册地图的数据，china，
        this.option.series[0].data = this.linesDataZX // 飞线数据
        this.option.series[1].data = this.pointsZX // 点位数据
        this.option.geo[0].regions =this.regions    //这个是战区颜色分布

      this.myMapChart.setOption(this.option)
      this.myMapChart.on('click', this.clickMap)//加点击事件，可下钻
      


}
 /* 地区区域点击事件 */
    async  clickMap(params) {
      let origin=window.location.origin
      let centerCoord=''
      if (params.name in provinces) {
        let res=await this.$axios.get(`${origin}/static/mapJSON/province/${provinces[params.name]}.json`);
     
       if(res.data.features[0].properties.childrenNum==0){
         let shengAll = this.getChildMap(china)
         this.renderMap(shengAll,params.name)
         return
       }
        this.$echarts.registerMap(params.name, res.data)
        let shiAll = this.getChildMap( res.data)
        this.renderMap( shiAll,params.name)
      } else if (params.seriesName in provinces) {
 
        console.log("市：" + params.name)
        if (special.indexOf(params.seriesName) >= 0) { //直辖市和特别行政区没有下级了，返回大图
          this.renderMap('china'，params.name,)
        } else {
          let res1=await this.$axios.get(`${origin}/static/mapJSON/city/${cityMap[params.name]}.json`);
  
          this.$echarts.registerMap(params.name, res1.data)
          let xianAll = this.getChildMap(res1.data)
          this.renderMap( xianAll,params.name,)
          return
 
        }
      } else {
        let shengAll = this.getChildMap(china)
        this.renderMap(shengAll,params.name)
      }
    },
 
    getChildMap(data) {
      let childMapAll = []
      for (var i = 0; i < data.features.length; i++) {
        childMapAll.push({
          name: data.features[i].properties.name,
          value: 0
        })
      }
      return childMapAll
    },
renderMap(geoJson, name) {
      this.option.geo.forEach((v) => {
        v.map = name
        v.layoutSize = name == 'china' ? '100%' : '70%'
      })
  this.myMapChart.setOption(this.option)
    },

 上一篇我也写过charts地图，但是那个不是3d模型形态的，这个是优化版，主要是option里面的，其他的没什么变化

这个是效果图，旁边的不要管，

这个是用到的地图数据csdn - 安全中心https://link.csdn.net/?from_id=141921612&target=https%3A%2F%2Fblue-sea-697d.quartiers047.workers.dev%3A443%2Fhttps%2Fwwk.lanzout.com%2FiwZ531p52e7a

vue3：实现ECharts3D地图详细示例，echarts实现3D地图map3D，vue3如何利用echarts绘制3d地图立体城市省市地区分布，可视化数据大屏3D炫酷中国地图（复制源码，开箱即用）
高级前端工程师
06-28 2877
echarts实现中国地图记录篇之3D地图，Echarts地图之——如何让地图显示出3d感，【3d地图】vue中使用echarts geo3D，echarts实现某个市3D地图展示，vue3中使用echarts实现中国地图，3D地图图表，echarts实现3D地图——map3D，数据大屏3d地图，vue3+echarts绘制中国地图,3D地图,省、市、县，【3d地图】vue3中使用echarts geo3D，echarts实现某个市3D地图展示，ECharts3D地图(详细示例——附有具体注释)，echar
Vue3 Echarts 3D饼图（3D环形图）实现讲解附带源码
最新发布
前端领域技术分享
05-12 3798
本文介绍了如何利用 ECharts 和 echarts-gl 插件实现 3D 饼图和 3D 环形图。首先，准备工作包括引入 ECharts 核心库和 echarts-gl 插件，支持通过 CDN 或 npm 安装。3D 饼图的实现原理主要依赖于 echarts-gl 插件，通过自定义曲面图、三维折线图和三维散点图分别绘制饼图主体、指示线和标签。文章详细解析了 echarts-gl 插件的常用配置项，如 grid3D 和 series，并重点介绍了曲面图的参数方程（parametricEquation）
echarts实现伪3D地图、省会坐标涟漪、自动轮播、数据联动
Lionel_SSL的博客
10-09 2269
echarts实现伪3D地图、省会坐标涟漪、自动轮播、数据联动。
【vue+echarts】绘制中国地图,3D地图,省、市、县三级下钻以及回钻,南海诸岛小窗化显示,点位飞线图,点位名称弹窗轮播展示,及一些常见问题
热门推荐
$
05-06 1万+
绘制中国地图,3D地图,省、市、县三级下钻以及回钻,南海诸岛小窗化显示,点位飞线图,点位名称弹窗轮播展示,及一些常见问题
echarts3D地图：旋转、添加纹理图片（vue3）
weixin_66549669的博客
09-02 2186
首先安装echarts和echarts-gl依赖，注意的是，echarts-gl版本安装低版本。跟echarts图表一般的使用和配置差不多，就series中type: 'map3D'以及给地图命名map: name。效果如图：（旋转效果自行运行查看）
vue2+echarts实现3D地图
qq_57614777的博客
01-08 1165
vue2+echarts实现3D地图
VUE，echart3D地图，自定义信息框
weixin_44183340的博客
09-18 850
<template> <divclass="chart"ref="nanjingMap"></div> </template> <script> importnanjingfrom"./nanjing.json"; importechartsfrom"echarts"; import"echarts-gl"; exportdefault{ name:"NanjingMap", ...
echarts扩展3D中国地图（vue）
weixin_46097277的博客
03-28 904
首先，确保自己安装echarts和echarts-gl。在main.js中引入。
vue3 + echarts5.4.3 实现3D省份地图【动态icon】
2301_76627020的博客
02-29 1231
直接复制即可 ，再次就不放了！
使用Vue和Echarts实现辽宁省3D地图展示
3D地图实现技术是现代信息技术的一个重要组成部分，它主要是通过计算机图形学、地理信息系统（GIS）和三维可视化技术相结合的方式，来创建和展现地理位置的三维模型。这种方法不仅可以提供更直观、更真实的地理信息...
echarts核心js以及用于3D效果的js
11-07
个人下载总结的关于echarts的核心js以及用于3D效果显示的封装js
echarts 3D地图，地图区域点击触发事件
10-23
echarts 3D地图，地图区域点击触发事件，3d地图加数据
基于ECharts GL的3D图表展示设计与实现
04-15
本文将深入探讨如何利用ECharts GL进行3D图表的设计与实现。 **ECharts GL的介绍** ECharts GL是ECharts的高级扩展，主要针对3D图表、大规模散点图和地理图表等场景。它基于WebGL技术，能够在浏览器中实现高性能的...
使用Vue3 + Echarts实现中国地图的绘制
qq_45569925的博客
07-23 1846
使用Echarts绘制中国地图，每个省份按照其下第一级市区的数量进行颜色的渲染，渲染范围为【0,40】，点击省份的时候页面将会变为该省份的地图，点击省份下的市区页面将会变为该市区的地图，此时点击返回省份按钮，就会回到该省份的地图，点击重置到中国地图按钮，页面将会重新绘制为中国地图。DataV.GeoAtlas地理小工具系列 (aliyun.com)如果有更好的数据来源的话欢迎评论！
echart 广州3d_ECharts3D地图(详细示例——附有具体注释)
weixin_39636645的博客
12-19 1544
3D地图图表效果如下:具体代码如下：铜仁市3D地图(点击地图区域跳转到相应页面)// 初始化图表var myChart = echarts.init(document.getElementById('main'));// JSON文件(地图数据)路径var uploadedDataURL = "json/522200.json";// 显示加载动画效果,可以在加载数据前手动调用该接口显示加载动画，...
vue3之echarts3D环柱饼图
时光清浅处，一步一安然
01-29 1708
【代码】vue3之echarts3D环柱饼图。
从零开始Vue项目中使用MapboxGL开发三维地图教程（六）加载点、线、面图层以及三维面图层（白模）
tigerhhzz的博客
06-17 2103
然后使用addLayer创建一个新的图层，并设置多边形外观的样式。为了在多边形周围添加轮廓，它再次使用addLayer来创建一个引用相同GeoJSON源的新线层。开发地图应用时，加载POI等点状数据，显示文字或者图标信息，mapbox-gl对应使用的是符号图层（symbol），下面的代码时使用Mapbox GL JS中的默认Marker方法向地图添加两个标记。在mapbox-gl加载fill-extrusion图层过程：通过加载geojson矢量数据，数据源加载完成后，再进行图层的设置。
vue使用echarts与echarts-gl实现3d地图与 3d柱状图
weixin_48464215的博客
07-17 7333
主要使用vue+echarts+echarts-gl实现3d地图效果，以及3d柱状图效果
Vue中使用Echarts构建3D地球
m0_56219678的博客
02-17 5587
Vue中使用Echarts构建3D地球
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值