GeoBuildingLayer - Cesium Documentation

new Cesium.GeoBuildingLayer(options)

Name Type Description

options

Object

optional 参数选项

Name Type Default Description

viewer Viewer optional 三维球对象

show Boolean true optional 图层是否显示

url String | Resource optional 建筑物模型数据的URL

shadows ShadowMode ShadowMode.ENABLED optional 阴影模式

maximumScreenSpaceError Number 16 optional 最大屏幕空间误差，值越大，则效率越高，相应的模型显示的越粗糙

maximumMemoryUsage Number 512 optional GPU最大缓存内存，单位MB。如果设置过大或过小都会增加程序崩溃的风险，一般设置显卡最大显存的50%体验比较好

skipLevelOfDetail Boolean true optional 是否应用跳过LOD层级，如果为true，可以优化加载效率，即在加载过程中可以跳过部分层级。

location Boolean true optional 加载完成后是否定位到模型位置

getFeatureInfoParameters Object optional WFS要素查询的参数

enableGetFeatures Boolean true optional 是否启用要素查询。如果建筑模型为倾斜模型或者精模时，若想单体查询则设置为true；如果为矢量面拉伸模型，即数据层面已做好了单体化，则可设置为false

enableHighlight Boolean true optional 是否启用单体高亮

selectedColor Color Color.fromBytes(50, 255, 50, 122) optional 鼠标左键选中时显示的颜色

hoveredColor Color Color.fromBytes(255, 50, 50, 122) optional 鼠标移动时显示的颜色

enableBuildingName Boolean false optional 是否启用建筑物名称显示

buildingNameMaxVisiableDistance Number 1500 optional 建筑物名称最大可见距离，相机的高程距离

autoRequestBuildingName Boolean false optional 当前enableBuildingName启用后，是否自动从getFeatureInfoParameters服务中请求建筑名称信息（建筑矢量底座面+标注名称）

buildingNameMapField String "name" optional 建筑名称在要素属性中的映射字段名称，默认为name

uniqueIdentifierMapField String | Number "OID" optional 建筑名称在要素属性中的映射字段名称，默认为OID

stratificationColor

Object

optional 应用分层设色，注意：倾斜摄影数据不能应用分层设色

Name	Type	Description
`property`	String	optional 应用分层设色的属性字段
`color`	Array	optional 分段设置分层设色的颜色，例如[[10, 'rgba(255,0,0,1)'],[50, 'rgba(128,0,128,0.5)']]，表明[10,50)设置为红色，大于等于50的设置为紫色，其余的是本来的颜色。

bloom

Object

optional 点击楼栋高亮时的辉光效果参数。此效果只适用于矢量面拉伸建筑等已经做了单体化功能的模型。

Name	Type	Default	Description
`enabled`	Boolean	`false`	optional 点击楼栋高亮时是否开启辉光效果，默认不开启
`strength`	Number	`1`	optional 辉光强度，值越大，辉光效果越明显
`radius`	Number	`0.1`	optional 辉光半径系数，值越大，辉光范围越大

wrapType Number Cesium.GeoBuildingLayer.WrapType.VOLUME optional 单体化的包围盒类型，默认是VOLUME，即紧贴建筑物。还有一种是BOX，即套盒模式。

buildingHeightMapField Number optional 单体化包围盒类型是BOX时，楼栋顶面高程映射字段名称。如果指定，则wfs查询要素时可以取到该值；如果不指定，则程序自动计算，但可能不是很准确。

buildingDeltaHeight Number 0 optional 增量高度，在楼栋顶面高程基础之上增加或减少的高度，用以适配真实房顶高。正数在原有基础上增加高度，负数在原有基础上减少高度。

scaleFactor Number optional 缩放因子，大于0的数字。对楼栋底面要素进行缩放操作，使之能较好的包裹住楼栋。

Author:

liuhonglei

Examples:

var geoBuildingLayer = new Cesium.GeoBuildingLayer({
     viewer: viewer,
     url: './tileset.json',
     enableGetFeatures: true,
     getFeatureInfoParameters: {
         url: 'http://192.168.100.231:8889/dhgx_slm/wfs',
         // proxy: new Cesium.DefaultProxy(Cfg.proxyHostUrl),
         featureType: 'ruanjianyuan',
         geometryName: 'GEOMETRY',
         format: 'GML',
         ...
     },
     selectedColor: Cesium.Color.fromBytes(50, 255, 50, 122),
     hoveredColor: Cesium.Color.fromBytes(255, 50, 50, 122)
});
// 绑定到地图
geoBuildingLayer.addTo(viewer);
// 或者
// viewer.geoLayers.add(geoBuildingLayer);
// 注册鼠标点击事件
viewer.on('click', (e) => {
     if(e.originalLayer === geoBuildingLayer) {
         console.log(e.feature);
         // 高亮操作
         geoBuildingLayer.selectedFeature = e.feature;
         // TODO 业务代码
     }
});
// 注册鼠标悬停事件
viewer.on('hover', (e) => {
     if(e.originalLayer === geoBuildingLayer) {
         console.log(e.feature);
         // 高亮操作
         geoBuildingLayer.hoveredFeature = e.feature;
         // TODO 业务代码
     }
});

// 高亮泛光样式设置或者设置分层设色样式时，数据源不能是未做单体化的数据，即不能是倾斜摄影之类的数据，可以是矢量面拉伸建筑
// 设置分层设色
let style = new Cesium.Cesium3DTileStyle({
     color: {
         conditions: [
             ['${floor} >= 50', 'color("purple", 0.5)'],
             ['${floor} >= 10', 'color("red")'],
             ['true', 'color("yellow")']
         ]
     }
});
geoBuildingLayer.style = style;

// 当enableGetFeatures为false时，如果想设置分层设色样式，并且仍要进行高亮操作时
viewer.on('click', (e) => {
     if(e.originalLayer === geoBuildingLayer) {
         console.log(e.feature);
         // 高亮操作
         geoBuildingLayer.selectedFeature = e.feature;
         // 同时保留分层设色样式和高亮操作
         let style = new Cesium.Cesium3DTileStyle();
         style.color = {
             evaluateColor: (feature, result) => {
                 if(feature instanceof Cesium.Cesium3DTileFeature) {
                     let feature_ = geoBuildingLayer.getFeatureFromCesium3DTileFeature(feature);
                     // 业务逻辑代码（分层设色）
                     if(feature_.properties['floor'] >= 10 && feature_.properties['floor'] < 50) {
                         result = Cesium.Color.RED;
                     } else if(feature_.properties['floor'] >= 50) {
                         result = Cesium.Color.PURPLE.withAlpha(0.5);
                     } else {
                         result = Cesium.Color.YELLOW;
                     }
                     // 业务逻辑代码（分层设色）
                     // 悬停高亮
                     if(geoBuildingLayer.isFeatureEqual(geoBuildingLayer.hoveredFeature, feature_)) {
                            result = geoBuildingLayer.hoveredColor;
                     }
                     // 点击高亮
                     if(geoBuildingLayer.isFeatureEqual(geoBuildingLayer.selectedFeature, feature_)) {
                         result = geoBuildingLayer.selectedColor;
                     }
                 }
             }
         };
         geoBuildingLayer.style = style;
         // TODO 业务代码
     }
});
viewer.on('hover', (e) => {
     if(e.originalLayer === geoBuildingLayer) {
         geoBuildingLayer.hoveredFeature = e.feature;
         // 同时保留分层设色样式和高亮操作
         let style = new Cesium.Cesium3DTileStyle();
         style.color = ... //与click时代码一致
     }
});

// 分层设色，基于楼层数设置建筑颜色。上个示例的简化写法。
var geoBuildingLayer = new Cesium.GeoBuildingLayer({
     viewer: viewer,
     url: './tileset.json',
     enableGetFeatures: false,
     stratificationColor: {
         property: 'floor',
         color: [
             [10, 'rgba(255,0,0,1)'],
             [50, 'rgba(128,0,128,0.5)']
         ]
     }
});

// 点击楼栋时应用辉光效果
var geoBuildingLayer = new Cesium.GeoBuildingLayer({
     viewer: viewer,
     url: './tileset.json',
     enableGetFeatures: false,
     stratificationColor: {
         property: 'floor',
         color: [
             [10, 'rgba(255,0,0,1)'],
             [50, 'rgba(128,0,128,0.5)']
         ]
     },
     bloom: {
         enabled: true,
         strength: 1.0,
         radius: 0.1
     }
});
viewer.on('click', (e) => {
     if(e.originalLayer === geoBuildingLayer) {
         // 高亮操作
         geoBuildingLayer.selectedFeature = e.feature;
         // TODO 业务代码
     }
});

Demo:

Extends

GeoFeatureLayer

Members

enableBuildingName : Boolean

是否开启建筑物名称

enableHighlight : Boolean

是否开启高亮

readonlyhoveredColor : Color

悬停选中时的高亮颜色

hoveredFeature : Object

高亮操作。悬停选中的要素，同selectedFeature

readonlyreadyPromise : Promise

一个promise当模型数据准备好时触发

scaleFactor : Number

缩放因子，大于0的数字。对楼栋底面要素进行缩放操作，使之能较好的包裹住楼栋。

Default Value: undefined

readonlyselectedColor : Color

点击选中时的高亮颜色

selectedFeature : Object

高亮操作。点击选中的要素，是一个geojson面要素。当设置该属性时，会根据该要素对相应的楼栋进行高亮，如果启用要素查询(enableGetFeatures=true)，则selectedFeature 中的Polygon属性为必填项；如果不启用，则selectedFeature中的properties中必须有唯一标识，用来识别对应楼栋。

style : Cesium3DTileStyle

样式

visualSenseStyle : GeoVisualSenseStyle

三维模型的高亮泛光的样式，详见GeoVisualSenseStyle API。

Methods

addTo(map)

绑定到三维地图

Name	Type	Description
`map`	viewer

Inherited From:

GeoFeatureLayer#addTo

clearHighlight()

清除高亮状态

destroy()

销毁图层

getBuildingCenter(feature) → Array

获得建筑物中心点坐标和顶面的高程值。高程值是根据面的中心点采样所得，如果面不规则，可能会出现采样结果在地面的情况。

Name	Type	Description
`feature`	Object	建筑物底面面要素

Returns:

建筑物中心点坐标和顶面高程值

getData()

获取图层数据

Inherited From:

GeoFeatureLayer#getData

getDataSource()

获取图层数据源

hide()

隐藏图层

locate()

定位到三维建筑模型所在位置

pickFeatures(pickedFeatures, windowPosition, geographicPosition, eventType) → Object

拾取要素

Name	Type	Description
`pickedFeatures`	Array	场景中被拾取的对象集合，需要在图层自己内部判断识别出属于自己的，并挂接上图层的属性信息
`windowPosition`	Cartesian2	画布的二维坐标
`geographicPosition`	Object	地理位置，{ lng: lng, lat: lat, height: height }
`eventType`	ScreenSpaceEventType	事件类型

Returns:

返回固定形态的结构数据

Example:

// 返回结构参考样例
{
     feature: promise,
     param: {
         info: pickedFeatures[0],
         pickedInfos: pickedFeatures
     }
}

queryFeatures(bbox, success, failure)

查询要素。当注册click或者hover事件后，点击建筑时会自动调用此方法，并在事件的回调中将要素返回。可覆写此方法实现自定义的要素查询功能。

Name	Type	Description
`bbox`	Array	范围。例如[[-180, -90],[180, 90]]。
`success`	function	请求要素成功回调函数。
`failure`	function	请求要素失败回调函数。

Example:

// 覆写方法，实现自定义要素查询
let queryFeatures = function(bbox, success, failure) {
     let feature = myQueryFeatureMethod();  //自定义的查询要素的方法。
     success(feature);  //查询成功后调用回调。
};
geoBuildingLayer.queryFeatures = queryFeatures;

// 以geojson的方式来做要素查询
      function queryFeatures(bbox, success, failure) {
            //接口内部计算出来的BBOX
            // var bbox = [[114.28411222994326, 30.552684056503327], [114.28412765264511, 30.552696183040623]];
            //需要与静态面块做相交运算的geojson
            var geojson = {
                "type": "FeatureCollection",
                "features": [
                    {
                        "type": "Feature",
                        "properties": {
                            "OID": 1  //OID 必须
                        },
                        "geometry": {
                            "type": "Polygon",
                            "coordinates": [
                                [
                                    [
                                        114.40240502357481,
                                        30.479366780500076
                                    ],
                                    [
                                        114.40225481987,
                                        30.477878124743153
                                    ],
                                    [
                                        114.40327405929565,
                                        30.477822646448885
                                    ],
                                    [
                                        114.40346717834472,
                                        30.47924657932728
                                    ],
                                    [
                                        114.40240502357481,
                                        30.479366780500076
                                    ]
                                ]
                            ]
                        }
                    },
                    {
                        "type": "Feature",
                        "properties": {
                            "OID": 2 //OID 必须
                        },
                        "geometry": {
                            "type": "Polygon",
                            "coordinates": [
                                [
                                    [
                                        114.40454006195067,
                                        30.481151288146
                                    ],
                                    [
                                        114.40414309501648,
                                        30.477415804658243
                                    ],
                                    [
                                        114.40548419952391,
                                        30.47733258680979
                                    ],
                                    [
                                        114.40588116645813,
                                        30.48131771724315
                                    ],
                                    [
                                        114.40454006195067,
                                        30.481151288146
                                    ]
                                ]
                            ]
                        }
                    }
                ]
            };
            var tbbox = bbox[0].concat(bbox[1]);
            var tploy = turf.bboxPolygon(tbbox);
            for(var feature of geojson.features){
                var cross = !turf.booleanDisjoint(tploy, feature);
                console.info(cross);
                //相交了，则出发success回调。
                if (cross) {
                    success(feature);
                    break;
                }
            }
            failure();
        }

        geoBuildingLayer.queryFeatures = queryFeatures;

remove()

将图层从视图中移除

removeDataSource()

移除图层数据源

render()

渲染图层

setBuildingUndersideFeatures(features)

设置建筑底面矢量面要素，用于显示建筑物名称

Name	Type	Description
`features`	Array	底面的矢量面，必须为Polygon，且带有name属性

Example:

var buildingUndersideFeatures = [ { "type": "Feature", "properties": { "OID": 1, "name": "1号楼" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 114.40615475177765, 30.481211387575033 ], [ 114.40611720085144, 30.48079069079269 ], [ 114.4063103199005, 30.48079069079269 ], [ 114.40633177757262, 30.481026466136416 ], [ 114.40680921077728, 30.480989481806535 ], [ 114.40682530403137, 30.4811744033154 ], [ 114.40615475177765, 30.481211387575033 ] ] ] } }]
geoBuildingLayer.setBuildingUndersideFeatures(buildingUndersideFeatures)

setBuildingVisibleByProperty(property, operator, value)

根据属性条件来设置建筑物的显示，例如不低于50m的建筑物是可见的。

Name	Type	Description
`property`	String	属性字段
`operator`	String	操作符，'=='、'>'、'<'、'>='、'<='的其中一种
`value`	Number \| String	属性值

Examples:

// 楼层数大于等于10m的建筑才显示
geoBuildingLayer.setBuildingVisibleByProperty('floor', '>=', 10);

// 还原
geoBuildingLayer.setBuildingVisibleByProperty();  //不传参即可

setData(data)

设置图层的数据

Name Type Description

data

Object

数据

Name	Type	Default	Description
`url`	String \| Resource		optional 建筑物模型数据的URL
`shadows`	ShadowMode	`ShadowMode.ENABLED`	optional 阴影模式
`maximumScreenSpaceError`	Number	`16`	optional 最大屏幕空间误差
`maximumMemoryUsage`	Number	`512`	optional 最大缓存内存
`skipLevelOfDetail`	Boolean	`true`	optional 是否跳过层级

setDataSource(dataSource)

设置图层数据源

Name	Type	Description
`dataSource`	GeoDataSource

setQueryFeatureParameters(getFeatureInfoParameters)

设置wfs要素查询参数

Name	Type	Description
`getFeatureInfoParameters`	Object	optional wfs要素查询参数

Example:

geoBuildingLayer.setQueryFeatureParameters({
     url: 'http://192.168.100.231:8889/dhgx_slm/wfs',
     // proxy: new Cesium.DefaultProxy(Cfg.proxyHostUrl),
     featureType: 'ruanjianyuan',
     geometryName: 'GEOMETRY',
     ...
});

show()

显示图层

NJ API for Cesium GeoBuildingLayer

new Cesium.GeoBuildingLayer(options)

Examples:

Demo:

Extends

Members

enableBuildingName : Boolean

enableHighlight : Boolean

readonlyhoveredColor : Color

hoveredFeature : Object

readonlyreadyPromise : Promise

scaleFactor : Number

readonlyselectedColor : Color

selectedFeature : Object

style : Cesium3DTileStyle

visualSenseStyle : GeoVisualSenseStyle

Methods

addTo(map)

clearHighlight()

destroy()

getBuildingCenter(feature) → Array

Returns:

getData()

getDataSource()

hide()

locate()

pickFeatures(pickedFeatures, windowPosition, geographicPosition, eventType) → Object

Returns:

Example:

queryFeatures(bbox, success, failure)

Example:

remove()

removeDataSource()

render()

setBuildingUndersideFeatures(features)

Example:

setBuildingVisibleByProperty(property, operator, value)

Examples:

setData(data)

setDataSource(dataSource)

setQueryFeatureParameters(getFeatureInfoParameters)

Example:

show()