#yyds干货盘点#3d平面地图绘制(线条版)总结

1.获取地理数据

function getMapData() {
 return new Promise((resolve, reject) => {
   $.ajax({
     url: 'map-data/china.json',
     type: 'get',
     success: function (res) {
       resolve(res)
     }
   })
 })
}

2.绘制线条方法

/**
* 绘制平面的line
*/
function drawLinePlane(pos) {
 const geo = new THREE.Geometry()
 const shape = new THREE.Shape();
 const lineMaterial = new THREE.LineBasicMaterial({
   color: '#bb3'
 })
 for (let i = 0; i < pos.length; i++) {
   if (i === 0) {
     shape.moveTo(pos[0][0], pos[0][1])
   }
   shape.lineTo(pos[i][0], pos[i][1])
 }
 var points = shape.getPoints()
 geo.setFromPoints(points)
 var mesh = new THREE.Line(geo, lineMaterial)
 return mesh
}

3.绘制地图方法

/**
* 绘制地图
*/
async function drawMap() {
 const res = await getMapData()
 const group = new THREE.Group()
 res.features.forEach(item => {
   var length = item.geometry.coordinates.length
   // 获取每个区域的坐标数据
   var coordinates = item.geometry.coordinates
   // 循环坐标数据, 进行绘制
   coordinates.forEach(polygon => {
     polygon.forEach(p => {
       var mesh = drawLinePlane(p)
       group.add(mesh)
     })
   })
 })
 scene.add(group)
}

4. 效果

5.存在的问题

• 绘制出来的图并不在3d坐标轴的原点上
• 内蒙古区域的边界线没有绘制出来

6.问题解决

1. 需要用到墨卡托投影转换坐标
2. 内蒙古边界线没有绘制出来是因为,geojson数据有个对象的数据结构与其他不一致, 所以可以手动该数据,要么代码里加判断

7.需要改动的地方如下

// 首先需要引入d3-geo.v1.min.js这个文件
<script src="js/d3-geo.v1.min.js"></script>

8.最终的效果