js使用echarts geo3D

以下是使用echarts geo3D的js代码示例：

1. 引入必要的资源

import * as echarts from 'echarts';
import "echarts-gl"; // 3D地图插件
import geoJson from "./zhejiang.json"; // 省份的json格式

2. 创建一个有固定宽高大小的div元素

<div id="main" style="width: 800px;height:600px;"></div>

3. 初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));```

4. 配置地图参数

echarts.registerMap('zhejiang', geoJson); // 注册地图
var option = {
geo3D: {
map: 'zhejiang', // 地图类型
shading: 'lambert', // 着色效果
environment: '#000', // 环境颜色
light: { // 光照阴影
main: {
intensity: 1.2,
shadow: true,
shadowQuality: 'high',
alpha: 30
},
ambient: {
intensity: 0.3
}
},
viewControl: { // 视角控制
autoRotate: true,
autoRotateAfterStill: 10,
distance: 200,
minDistance: 40,
maxDistance: 400,
alpha: 20,
beta: 10
},
itemStyle: { // 地图区域的多边形 图形样式
color: '#fff',
opacity: 0.8,
borderWidth: 0.4,
borderColor: '#000'
},
label: { // 地图区域的多边形 标签样式
show: true,
textStyle: {
color: '#000',
fontSize: 10,
borderWidth: 0.4,
borderColor: '#000'
}
},
emphasis: { // 高亮样式
itemStyle: {
color: '#f00'
}
},
postEffect: { // 后期处理特效
enable: true,
SSAO: {
enable: true,
radius: 2,
intensity: 1.5,
quality: 'high'
}
}
},
series: [] // 数据系列
};

5. 渲染地图

myChart.setOption(option);

6. 添加散点和路径

myChart.setOption({
series: [{
type: 'scatter3D', // 散点图
coordinateSystem: 'geo3D',
symbolSize: 5,
itemStyle: {
color: '#fff'
},
data: [
[119.957202, 30.058456, 0],
[120.129997, 30.259244, 0],
[120.219375, 30.259244, 0],
[120.308752, 30.259244, 0],
[120.39813, 30.259244, 0],
[120.487507, 30.259244, 0],
[120.576884, 30.259244, 0],
[120.666261, 30.259244, 0],
[120.755638, 30.259244, 0],
[120.845015, 30.259244, 0],
[120.934392, 30.259244, 0],
[121.023769, 30.259244, 0],
[121.113146, 30.259244, 0],
[121.202523, 30.259244, 0],
[121.2919, 30.259244, 0],
[121.381277, 30.259244, 0],
[121.470654, 30.259244, 0],
[121.560031, 30.259244, 0],
[121.649408, 30.259244, 0],
[121.738785, 30.259244, 0],
[121.828162, 30.259244, 0],
[121.917539, 30.259244, 0],
[122.006916, 30.259244, 0],
[122.096293, 30.259244, 0],
[122.18567, 30.259244, 0],
[122.275047, 30.259244, 0],
[122.364424, 30.259244, 0],
[122.453801, 30.259244, 0],
[122.543178, 30.259244, 0],
[122.632555, 30.259244, 0],
[122.721932, 30.259244, 0],
[122.811309, 30.259244, 0],
[122.900686, 30.259244, 0],
[122.990063, 30.259244, 0],
[123.07944, 30.259244, 0],
[123.168817, 30.259244, 0],
[123.258194, 30.259244, 0],
[123.347571, 30.259244, 0],
[123.436948, 30.259244, 0],
[123.526325, 30.259244, 0],
[123.615702, 30.259244, 0],
[123.705079, 30.259244, 0],
[123.794456, 30.259244, 0],
[123.883833, 30.259244, 0],
[123.97321, 30.259244, 0],
[124.062587, 30.259244, 0],
[124.151964, 30.259244, 0],
[124.241341, 30.259244, 0],
[124.330718, 30.259244, 0],
[124.420095, 30.259244, 0],
[124.509472, 30.259244, 0],
[124.598849, 30.259244, 0],
[124.688226, 30.259244, 0],
[124.777603, 30.259244, 0],
[124.86698, 30.259244, 0],
[124.956357, 30.259244, 0],
[125.045734, 30.259244, 0],
[125.135111, 30.259244, 0],
[125.224488, 30.259244, 0],
[125.313865, 30.259244, 0],
[125.403242, 30.259244, 0],
[125.492619, 30.259244, 0],
[125.581996, 30.259244, 0],
[125.671373, 30.259244, 0],
[125.76075, 30.259244, 0],
[125.850127, 30.259244, 0],
[125.939504, 30.259244, 0],
[126.028881, 30.259244, 0],
[126.118258, 30.259244, 0],
[126.207635, 30.259244, 0],
[126.297012, 30.259244, 0],
[126.386389, 30.259244, 0],
[126.475766, 30.259244, 0],
[126.565143, 30.259244, 0],
[126.65452, 30.259244, 0],
[126.743897, 30.259244, 0],
[126.833274, 30.259244, 0],
[126.922651, 30.259244, 0],
[127.012028, 30.259244, 0],
[127.101405, 30.259244, 0],
[127.190782, 30.259244, 0],
[127.280159, 30.259244, 0],
[127.369536, 30.259244, 0],
[127.458913, 30.259244, 0],
[127.54829, 30.259244, 0],
[127.637667, 30.259244, 0],
[127.727044, 30.259244, 0],
[127.816421, 30.259244, 0],
[127.905798, 30.259244, 0],
[127.995175, 30.259244, 0],
[128.084552, 30.259244, 0],
[128.173929, 30.259244, 0],
[128.263306, 30.259244, 0],
[128.352683, 30.259244, 0],
[128.44206, 30.259244, 0],
[128.531437, 30.259244, 0],
[128.620814, 30.259244, 0],
[128.710191, 30.259244, 0],
[128.799568, 30.259244, 0],
[128.888945, 30.259244, 0],
[128.978322, 30.259244, 0],
[129.067699, 30.259244, 0],
[129.157076, 30.259244, 0],
[129.246453, 30.259244, 0],
[129.33583, 30.259244, 0],
[129.425207, 30.259244, 0],
[129.514584, 30.259244, 0],
[129.603961, 30.259244, 0],
[129.693338, 30.259244, 0],
[129.782715, 30.259244, 0],
[129.872092, 30.259244, 0],
[129.961469, 30.259244, 0],
[130.050846, 30.259244, 0],
[130.140223, 30.259244, 0],
[130.2296, 30.259244, 0],
[130.318977, 30.259244, 0],
[130.408354, 30.259244, 0],
[130.497731, 30.259244, 0],
[130.587108, 30.259244, 0],
[130.676485, 30.259244, 0],
[130.765862, 30.259244, 0],
[130.855239, 30.259244, 0],
[130.944616, 30.259244, 0],
[131.033993, 30.259244, 0],
[131.12337, 30.259244, 0],
[131.212747, 30.259244, 0],
[131.302124, 30.259244, 0],
[131.391501, 30.259244, 0],
[131.480878, 30.259244, 0],
[131.570255, 30.259244, 0],
[131.659632, 30.259244, 0],
[131.749009, 30.259244, 0],
[131.838386, 30.259244, 0],
[131.927763, 30.259244, 0],
[132.01714, 30.259244, 0],
[132.106517, 30.259244, 0],
[132.195894, 30.259244, 0],
[132.285271, 30.259244, 0],
[132.374648, 30.259244, 0],
[132.464025, 30.259244, 0],
[132.553402, 30.259244, 0],
[132.642779, 30.259244, 0],
[132.732156, 30.259244, 0],
[132.821533, 30.259244, 0],
[132.91091, 30.259244, 0],
[133.000287, 30.259244, 0],
[133.089664, 30.259244, 0],
[133.179041, 30.259244, 0],
[133.268418, 30.259244, 0],
[133.357795, 30.259244, 0],
[133.447172, 30.259244, 0],
[133.536549, 30.259244, 0],