Cesium加载geojson矢量面+拉伸为建筑体+贴TIN地形

一、基本操作

   现在有一个面状的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;
    }
  });
}

▲   代码2

根据代码1的数据结构，拉伸高度的字段名称为”height"，则输入以下代码来调用函数即可加载出来面并贴地拉伸，效果如下图1

addExtrudedGeoJson(viewer, jsonUrl, "height")  // viewer和jsonUrl要根据自己的代码来修改

 图1 成功的情况

二、 可能的问题

1. 如果使用的是Cesium 1.61版本来加载的天地图地形服务，贴地效果便无法实现

2. 主要就是要配置entity.polygon的heightReference、height、extrudedHeightReference这三个属性，不然只能贴平地。如果加载了TIN地形却不配置这三个属性的话，拉伸的多面体会如下图2所示掉到地下去，其他就没啥了。

 图2 未设置extrudedHeightReference属性的情况

三、 官方实例

        更详细的信息配置可以参考官方demo， Geometry Height Reference - Cesium Sandcastle

图3  官方贴TIN地形demo

---

完结撒花