|
以前在工作中都是使用了openlayer,现在想试试看cesium这个框架,其中最主要的一个工作是geoserver上传了一个矢量文件,里面有很矢量图斑,当我在vue+cesium地图界面展示这个图斑文件的时候,我需要点击不同矢量图斑获取不同的图斑数据,用于展示界面。
逛了网上一大圈,发现资料还是比较少,因此记录一下这个代码怎么写、
其实也挺简单的,这点比openlayer好太多了,思路是:Cesium.ScreenSpaceEventType.LEFT_CLICK使用pickRay获取数据,然后对数据进行获取就行了
1.没有点击到矢量图版的时候

2.点击到矢量图斑后

废话不多说。上代码
//监控点击事件
var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas);
handler.setInputAction(async (event)=> {
this.viewer.selectedEntity = undefined;
var pickRay = this.viewer.camera.getPickRay(event.position);
try {
this.clickfeaturesPromise = await this.viewer.imageryLayers.pickImageryLayerFeatures(pickRay, this.viewer.scene);
this.clickfeaturesPromise = this.clickfeaturesPromise[0]['properties']
} catch (error) {
this.clickfeaturesPromise = '没有选择到图层'
}
console.log("featuresPromise:", this.clickfeaturesPromise)
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);如果对你有帮助,帮忙点个赞,谢谢了 |
|