先看效果

废话少说直接上干货，整体思路通过高德地图的GLCustomLayer图层加载Three三维管线。

第一步将管线经纬度转成三维空间经纬度

GLCustomLayer = new (window as any).AMap.GLCustomLayer({
    zIndex: 120,
    visible: true,
    init: (gl: any) => {
      initThree(gl);
      // burialDepth 为管线高度 即三维空间的Z轴坐标
      let coordinates = [
          [126.619536,45.679374],
          [126.626016,45.680277],
           126.62545,45.682352]
      ]
      const paths = map.customCoords.lngLatsToCoords(coordinates).map((k: Array<number|string>) => {
          let burialDepth = v.properties.burialDepth ? Math.abs(v.properties.burialDepth) : 0;
          return new THREE.Vector3(k[0], k[1], burialDepth);
        });

      let CurvePath = new THREE.CatmullRomCurve3(paths);
      const pathToUMapping = TubePath.pathToU