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', //字体边框颜色，注意：使用此属性需要设置borderWidth
fontFamily: '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文章来源：https://www.toymoban.com/news/detail-428151.html
scatter3D Documentation - Apache EChartshttps://echarts.apache.org/zh/option-gl.html#series-scatter3D文章来源地址https://www.toymoban.com/news/detail-428151.html
到了这里，关于使用echarts实现3D地图和需要注意的点的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
