SuperMap iClient3D for Cesium 实现鼠标移动选中模型并显示模型对应字段

SuperMap iClient3D for cesium 实现鼠标移动选中模型并显示模型对应字段

    • 一、实现思路
    • 二、数据制作
        • [1. 计算出模型中心点并保存到属性表中](#1. 计算出模型中心点并保存到属性表中)
        • [2. 计算出模型顶部高程](#2. 计算出模型顶部高程)
        • [3. 模型数据切缓存](#3. 模型数据切缓存)
        • [4. 发布三维服务.](#4. 发布三维服务.)
    • 三、代码编写

作者:xkf

一、实现思路

将模型属性数据存储到前端,通过监听鼠标指针的屏幕坐标返回当前坐标选中的实体对象,并根据对象id在保存的模型属性中查询需要显示的固定字段,最后通过气泡显示到模型的顶部.

二、数据制作

1. 计算出模型中心点并保存到属性表中

通过Supermap iDesktop (下文简称iDesktop)中 属性表->编辑组->计算几何属性->计算中心点坐标 的功能得到对应模型数据的中心点的经度和纬度坐标,如下图:

2. 计算出模型顶部高程

可以通过iDesktop中 三维数据-> 模型->属性提取-> 提取顶部高程 功能获取模型的顶部高程值.如下图:

3. 模型数据切缓存

可以选择在iDesktop中选中数据集右键切缓存,或者保存场景后对场景切缓存。需要注意的是 属性存储类型 需要选择 ATTRIBUTE 才能在前端保存属性。

4. 发布三维服务.

将切好的缓存数据保存到工作空间后使用 supermap iserver 发布为三维服务.到此就完成了数据的制作。

三、代码编写

主要代码如下:

var handler
var promise = scene.open("http://IP:8090/iserver/services/3D-CBD/rest/realspace");
promise.then(function (layers) {
    layer = scene.layers.find("Building@CBD")
    layer.indexedDBSetting.isAttributesSave = true
})
var popup3 = new Popup({
    viewer: viewer,
    element: 'test3',
    pixelOffset: new Cesium.Cartesian2(-30, -50),
    scaleByDistance: new Cesium.NearFarScalar(1000, 1, 10000, 0.2),
    hideOnBehindGlobe: true,
});
let name = document.getElementById('name')
let ID = document.getElementById('ID')
handlerActive()
function handlerActive() {
    handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    handler.setInputAction(function (e) {
        var pickedObject = viewer.scene.pick(e.endPosition);
        console.log("pickedObject", pickedObject)
        let position

        if (pickedObject.id !== undefined && pickedObject.primitive._name == "Building@CBD") {
            layer.getAttributesById(pickedObject.id).then(function (data) {
                name.innerHTML = data.MODELNAME
                ID.innerHTML = data.SmID
                position = new Cesium.Cartesian3.fromDegrees(data.LONGITUDE, data.LATITUDE, data.TopAltitude)
            })
            popup3.setPosition(position);
        } else {
            popup3.close()
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}

效果截图:

相关推荐
前端Hardy15 小时前
HTML&CSS:数据卡片可以这样设计
前端·javascript·css·3d·html
duansamve18 小时前
WebGIS地图框架有哪些?
javascript·gis·openlayers·cesium·mapbox·leaflet·webgis
小彭努力中19 小时前
138. CSS3DRenderer渲染HTML标签
前端·深度学习·3d·webgl·three.js
AI生成未来1 天前
斯坦福&UC伯克利开源突破性视觉场景生成与编辑技术,精准描绘3D/4D世界!
3d·3d场景·4d
汪洪墩1 天前
【Mars3d】实现这个地图能靠左,不居中的样式效果
前端·javascript·vue.js·3d·webgl·cesium
Bearnaise2 天前
GaussianDreamer: Fast Generation from Text to 3D Gaussians——点云论文阅读(11)
论文阅读·人工智能·python·深度学习·opencv·计算机视觉·3d
智驾机器人技术前线2 天前
近期两篇NeRF/3DGS-based SLAM方案赏析:TS-SLAM and MBA-SLAM
3d·slam·nerf·3dgs
Tianwen_Burning2 天前
halcon3d disparity_image_to_xyz非常重要的算子及使用条件
算法·3d
光学测量小菜鸡2 天前
OpenCV双目立体视觉重建
opencv·3d·双目相机·结构光·sgbm
豆包MarsCode3 天前
基于豆包MarsCode 和 Threejs 实现3D地图可视化
大数据·开发语言·人工智能·python·3d·程序员