echarts实现3d地图有两种方法

一种是map3D

一种是geo3D + series中的内容（比如bar3D、scatter3D）

具体配置Documentation - Apache EChartshttps://echarts.apache.org/zh/option-gl.html#series-bar3D.coordinateSystem中的GL配置中

需要强调的是：map3D可以使用 this.chart.on('click', 回调函数);方法获取点击内容，而geo3D是不可以的。

所以我们如果想用点击事件，并且还想在地图上做一些散点，圆柱。可以map3D和geo3D同时使用，将geo3D中show属性设为false隐藏就可以了

一、注册地图

1、注册地图，使用echarts.registerMap(mapName,opt)注册地图

参数：

mapName

地图名称，在 geo 组件或者 map 图表类型中设置的 map 对应的就是该值。

opt
- geoJSON 可选。GeoJson 格式的数据，具体格式见 GeoJSON。可以是 JSON 字符串，也可以是解析得到的对象。这个参数也可以写为 geoJson，效果相同。
- svg 可选。从 v5.1.0 开始支持SVG 格式的数据。可以是字符串，也可以是解析得到的 SVG DOM 对象。更多信息参见 SVG 底图。
- specialAreas 可选。将地图中的部分区域缩放到合适的位置，可以使得整个地图的显示更加好看。只在 geoJSON 中生效，svg 中不生效。

2、geojson可以在阿里的那个生成

DataV.GeoAtlas地理小工具系列

但是需要注意一点：阿里生成的china数据在map3d和geo3d上是无法显示名称的，但是省份或者市是可以的。这个地方实在太坑了！因为这个问题找了半天时间，一定要注意！

二、配置地图

配置地图的时候最好还是按着官方文档配置，map3D和平面地图的配置有略微不同的。

这里说一下option中比较常用的map3D和geo3D配置

1、viewControl对象：用于鼠标的旋转，缩放等视角控制。

viewControl: {alpha: 70, //视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。beta: 5 //视角绕 y 轴，即左右旋转的角度。
},
top: 0, //组件的视图离容器四个方向的距离。
left: 0,
right: 0,
bottom: 0,
center: [0, 0, 0] //视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。

2、label对象：标签的相关设置。

label: {show: true, //是否显示标签。formatter: params => { //标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n换行。return params.name;},textStyle: { //标签的字体样式。color: '#fff', //字体颜色borderWidth: 1,    //字体边框宽度borderColor: 'red',   //字体边框颜色，注意：使用此属性需要设置borderWidthfontFamily: 'sans-serif', //文字的字体系列。fontSize: '12'，//文字的字体大小。fontWeight: 500 //文字字体的粗细。},emphasis: { //鼠标悬停时候的样式show: true,textStyle: {color: '#fff'}}
},

3、itemStyle对象: 三维图形的视觉属性，包括颜色，透明度，描边等。

itemStyle: {color: '#387BFF', //图形的颜色。地图中就是板块的颜色opacity: 1,    //透明度borderColor: '#fff', //边框颜色borderWidth: 0.5, //边框宽度emphasis: {   //鼠标悬停的样式color: '#7BA8FF',borderColor: '#fff',borderWidth: 0.5}
},

三、配置散点图、三维柱状图

如果需要使用scatter3D、bar3D就需要geo3D配合使用

bar3D Documentation - Apache EChartshttps://echarts.apache.org/zh/option-gl.html#series-bar3D

scatter3D Documentation - Apache EChartshttps://echarts.apache.org/zh/option-gl.html#series-scatter3D

使用echarts实现3D地图和需要注意的点相关推荐

echarts 渲染3d地图
与渲染2d地图类似 echarts 渲染3d地图要先安装依赖 echarts-gl npm install echarts-gl 但是常常依赖安装失败,这往往是因为安装的这个依赖的版本太高造成的可 ...
echarts——实现3D地图+3D柱状图效果——粗糙代码记录——技能提升
最近看到同事在弄下面的这个图,这个图是从网上看到的,是某个网站的收费项目: 收费模板:￥29.9元购买,且必须是高级版+尊享版才能够购买这个... 死贵!!! 所以,最后的决定是通过echarts中的 ...
Echarts实现3d 地图实现飞线效果
Echarts实现3d 地图实现飞线效果注意:重点关注data中的数据格式在lines3D中symbol不能设置指定样式,echarts官网也没有这个参数,所以对于lines3D飞线如何实现飞机航 ...
echarts实现3D地图，轮播功能、背景图片、鼠标悬浮展示数据，附源码！
echarts实现3D地图,轮播功能.背景图片.鼠标悬浮展示数据,附源码! 一.图片效果二. 代码一.图片效果由于本地图片上传失败,无法展示完整的,不过是在此图的基础上加了轮播和底纹二. 代码 ...
html引入echart地图点击,基于echarts实现3D地图的定时高亮和点击事件
技术选型文章所选技术栈:vue.echarts.echarts-gl 安装Vue和echarts 1.安装echarts和echarts-alnpm i echarts --save npm i e ...
echarts使用3d地图,解决塌陷
echarts使用3d地图打点先上图 1.要提前准备好茂名市.json文件,在使用的时候使用axios异步加载,如果是加载3d省级或者省以上可以参考这篇的引入方式 2.还要安装一些依赖包 1.依赖 ...
简单聊聊Echarts伪3D地图实现的相关配置
知识和技能真的是用进废退,还是得多实践,才不至于遗忘. 目录前言二.实现原理三.从0开始实现 1.目录结构 2.地图JSON数据获取 3.具体实现,重头戏 3.一些常见问题的解决方法总结前言 ...
使用echarts的3D地图中的map3D与scatter3D混合使用时出现坐标位移的情况
前段时间同事用echarts的geo3D去做个3D地图,大约是这个效果: 然后设置了地图的的viewControl:(默认是100) viewControl: { distance: 125 //地图 ...
echarts绘制3D地图
使用echarts和echarts-gl绘制3D地图,下面是一个demo演示,echarts版本4.6.0,echarts-gl版本1.1.2,demo启动前先自行安装,至于背景嘛,大家就自行放个背景 ...

使用echarts实现3D地图和需要注意的点