一、基本操作
现在有一个面状的geojson文件如【代码1】,要把这些加载到cesium中,并根据字段”height“的数值来拉伸为建筑体,具体加载代码如【代码2】的 addExtrudedGeoJson 函数:
{
"type": "FeatureCollection",
"name": "buildings",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "height": 20.0, "name": "1"}, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 115.944624760166278, 39.753675126731601 ], [ 115.945340064239119, 39.753685909600435 ], [ 115.945319025884046, 39.753227636185954 ], [ 115.945143706258364, 39.752898755738791 ], [ 115.94451255560584, 39.752505175434784 ], [ 115.94404971179398, 39.752968845146071 ], [ 115.944624760166278, 39.753416337372919 ], [ 115.944624760166278, 39.753675126731601 ] ] ] ] } },
{ "type": "Feature", "properties": { "height": 10.0, "name": "2"}, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 115.942418474291273, 39.753541617736502 ], [ 115.942425381754404, 39.75386024544769 ], [ 115.942742860730093, 39.753853362887746 ], [ 115.942735953266961, 39.753534735176572 ], [ 115.942418474291273, 39.753541617736502 ] ] ] ] } },
{ "type": "Feature", "properties": { "height": 20.0, "name": "3"}, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 115.94226145161187, 39.753404206597899 ], [ 115.942584039723144, 39.753409598053736 ], [ 115.942573520545594, 39.753094197177461 ], [ 115.943285318225946, 39.753088805696933 ], [ 115.943295837403497, 39.752875841878662 ], [ 115.942268464396889, 39.752878537627296 ], [ 115.94226145161187, 39.753404206597899 ] ] ] ] } },
{ "type": "Feature", "properties": { "height": 6.0, "name": "4"}, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 115.941499481900223, 39.752061152816218 ], [ 115.941503105982733, 39.75217399637183 ], [ 115.941794384663865, 39.752164641668614 ], [ 115.941790760581355, 39.752051798113001 ], [ 115.941499481900223, 39.752061152816218 ] ] ] ] } },
{ "type": "Feature", "properties": { "height": 13.0, "name": "5"}, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 115.944432075199259, 39.754993682888582 ], [ 115.944596542404895, 39.754993682888582 ], [ 115.944596542404895, 39.754714460432268 ], [ 115.944432075199259, 39.754714460432268 ], [ 115.944432075199259, 39.754993682888582 ] ] ] ] } },
{ "type": "Feature", "properties": { "height": 14.0, "name": "6"}, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 115.944149643980651, 39.7550966817968 ], [ 115.944261848541089, 39.7550966817968 ], [ 115.944261848541089, 39.7551883342366 ], [ 115.944367040316479, 39.75518563857834 ], [ 115.944370546708996, 39.755056246858096 ], [ 115.944310938036296, 39.755058942521416 ], [ 115.944310938036296, 39.75496189857553 ], [ 115.944153150373168, 39.75496189857553 ], [ 115.944149643980651, 39.7550966817968 ] ] ] ] } },
{ "type": "Feature", "properties": { "height": 8.0, "name": "7"}, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 115.944351463420801, 39.755658202140218 ], [ 115.944122116880706, 39.755656856210962 ], [ 115.944121390969926, 39.755780551514036 ], [ 115.944350737510021, 39.755781897443285 ], [ 115.944351463420801, 39.755658202140218 ] ] ] ] } },
{ "type": "Feature", "properties": { "height": 20.0, "name": "8"}, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 115.944334705437285, 39.755492591560916 ], [ 115.944115099339299, 39.755500353808621 ], [ 115.944119340405848, 39.755620340198348 ], [ 115.944338946503848, 39.755612577950636 ], [ 115.944334705437285, 39.755492591560916 ] ] ] ] } }
]
}
▲ 代码1
/**
- 加载面geojson并拉伸高度
- @param {Cesium.Viewer} viewer :Cesium的Viewer
- @param {String} url :geojson文件的地址
- @param {String} exHeightFieldName :拉伸高度字段名称
*/
function addExtrudedGeoJson(viewer, url, exHeightFieldName) {
const promise = new Cesium.GeoJsonDataSource.load(url);
promise.then((datasource) => {
viewer.dataSources.add(datasource); // 加载这个geojson资源
const entities = datasource.entities.values;
for (let index = 0; index < entities.length; index++) {
const entity = entities[index];
entity.polygon.heightReference = Cesium.HeightReference.RELATIVE_TO_GROUND; // 贴地
entity.polygon.height = 0; // 距地高度0米
entity.polygon.extrudedHeightReference =Cesium.HeightReference.RELATIVE_TO_GROUND; //拉伸
entity.polygon.extrudedHeight = entity.properties[exHeightFieldName]; // 拉伸高度
entity.polygon.outline = true;
entity.polygon.outlineColor = Cesium.Color.BLACK;
}
});
}