高德3d立体线

Question

请问想做一种这样根据经纬度绘制立体的线，高德有什么好的解决方案吗

Answer 1

使用cesium的viewer.entities能实现，

    viewer = new Cesium.Viewer("thMap",{
          infoBox:false,
          geocoder: false,
          baseLayerPicker:false,
          navigationHelpButton: false,
          fullscreenButton:false, // 全屏功能
          //动画空间，控制视图动画播放速度
          animation: false,
          //时间轴控件
          timeline: false,
          terrainExaggeration: 1,
   })

   for (let i = 0; i < data.length; i++) {
         vies = viewer.entities.add({
            name: "name" + i,
            cid:'id',
            wall: {
                positions: Cesium.Cartesian3.fromDegreesArray(data[i].pos),
                material: Cesium.Color.fromCssColorString(data[i].color),
                minimumHeights:data[i].minimumHeights,
            },
          });
        }

数据格式为：

 let data = [
        {
          pos:[ 116.397128, 39.916527, 117.04532135937498, 39.758351786602866, 117.78140534374998, 39.4663583001527, 118.23499, 39.95192 ],
          minimumHeights:[3000,80000,5000,6000],
          color:'rgba(45, 196, 206, 0.5)'
        },
        {
          pos:[ 118.23499, 39.95192, 117.72181, 39.96455 ],
          minimumHeights:[3000,80000],
          color:'rgba(27, 187, 118, 0.5)'
        }
 ]

Answer 2

高德的话只能用mesh实现了，可以用他们的例子改一下

var map = new AMap.Map('container', {
    viewMode: '3D',
    showBuildingBlock: false,
    expandZoomRange: true,
    zooms: [3, 20],
    pitch: 50,
    zoom: 16.5,
    center: [116.250766, 39.932931]
});

var object3Dlayer = new AMap.Object3DLayer();
map.add(object3Dlayer);

var center_3d = map.lngLatToGeodeticCoord(map.getCenter());
var center =  center_3d.add(new AMap.Pixel(0, 0))
var height = 1600
var radius = 500

var bottomColor = [0, 0, 1, 0.9];

//添加一个圆柱体
var cylinder = new AMap.Object3D.Mesh();
var geometry = cylinder.geometry;
var path = []
var x = center.x, y = center.y
var count = 20
for (var i = 0; i < count; i += 1) {
  path.push([x, y]);
  geometry.vertices.push(x, y, 0); //底部顶点
  geometry.vertices.push(x, y, -height * Math.random()); //顶部顶点

  x += Math.random() * radius;
  y += Math.random() * radius;

  geometry.vertexColors.push.apply(geometry.vertexColors, bottomColor); //底部颜色
  //geometry.vertexColors.push.apply(geometry.vertexColors, bottomColor); //顶部颜色

  if(i){
    var bottomIndex = i * 2;
    var topIndex = bottomIndex + 1;
    var preBottomIndex = bottomIndex - 2;
    var preTopIndex = bottomIndex - 1;

    geometry.faces.push(bottomIndex, preTopIndex, preBottomIndex); //侧面三角形1
    geometry.faces.push(bottomIndex, topIndex, preTopIndex); //侧面三角形2
  }
}

cylinder.transparent = true; // 如果使用了透明颜色，请设置true
object3Dlayer.add(cylinder);