Echarts 3d地图

已于 2022-09-29 14:58:23 修改
阅读量7.3k 收藏 37
点赞数 7
分类专栏： echarts 文章标签： echarts 3d
于 2022-08-13 17:10:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43557302/article/details/126320269
版权

Echarts官方网址:https://echarts.apache.org/zh/index.html

简介:

使用echarts绘制3d地图以及在3d地图上绘制江苏省区域边界飞线图以及3d柱状图和3d散点.

3dMap bar
3dMap scatter
在这里插入图片描述

3D地图

        const option = {
          //setBanner中循环this.dataChart,然后触发dispatchAction{type:'showTips'},轮播间隔:bannerTime
          //PS: dataChart:界面配置的静态、动态API、sql数据的结果数据
          //PS: dataChart是src/echart/common.js::updateData里经过api/sql查询的结果并经过dataFormatter(配置的响应数据的处理脚本配置)处理过的数据
          //htmlTip: [ series.tooltip > geo.tooltip >tooltip ]
          //series.tooltip根据this.dataChart进行轮播展示, geo.tooltip则根据区域名找this.dataChart里对应的记录展示(没有就显示区域名)
          //dataChart的格式:{name:'区域名',title:'标题',lng:'经度',lat:'纬度',value:[{title:'字段名',type:'类型',data:'数据'}]}
          tooltip: (() => {
            return Object.assign(
                (() => {
                  // console.log("DENGG-DEBUG 提示事件formatter:=",this.formatter)
                  //如果没有配置提示事件,则会显示this.dataChart中的数据
                  //如果配置提示事件,其作用就是对dataChart进行进一步处理
                  if (this.formatter) {
                    return {
                      //tooltip-支持字符串模板和回调函数两种形式，可以返回{string | HTMLElement | HTMLElement[]}
                      formatter1: '{a}\n来源：{b}\n数量：{c}\n比例：{d}%',  //字符串模板:有效果，但不可以换行
                      formatter: (name, item) => {                         //回调函数格式：=> [tooltip.formatter] string | HTMLElement | HTMLElement[]
                        // console.log("DENGG-DEBUG 提示事件param:=",item);    //这里的item=item_series_0_{x},意义不大
                        // console.log("DENGG-DEBUG [tooltip] name:=",name);        //name中已经包含data,还有marker样式信息
                        // console.log("DENGG-DEBUG 提示事件dataChart:=",this.dataChart);
                        //这里传递的参数和界面配置提示事件的输入参数对应，界面配置提示事件的作用就是对dataChart进行进一步处理
                        // 其中name.dataIndex是当前轮询到的数据索引值，name.maker定义显示样式==>从何而来？==>echarts.min.js
                        //改变name.marker好像无效果
                        // name.marker = "<span style=\"display:inline-block;margin-right:5px;border-radius:20px;width:10px;height:10px;background-color:rgb(244,244,244);\"></span>"
                        return this.htmlTips(name);
                        // return "tooltip";
                        return this.formatter(name, this.dataChart);
                      }
                    };
                  }
                  return {};
                })(),
                {
                  backgroundColor: this.option.tipBackgroundColor || "rgba(0,0,0,1)",
                  // extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
                  textStyle: {
                    fontSize: this.option.tipFontSize || 20,
                    color: this.option.tipColor || "red"
                  },
                  triggerOn: 'mousemove|click',   //mousemove,click,none,默认mousemove
                  trigger: 'item'  // 默认item 图形触发， axis 坐标轴触发， none 不触发
                }
            );
          })(),
          geo3D: Object.assign(
              (() => {      //target
                if (!this.validatenull(this.centerData)) {
                  return {
                    center: this.centerData   //当前视角的中心点，用经纬度表示
                  };
                }
                return {};
              })(),
              {
                map: "HK",    //这个地方的名字与上面registerMap时的名字对应
                zoom: this.zoomData,
                layoutCenter: ["50%", "50%"], //控制显示中心点位置
                layoutSize: 1800, //控制显示大小
                roam: this.roam,  //是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                // aspectScale:0.75,                           //这个参数用于 scale 地图的长宽比。
                left: this.option.gridX,      //好像没效果
                top: this.option.gridY,
                right: this.option.gridX2,
                bottom: this.option.gridY2,
                // silent:false,                //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
                //不定义tooltip则默认弹窗显示区域lable名
                tooltip: {
                  show: this.option.popShow,
                  formatter: params => {
                    console.log(params)
                    // console.log("DENGG-DEBUG 提示事件params.name:=",params.name)
                    //params:= {"componentType":"geo","name":"山西省","$vars":["name"],"geoIndex":0}
                    // console.log("DENGG-DEBUG [geo.tooltip] params:=",JSON.stringify(params))
                    //TODO:这里可以定义显示样式

                    return "geo.tooltip:=" + JSON.stringify(params.name);  //区域名称
                    // return "<span style=\"display:inline-block;margin-right:5px;border-radius:20px;width:10px;height:10px;background-color:rgb(244,244,244);\">"+params.name+"</span>"
                  },
                  //鼠标放上去的颜色
                  //默认弹框
                  backgroundColor: this.option.popUpEmpColor,
                  textStyle: {
                    fontSize: this.option.popUpFontSize || 14,
                    color: this.option.popUpColor,
                    width: this.option.popUpWidth,
                    height: this.option.popUpHeight,
                  },
                },
                //区域图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
                label: {
                  show: true,
                  fontSize: this.fontSize,
                  color: this.color,
                  textStyle: {
                    color: "#000",//文字颜色
                    fontSize: 16,//文字大小
                    fontFamily: '微软雅黑',
                    backgroundColor: "rgba(0,0,0,0)",//透明度0清空文字背景
                  }
                },
                itemStyle: {
                  color: this.option.areaColor,
                  opacity: 1,
                  borderWidth: this.option.borderWidth,
                  borderColor: this.option.borderColor,
                },
                light: {
                  //主光源
                  main: {
                    color: "#fff",
                    intensity: 1,
                    shadow: true,
                    alpha: 40,
                  }

                },
                shading: 'lambert',
                // environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                //   offset: 0, color: '#09C7F7' // 天空颜色
                // }, {
                //   offset: 0.7, color: '#09C7F7' // 地面颜色
                // }, {
                //   offset: 0, color: '#fcf7f7' // 地面颜色
                // }], false),

                viewControl: {
                  projection: 'perspective',
                  autoRotate: false,
                  // damping: 0,
                  rotateSensitivity: 1, // 旋转操作的灵敏度
                  rotateMouseButton: 'left', // 旋转操作使用的鼠标按键
                  zoomSensitivity: 1, // 缩放操作的灵敏度
                  panSensitivity: 1, // 平移操作的灵敏度
                  // panMouseButton: 'right', // 平移操作使用的鼠标按键
                  distance: 150, // 默认视角距离主体的距离
                  center: [0, 0, 0],
                  animation: true,
                  animationDurationUpdate: 1000,
                  animationEasingUpdate: 'cubicInOut'
                },

                boxWidth: this.option.boxWidth || 89,
                boxHeight:6,
                boxDepth: this.option.boxDepth || 140,//地图倾斜度
                regionHeight: this.option.regionHeight || 4,//地图高度
                selectedMode: "single",// 地图高亮单选
                emphasis: {
                  label: {
                    show: true,//是否显示标签
                    fontSize: this.fontSize + 3,
                    textStyle: {
                      color: '#fff',//高亮文字颜色
                      fontFamily: '微软雅黑'
                    },
                    formatter: params => {
                      // console.log("DENGG-DEBUG 提示事件params.name:=",params.name)
                      // console.log("DENGG-DEBUG 提示事件params:=", params)
                      this.paramsName=params.name;
                      // console.log(this.paramsName)
                      return params.name;
                      // return params.status;
                    },
                  },
                  itemStyle: {//鼠标悬浮(mouseover)时的区域显示样式
                    borderWidth: this.borderWidth + 2,
                    borderColor: this.borderColor,
                    areaColor: this.empAreaColor
                  }
                },
              }
          ),
          visualMap: {
            min: 1,
            max: this.option.max || 3,
            show: this.option.visualMap3dShow || false,
            // splitNumber: 5,
            calculable: true,
            // range: [0, 20],
            // realtime = true,
            // align = 'auto',
            inRange: {
              color: ['#fc0303', '#fdf003', '#6bf505'].reverse()
            },
            textStyle: {
              color: '#fff'
            }
          },

          animation: true, //是否开启动画
          animationDurationUpdate: 1000, //过渡动画的时长
          animationEasingUpdate: 'cubicInOut' ,//过渡动画的缓动效果

          series: [
            {
              type: 'scatter3D',
              coordinateSystem: "geo3D",
              data: this.scatter3DData || [],
              // symbol: 'arrow',//rect,roundRect,triangle,diamond,pin,arrow散点的形状
              // let symbolImg = 'image://'+ require('@/assets/bigscreen-img/map-logo.png') //或者import引入在拼接也行
              // symbol:'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
              symbol:'circle',
              //三角triangle
              // symbol:'diamond', //点形状 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
              symbolSize: this.option.symbolSize || 30,
              //散点图颜色描边等样式
              itemStyle: {
                color: '#2e83aa',//散点图图形的颜色。
                opacity: 1,
              },
              //标签样式
              label: {
                show: this.option.labelShow || false,
                position: 'right',
                fontSize: this.fontSize,
                color: this.color,
                textStyle:{
                  color:'black', //文字颜色
                  borderWidth:0, //标签上边框宽度
                  borderColor:'white', //边框颜色
                  fontFamily:'宋体', //标签字体
                  fontSize:14, //字体大小
                  fontWeight:'normal' //是否加粗
                },
                formatter(params) {
                  console.log(params.value[2]+params.value[3])
                  return params.value[2]+params.value[3];
                }
              },
              // 高亮
              emphasis: {
                itemStyle: {
                  color: this.option.emphasisColor || '#faf602',
                  opacity: 0.8,
                  borderWidth: 2,
                  borderColor: '#e51717'
                },
                label: {
                  show: true,
                  position: 'right',
                  textStyle:{
                    color:'black', //文字颜色
                    borderWidth:0, //标签上边框宽度
                    borderColor:'white',//边框颜色
                    fontFamily:'宋体', //标签字体
                    fontSize:14, //字体大小
                    fontWeight:'normal' //是否加粗
                  }
                  // formatter   高亮区数据
                }
              },
              //tooltip
              tooltip:{
                formatter(params) {
                  console.log(params)
                  return params.value[2]
                }
              },
              //动画
              animation: true, //是否开启动画
              animationDurationUpdate: 1000, //过渡动画的时长
              animationEasingUpdate: 'cubicInOut' ,//过渡动画的缓动效果

              //散点结束
            },
            // 柱状
            {
              type: 'bar3D',
              coordinateSystem: "geo3D",
              // data: [[111.142701, 21.463603, 100], [111.142701, 22.463603, 200], [111.142701, 24.463603, 210], [111.142701, 27.463603, 230]],//柱状
              data: this.bar3DData || [],
              //柱体的样式
              itemStyle: {
                color: this.option.emphasisColor || '#faf602',
                opacity: 0.8,
                borderWidth: 2,
                borderColor: '#e51717'
              },
              //标签
              label: {
                show: true,
                position: 'right',
                // formatter   高亮区数据
                formatter(params) {
                  console.log(params)
                  return params.value[2]
                }
              },
              barSize: this.option.barSize || 1,
              minHeight:this.option.minHeight||1,
              // 高亮
              emphasis: {
                itemStyle: {
                  color: this.option.emphasisColor || '#51e528',
                  opacity: 0.8,
                  borderWidth: 2,
                  borderColor: '#e51717'
                },
                label: {
                  show: true,
                  position: 'right',
                  // formatter   高亮区数据
                  textStyle: {
                    color: '#131212',
                    backgroundColor: '#fff'
                  },
                  formatter(params) {
                    console.log(params)
                    return params.value[2]
                  }
                }
              },
              //动画
              animation: true,
              animationDurationUpdate: 500,
              animationEasingUpdate: 'cubicOut',
            },
            // 飞线分布
            {
              name: "typeOne",
              type: 'lines3D',//飞线
              // type: 'lines3D',//飞线
              coordinateSystem: "geo3D",
              data: this.option.lines3DShow ? this.jangshuData:[],
              // data: this.jangshuData||[],
              polyline: true, //飞线图是否多线段
              effect: {//飞线的尾迹特效。
                show: true,//是否显示尾迹特效，默认不显示。
                period: 2,//尾迹特效的周期。
                constantSpeed: this.option.constantSpeed || 10,//轨迹特效的移动动画是否是固定速度
                trailWidth: this.option.trailWidth || 10,//宽度。
                trailLength: this.option.trailLength || 3,//尾迹的长度
                trailColor: this.option.trailColor ,
                // trailColor: this.option.trailColor || '#faee07',
              },
              // blendMode: 'lighter',//注意：此处是显示叠加高亮效果的但是在散点图时不能通用
              // // //飞线end
            },
            {
              type  :'map3D',
              name:"map",
              map: 'china',
              groundPlane:{
                show:true,
                color : '#e01010',
              },
              label:{
                show:true,
                // formatter:
              }

            }

          ]
        };

//江苏区域轮廓飞线图
 guijiData() {
      let coordinatesArr = [];
      jangshu.features.forEach(tempData => {
        let geometry = [];
        tempData.geometry.coordinates[0].forEach(coordinates => {
          coordinates.forEach(coordinate => {
            geometry.push(coordinate)
          })
        })
        coordinatesArr.push(geometry);
      })
      let result = [];
      for (let i = 0; i < coordinatesArr.length; i++) {
        let tempIArr = [];
        let arrOne = coordinatesArr[i];
        for (let j = 0; j < arrOne.length; j++) {
          let coordinatesArrTemp = [];
          coordinatesArrTemp.push(arrOne[j]);
          coordinatesArrTemp.push(arrOne[j + 1]);
          tempIArr.push(coordinatesArrTemp)
        }
        result.push(tempIArr)
      }
      let arrResult = [];
      for (let i = 0; i < result.length; i++) {
        for (let j = 0; j < result[i].length - 1; j++) {
          arrResult.push(result[i][j]);
        }
      }
      this.jangshuData = arrResult;
      return arrResult;
    },

江苏省.JEOJSON

https://download.csdn.net/download/qq_43557302/86399879

秃头小宝贝(柚子君)
关注
  • 7
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
echarts 3d地图
qq_27007423的博客
05-27 4382
echarts 3d地图 var option = { title: { show:false, text: '地图', left: 'center', top: 20, textStyle:{ color:'#fff', fontSize:24 } }, geo3D: { map: 'guangdong', viewControl: { center: [-1
echartsGl 3d地图
02-25
前端开发展示
echarts 5.0——3d中国地图和飞线
为技术而生
03-24 3553
echarts 5.0的版本样式语法与4.0及以下的语法有个别差异，使用旧语法浏览器会警告提示。3d地图常用的实现方法有两种。一种是使用GL来实现，一种是使用叠层和阴影来实现，本文将使用叠层和阴影来实现。
echarts地图实现3d效果
最新发布
weixin_38999134的博客
06-07 296
【代码】echarts地图实现3d效果。
记录使用Echarts-gl实现3D地图
LiuQjie的博客
06-05 7576
使用3D改变地图展示方向、标记坐标点显示
【3d地图】vue中使用echarts geo3D
热门推荐
m0_68324632的博客
06-24 1万+
想必对于一个前端来说，大家对echarts并不陌生，本次文章主要记录了我在使用echarts 渲染3d地图过程中的一点心得，本文代码包含详细的配置项注释~
echarts 自定义3D城市地图
weixin_43934967的博客
12-08 1967
这个需求第一方案想到的是使用高德地图JS API中”区域掩模“加上”立面体“实现，最后没有采用高德地图实现的原因是，高德地图无法实现透明天空，角度变换时，天空颜色无法去掉，不纠结天空的可以采用，省时省力并且自定义空间很大，最终采用echarts来实现。1、geo3D配合scatter3D，geo3D的regionHeight过高，会盖住scatter3D，解决方案是降低regionHeight值，5以内貌似没有问题，另一个是降低itemStyle的透明度，opacity设置低透明度。
vue组件，echarts制作3D地图，可点击凸起，hover高亮，可做飞鱼线（带天空盒子）
qq_45234022的博客
11-16 3987
整理了一下Echarts做3D地图的vue组件
echarts实现中国地图记录篇之2D，3D地图
weixin_42632751的博客
02-22 3959
本文主要讲述了echarts 2D(平面)、3D地图的实现方式，以及实现过程中遇到的各种坑。本文主要讲述并实现了 echarts2D平面有标记点中国地图、echarts无标记点中国地图；有贴图的3Decharts中国地图；有标记点的echarts 3D地图；提供了 3D地图如何添加点击事件，3D地图如何在点击的时候高亮某块，3D点击setOption()时贴图丢失等问题的解决方案。
echarts 3D地图，地图区域点击触发事件
10-16
在3D地图上添加数据通常涉及设置 `data` 属性，它可以是包含地理位置和对应值的数组。例如，如果我们有各国的 GDP 数据，可以这样配置： ```javascript series: [{ type: 'map3d', mapType: 'world', events: { ...
echarts3d地图散点数据陷进地图的多次试验后终于成功
06-13
标题“echarts3d地图散点数据陷进地图的多次试验后终于成功”揭示了我们正在处理一个关于Echarts 3D地图的问题，即如何使数据点下陷到地图表面，以便更直观地展示数据与地理区域的关系。描述中提到的“数据中的...
基echarts实现的地图大数据图表可视化，精美
03-04
基echarts实现的地图，大数据数据可视化，利用ets做出大数据图表展示，可以运行在PC和移动设备，兼容主流浏览器，提供非常多的图表（折线图，柱状图，散点图，饼图，K线图）
echarts3D地图数据(含全国和省js以及全国、省、地市级json).zip
03-30
这个压缩包"echarts3D地图数据(含全国和省js以及全国、省、地市级json).zip"包含了用于构建 ECharts 3D 地图的数据资源，主要包括 JavaScript 文件和 JSON 数据，这些资源可以帮助开发者创建具有详细地理信息的3D...
echarts3d地图散点数据陷进地图的解决方案
10-25
本主题聚焦于“echarts3d地图散点数据陷进地图的解决方案”，这是一个在使用ECharts进行3D地图可视化时可能会遇到的问题。当数据点分布于地图上时，有时会出现数据点“下陷”至地图内部的现象，这通常是由于数据处理...
地级市echarts 3d 地图数据可视化
08-31
本文将深入探讨如何利用ECharts实现地级市3D地图上的3D柱形图数据可视化，以及学习过程中可能遇到的关键知识点。 首先，我们要理解“地级市3D地图”的概念。地级市是指中国行政级别中的一个层级，通常包含若干个...
vue使用echarts与echarts-gl实现3d地图与 3d柱状图
weixin_48464215的博客
07-17 6287
主要使用vue+echarts+echarts-gl实现3d地图效果，以及3d柱状图效果
echart 三维可视化地图_ECharts-X
weixin_39602280的博客
02-23 1375
软件简介ECharts-X是 ECharts 团队推出的全新 3D 可视化库，它是基于ECharts 的扩展，底层深度整合了 WebGL 库QTEK和 Canvas2D库ZRender。特色混搭ECharts 里的混搭功能很强大，作为 ECharts 的扩展，ECharts-X 自然也需要支持。ECharts-X 能跟 ECharts中的折柱饼地图等图表混搭，可以有更丰富的可视化效果，同时 ECh...
laravel（三）批量添加数据, 获取新增数据id
PHP,Java--在世悟空的博客
12-06 2832
$array=[ [ 'deptno' => 111, 'dname' => 'dname', 'loc' => 'loc', ], [ 'deptno' => 112, 'dname' => 'dname', 'loc' => 'loc', ] ]; $find=[ 'deptno' => 111, 'dname' => 'dname', 'loc' => 'loc', ]; //获取新增数据id $a=.
使用echarts+echarts-gl绘制3d地图
Ma10110517的博客
09-29 1万+
使用 http://datav.aliyun.com/portal/school/atlas/area_selector 这个工具获取要显示的地图数据。首先在项目中安装echarts与echarts gl（echers gl用于3d）npm install echarts --save //echarts安装命令。npm install echarts-gl //echarts-gl安装命令。安装完成后在package.json中查看有没有安装成功。这样就生成了一个3d地图，如下图：（以山西地图为例）
ECharts3D地图
07-29
ECharts3D地图是一种基于ECharts开发的可视化组件，它可以用于展示地理数据在三维地图上的分布情况。通过ECharts3D地图，用户可以将各种地理数据以3D的形式呈现，包括地区的人口、经济指标、气候数据等。这样的可视化效果可以帮助用户更直观地理解和分析地理数据。ECharts3D地图支持各种常见的地图投影方式，如平面投影、柱状投影、球面投影等，用户可以根据需求选择合适的投影方式。同时，ECharts3D地图还支持交互功能，用户可以通过鼠标滚动、拖拽等操作与地图进行交互，进一步深入地了解地理数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值