美丽说网站案例分析,广州网站制作电话,全包家装原创装修网站,google网页搜索作者#xff1a;gaogy 1、背景
随着地理信息技术的发展#xff0c;三维地球技术逐渐成为了许多领域中的核心工具#xff0c;尤其是在城市规划、环境监测、航空航天以及军事领域。三维地图和场景的应用正在帮助人们更加直观地理解空间数据#xff0c;提供更高效的决策支持。… 作者gaogy 1、背景
随着地理信息技术的发展三维地球技术逐渐成为了许多领域中的核心工具尤其是在城市规划、环境监测、航空航天以及军事领域。三维地图和场景的应用正在帮助人们更加直观地理解空间数据提供更高效的决策支持。
iClient3D for Cesium 是由 SuperMap 提供的一款开发工具旨在将三维地理信息系统 (3D GIS) 技术应用于大规模的地理信息可视化与分析帮助开发者通过 Web 平台展示三维地图还提供了强大的数据分析功能包括对建筑物、地形、设施等的空间分析。
限高分析是地理信息系统中的一种常见分析需求特别是在城市规划与建筑设计中限高分析能够帮助规划人员确保建筑物在设计过程中不会超过法规规定的高度限制并避免与其他建筑物或设施发生冲突。通过限高分析开发者可以根据地形、建筑物高度等条件动态计算和展示特定区域内的限高区域。
本文将利用 iClient3D for Cesium 实现三维场景下得限高分析功能帮助用户在三维地图中直观地分析和展示限高区域从而在建筑设计和城市规划过程中提供有效的决策依据。
2、限高分析效果演示 iClient3D for Cesium 实现限高分析 3、实现过程
3.1、项目环境
本文采用Vite6 Vue3.5 iClient3D for Cesium(2024) 框架实现项目具体使用依赖如下
{vue: ^3.5.13,element-plus: ^2.9.1,vite: ^6.0.1
}3.2、初始化三维场景
function initViewer() {window.viewer new Cesium.Viewer(cesiumContainer, { infoBox: false })viewer.scene.addS3MTilesLayerByScp(http://www.supermapol.com/realspace/services/3D-dynamicDTH/rest/realspace/datas/Config%20-%201/config,{ name: s3mLayer })viewer.scene.camera.setView({destination: new Cesium.Cartesian3(-2623004.4174251584, 3926981.958360567, 4287374.829655093),orientation: {heading: 4.39611370540786,pitch: -0.43458664812464143,roll: 2.0174972803488345e-11}})
}3.3、利用iServer Data 服务查询并绘制 Entity 面
async function queryByGeometry(queryGeometry) {const queryObj {getFeatureMode: SPATIAL,spatialQueryMode: CONTAIN,datasetNames: [铁岭矢量面:New_Region3D_1],hasGeometry: true,geometry: { points: queryGeometry, type: REGION }}try {const response await fetch(http://www.supermapol.com/realspace/services/data-dynamicDTH/rest/data/featureResults.geojson?returnContenttrue,{method: POST,headers: { Content-Type: application/json },body: JSON.stringify(queryObj)})const data await response.json()data.features.forEach((feature) {if (feature.geometry.type Polygon) {const lonLatArr []feature.geometry.coordinates[0].forEach((coord) lonLatArr.push(...coord))const entity viewer.entities.add({id: identify-area-${feature.id || Date.now()},name: 单体化标识面,polygon: {hierarchy: Cesium.Cartesian3.fromDegreesArray(lonLatArr),material: new Cesium.Color(1.0, 0.0, 0.0, 0.6),classificationType: Cesium.ClassificationType.S3M_TILE, // 贴在 S3M 模型表面groundBottomAltitude: height.value,groundExtrudedHeight: 500},info: feature.properties})entities.push(entity)}})} catch (error) {throw new error(error.message)}
}3.4、使用 Cesium 的 DrawHandler 绘制限高分析区域
const handlerPolygon new Cesium.DrawHandler(viewer, Cesium.DrawMode.Polygon)
handlerPolygon.drawEvt.addEventListener((result) {handlerPolygon.polygon.show falsehandlerPolygon.polyline.show falseconst positions result.object.positionsconst geometries []let minLongitude Infinitylet maxLongitude -Infinitylet minLatitude Infinitylet maxLatitude -Infinitypositions.forEach((position) {const cartographic Cesium.Cartographic.fromCartesian(position)const longitude Cesium.Math.toDegrees(cartographic.longitude)const latitude Cesium.Math.toDegrees(cartographic.latitude)minLongitude Math.min(minLongitude, longitude)maxLongitude Math.max(maxLongitude, longitude)minLatitude Math.min(minLatitude, latitude)maxLatitude Math.max(maxLatitude, latitude)})const rectangle Cesium.Rectangle.fromDegrees(minLongitude, minLatitude, maxLongitude, maxLatitude)const southWest { x: minLongitude, y: minLatitude }const southEast { x: maxLongitude, y: minLatitude }const northEast { x: maxLongitude, y: maxLatitude }const northWest { x: minLongitude, y: maxLatitude }geometries.push(southWest, southEast, northEast, northWest)entity viewer.entities.add({rectangle: {coordinates: rectangle,height: height.value,material: new Cesium.Color(1.0, 1.0, 1.0, 0.5),outline: true,outlineColor: Cesium.Color.RED}})queryByGeometry(geometries)
})注意这里是根据绘制的几何面的外接矩形作为限高分析的范围区域如有其他需要可自行更改分析区域
3.5、动态调整限高高度
function changeHeight() {if (entity) entity.rectangle.height height.valuefor (const entity of entities) {if (entity) entity.polygon.groundBottomAltitude height.value}
}height 为 vue 的 ref 对象利用 vue 双向绑定指令可实现动态修改分析范围面的高度而分析结果的楼栋 entity 对象则可以通过修改其 groundBottomAltitude 属性动态修改其高度实现限高分析。
3.6、点击分析结果展示属性信息
const pickHandler new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas)
pickHandler.setInputAction((event) {const feature window.viewer.scene.pick(event.position)if (Cesium.defined(feature)) {if (Object.prototype.hasOwnProperty.call(feature, id) feature.id instanceof Cesium.Entity) {if (feature.id._id.startsWith(identify-area)) {const entity viewer.entities.getById(feature.id._id)tableData.value Object.keys(entity.info).map((key) {return { name: key, info: entity.info[key] }})showInfo.value true}}}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)4、总结
本文借鉴SuperMap iClientD for Cesium官网的动态单体化示例(support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/editor.html#dynamicDTH) 通过修改entity 的 groundBottomAltitude 属性动态修改其高度实现限高分析能够动态的展示超过限高高度的具体楼栋并能展示其属性信息从而在建筑设计和城市规划过程中为决策者提供有效的决策依据。
本文完整Vue代码可在https://download.csdn.net/download/supermapsupport/90151388下载参考
