CesiumJS：如何拉伸“ LineString” GeoJSON數據？

Question

我剛剛開始探索CesiumJS，我想擴展我的GeoJSON建築數據。

到目前為止，據我了解，extrudeHeight似乎僅對多邊形有效。 但是，我的數據為“ LineString”格式。

下面的代碼顯示了到目前為止我已經嘗試過的內容。 我可以知道我在做什么錯嗎？ 我將不勝感激任何形式的幫助！

dataSource1.loadUrl('data/buildings.json').then(function(loadedDatasource) {
            viewer.dataSources.add(loadedDatasource);
            var entities = loadedDatasource.entities.entities;
            var colorHash = {};
            for (var i = 0; i < 1; i++) {
                var entity = entities[i];
                entity.polyline = new Cesium.ColorMaterialProperty.fromColor(new Cesium.Color(1.0, 1.0, 1.0, 0));
                entity.polyline.outlineColor = new Cesium.ConstantProperty(new Cesium.Color(1, 1, 1, 0.48));
                entity.polyline.outlineWidth = new Cesium.ConstantProperty(0.5);
                entity.polyline.outline = true;
                entity.polyline.extrudedHeight = new Cesium.ConstantProperty(entity.properties.buildingLevels * 5.0);
                entity.building = true;
            }
        }

GeoJSON的：

{"type":"Feature","geometry":{"type":"LineString","coordinates":[[103.8518324,1.2843096],[103.8522078,1.284276],[103.8522253,1.2842654],[103.8522361,1.2842455],[103.8522209,1.2840604],[103.8521175,1.2840652],[103.8521138,1.2840226],[103.8518128,1.2840482],[103.851781,1.2840535],[103.8517572,1.2840662],[103.8517338,1.2840891],[103.8517138,1.2841128],[103.8517016,1.2841443],[103.851698,1.2841847],[103.8517047,1.2842194],[103.8517208,1.2842492],[103.8517546,1.2842777],[103.851795,1.2842959],[103.8518285,1.2842935],[103.8518324,1.2843096]]},"properties":{"name":"Chevron House","height":"151","building":"yes","old_name":"Caltex House","wikidata":"Q2934405","addr:city":"Singapore","min_height":"16","addr:street":"Raffles Place","roof:colour":"#f9fdfe","addr:country":"SG","addr:postcode":"039803","building:colour":"#f9fdfe","buildingLevels":"33","addr:housenumber":"30","building:min_level":"3"}}

Answer 1

您可以使用turf.js將LineString轉換為Polygons

var line = {
  "type": "Feature",
  "geometry": {
    "type": "LineString",
    "coordinates": [ [ 0,0 ], [ 0,1 ], [ 1,1 ], [ 1,0 ] ]
  }
};

var polygon = turf.lineToPolygon(line);

或手動執行，因為geojson是非常簡單的格式：

var crd = line.geometry.coordinates;
var last = c.length - 1; 
if (crd[0][0] !== crd[last][0] || crd[0][1] !== crd[last][1]) {
    crd.push(crd[0]);
}
line.geometry.type = 'Polygon';
line.geometry.coordinates = [crd];

Answer 2

我認為您應該使用銫走廊，如下所示：

var json = {"type":"Feature","geometry":{"type":"LineString","coordinates":[[103.8518324,1.2843096],[103.8522078,1.284276],[103.8522253,1.2842654],[103.8522361,1.2842455],[103.8522209,1.2840604],[103.8521175,1.2840652],[103.8521138,1.2840226],[103.8518128,1.2840482],[103.851781,1.2840535],[103.8517572,1.2840662],[103.8517338,1.2840891],[103.8517138,1.2841128],[103.8517016,1.2841443],[103.851698,1.2841847],[103.8517047,1.2842194],[103.8517208,1.2842492],[103.8517546,1.2842777],[103.851795,1.2842959],[103.8518285,1.2842935],[103.8518324,1.2843096]]},"properties":{"name":"Chevron House","height":"151","building":"yes","old_name":"Caltex House","wikidata":"Q2934405","addr:city":"Singapore","min_height":"16","addr:street":"Raffles Place","roof:colour":"#f9fdfe","addr:country":"SG","addr:postcode":"039803","building:colour":"#f9fdfe","buildingLevels":"33","addr:housenumber":"30","building:min_level":"3"}};


var Corridor = viewer.entities.add({
        corridor : {
        positions : Cesium.Cartesian3.fromDegreesArray(json.geometry.coordinates.flat()),
        height : 100.0,
        extrudedHeight : json.properties.buildingLevels * 5.0,
        width : 1.0,
        cornerType: Cesium.CornerType.BEVELED,
        material : Cesium.Color.BLUE.withAlpha(0.5),
        outline : true, // height or extrudedHeight must be set for outlines to display
        outlineColor : Cesium.Color.WHITE
    }
});

工作實例