GoogleMaps或Cesium在地图上渲染动态几何图形

Question

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

我目前的目标是获取一个随机建筑的卫星视图，以及谷歌地图的典型RoadMap \ 3d效果：

并且能够在其上使用three.js，渲染多边形与该地图重叠。

我跟着这个git repo的例子：

ubilabs/google-maps-api-threejs-layer

但是我可以在地图上包含粒子......我不能把它放在几何图形上，比如多边形，样条线等。

我不知道该怎么知道......也许Cesium就是答案？

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

任何帮助将不胜感激！

谢谢！

Answer 1

对于多边形，线条和标记，您可以使用google maps v3

您可以看到此链接谷歌开发人员链接进行第一次评估

我在谈论原生多边形，折线，标记。或谷歌地图v3的本地drwing工具 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;

}