javascript - Google Maps 或 Cesium 在 map 上渲染动态几何图形

Question

我现在真的很困惑，我确实需要建议。

我当前的目标是获得随机建筑物的卫星 View ，并具有 Google map 的典型 RoadMap\3d 效果:

并且能够在其上使用 Three.js，渲染与该 map 重叠的多边形。

我按照这个 git 存储库中的示例进行操作:

ubilabs/google-maps-api-threejs-layer

但我可以在 map 上包含粒子...我无法在其上添加多边形、样条线等几何图形。

我不知道该怎么做……也许铯就是答案？

但是Cesium在建筑物上没有相同的“3d”选项......

如有任何帮助，我们将不胜感激!

谢谢!

Answer 1

对于多边形、线条和标记，您可以使用谷歌地图 v3

您可以查看此链接 google 开发者链接进行首次评估

我说的是原生多边形、折线、标记。或谷歌地图v3的原生绘图工具 https://developers.google.com/maps/documentation/javascript/examples/drawing-tools和 https://developers.google.com/maps/documentation/javascript/examples/polygon-simple

但更有用的是这个链接 Dyer http://johndyer.name/drawing-3d-objects-and-building-on-google-maps/

通过适当的功能，您可以构建 3D 对象

function drawExcrudedShape(map, coordinates, height, strokeColor, strokeOpacity, strokeWeight, fillColor, fillOpacity) {

var pairs = [],
    polygons = [];

// build line pairs for each wall
for (var i=0; i<coordinates.length; i++) {

    var point = coordinates[i],
        otherIndex = (i == coordinates.length-1) ? 0 : i+1,
        otherPoint = coordinates[otherIndex];

    pairs.push([point, otherPoint]);
}

// draw excrusions
for (var i=0; i<pairs.length; i++) {

    var first = pairs[i][0],
        second = pairs[i][1],
        wallCoordinates =  [
            new google.maps.LatLng(first[0],first[1]),
            new google.maps.LatLng(first[0]+height,first[1]),
            new google.maps.LatLng(second[0]+height,second[1]),
            new google.maps.LatLng(second[0],second[1])                                 
        ],
        polygon = new google.maps.Polygon({
            paths: wallCoordinates,
            strokeColor: strokeColor,
            strokeOpacity: strokeOpacity, 
            strokeWeight: strokeWeight,
            fillColor: fillColor,
            fillOpacity: fillOpacity
            zIndex: zIndexBase+i
        });

    polygon.setMap(map);

    polygons.push(polygon);
}       

return polygons;

}