Threejs经纬度加到地图上

把经纬度转到墨卡托，再映射到 Three.js 世界坐标，才能把行政区轮廓挤出到地图上。

// 经纬度转墨卡托坐标公式
function lonLat2Mercator(E, N) {
  var x = E * 20037508.34 / 180;
  var y = Math.log(Math.tan((90 + N) * Math.PI / 360)) / (Math.PI / 180);
  y = y * 20037508.34 / 180;
  return {
    x: x, //墨卡托x坐标——对应经度
    y: y, //墨卡托y坐标——对应维度
  }
}
export { lonLat2Mercator };

经纬度 → 地图投影坐标 → Three.js 世界坐标。

import {lonLat2Mercator}  from './lonLat2Mercator.js';
// pointsArrs：一个行政区包含一个或多个轮廓，一个轮廓对应pointsArrs的一个元素
function ExtrudeMesh(pointsArrs, height) {
  var shapeArr = [];//轮廓形状Shape集合
  pointsArrs.forEach(pointsArr => {
    var vector2Arr = [];
    // 转化为Vector2构成的顶点数组
    pointsArr[0].forEach(elem => {
      // 经纬度转墨卡托坐标
      var coord = lonLat2Mercator(elem[0], elem[1])
      vector2Arr.push(new THREE.Vector2(coord.x, coord.y))
    });
    var shape = new THREE.Shape(vector2Arr);
    shapeArr.push(shape);
  });
  // MeshBasicMaterial:不受光照影响
  // MeshLambertMaterial：几何体表面和光线角度不同，明暗不同
  var material = new THREE.MeshLambertMaterial({
    color: 0x004444,
    // transparent: true,
    // opacity: 0.8,
  }); //材质对象
  var geometry = new THREE.ExtrudeBufferGeometry( //拉伸造型
    shapeArr, //多个多边形二维轮廓
    //拉伸参数
    {
      // depth：根据行政区尺寸范围设置，比如高度设置为尺寸范围的2%，过小感觉不到高度，过大太高了
      depth: height, //拉伸高度
      bevelEnabled: false //无倒角
    }
  );
  var mesh = new THREE.Mesh(geometry, material); //网格模型对象
  return mesh;
}
export { ExtrudeMesh };

GeoJSON 经纬度

↓

Web Mercator 投影

↓

平面 x / y

↓

THREE.Vector2

↓

THREE.Shape

↓

ExtrudeGeometry 拉伸

↓

3D 行政区 Mesh