3d地图

概况如下： 1、 THREE.Shape 绘制世界地图平面地图； 2、 THREE.ExtrudeGeometry 将绘制的平面沿着Z轴拉伸，实现3d效果； 效果图如下： 预览地址： three.js实现世界3d地图 初始化场景、相机、渲染器，设置相机位置，初始化光源，光源采用 HemisphereLight ，设置光源位置为场景中心位置，并将光源加入场景中。 1 // 初始化场景 2 var scene = new THREE.Scene(); 3 // 初始化相机，第一个参数为摄像机视锥体垂直视野角度，第二个参数为摄像机视锥体长宽比， 4 // 第三个参数为摄像机视锥体近端面，第四个参数为摄像机视锥体远端面 5 var camera = new THREE.PerspectiveCamera(20, dom.clientWidth / dom.clientHeight, 1, 100000); 6 // 设置相机位置，对应参数分别表示x，y，z位置 7 camera.position.set(0, 0, 500); 8 var renderer = new THREE.WebGLRenderer({ 9 alpha: true, 10 antialias: true 11 }); 12 // 设置光照 13 scene.add(new THREE.HemisphereLight

应业务需求，以3D形式展示某个城市的地图，并根据该城市下属区域车辆的多少，动态变幻区域颜色 大概效果如下（颜色随便给的，超丑 简单记录下吧） 以舟山市为例： 1.生成舟山市的geojson文件 查询链接： http://echarts.baidu.com/echarts2/doc/example/geoJson/china-main-city/522200.json 想要对应城市的geojson地图数据文件,直接用对应城市的区划代码的前六位替换掉链接后面的区划代码即可（可参考 https://blog.csdn.net/GRAY_KEY/article/details/80197527 的博客） 2.引入对应的echarts.js和 echarts-gl.js（下载地址： https://www.echartsjs.com/zh/download.html ） 代码如下：具体配置内容参考 https://www.echartsjs.com/zh/option-gl.html#globe // 初始化图表 var myChart = echarts.init(document.getElementById('main')); // JSON文件(地图数据)路径 var uploadedDataURL = "json/zhoushan.json"; var option = {}; /