3d球面地图绘制(线条版)总结

1.地理坐标转三维坐标方法

/**
• 地理坐标转三维坐标
• @param radius
• @param lng
• @param lat
• @returns {*}
*/
WtThree.prototype.geographicToVector = (radius, lng, lat) => {
  let share = Math.PI / 180
  let phi = (90 - lat) * share
  let theta = (90 + lng) * share
  // Spherical: 返回一个点的球坐标
  let points = new THREE.Spherical(radius, phi, theta)
  // setFromSpherical: 从球坐标s中设置该向量
  return new THREE.Vector3().setFromSpherical(points)
}

2.根据世界坐标点绘制line

/**
* 绘制line
*/
function drawLine(pos, material) {
 const geo = new THREE.Geometry()
 pos.forEach(p => {
     geo.vertices.push(wt.geographicToVector(R, p[0], p[1]))
 })
 return new THREE.Line(geo, material)
}

3.地图绘制方法

/**
* 绘制地图
*/
async function drawMap() {
 await loadFont()
 const res = await getMapData()
 const lineGroup = new THREE.Group()
 const txtGroup = new THREE.Group()
 console.log('res', res)
 res.features.forEach(item => {
     var length = item.geometry.coordinates.length
     // 获取每个区域的坐标数据
     var coordinates = item.geometry.coordinates
     // 1.循环坐标数据, 进行绘制
     // if(item.properties.name === '内蒙古自治区') { // 北京市 山西省
     coordinates.forEach(polygon => {
         // tips: 添加该判断的原因是, 内蒙古区域的数据结构和其他的结构不一样,少了一层;
         // 或者我们直接修改china.json数据也是可以的, 添加一层
         if (polygon.length > 1) {
             polygon = [polygon] // 再包一层, 保持和其他的数据结构一致
         }
         /**
            * 最终: coordinates结构如下:
            * [
            *       [
            *           [
            *               [110, 220], [220,330], [440,550]...
            *           ]
            *       ]
            * ]
         */
         /**
            * polygon的结构如下:
            * [
            *       [
            *           [110, 220], [220,330], [440,550]...
            *       ]
            * ]
            * 
         */

         polygon.forEach(p => {
             const lineMesh = drawLineSphere(p)
             lineGroup.add(lineMesh)
         })
     })
     // }
     // 2.绘制区域名称
     if (item.properties.center) { // 这个地方需要加个判断, 因为有一条数据是没有center这个属性的,最后一条数据是没有这个属性的
         const [x, y] = projection(item.properties.center)
         const name = item.properties.name
         const pos = new THREE.Vector3(x, -y, 2)
         const txtMesh = drawTxt(name, pos)
         txtGroup.add(txtMesh)
     }
 })
 // 添加线模型
 scene.add(lineGroup)
 // 添加文字模型
 scene.add(txtGroup)
}