当前位置:网站首页>Cesium 点击绘制多边形(动态绘制多边形)
Cesium 点击绘制多边形(动态绘制多边形)
2022-06-28 00:05:00 【最凶残的小海豹】
这里重点说一下:CallbackProperty
是一个类,其值由回调函数延迟计算。也就是说它在不断地自我调用,每当其返回的对象有改变时,就会抛出改变后的值。利用这种特性,我们就可以在定义hierarchy(层次结构)
时,用CallbackProperty生成动态的对象赋值给hierarchy(层次结构)
参数,就可以得到动态绘制多边形
的效果。
使用方法:调用 click_draw_polygon()
方法就可以
// 全局函数执行完成后执行组件的钩子函数、组件事件、自定义事件
var polygon_point_arr = [];
// 临时多边形entity
var temporary_polygon_entity = null;
var handler = null;
// 开启绘制的方法
function click_draw_polygon() {
// 清除可能会用到的监听事件
if (handler) {
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}
handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
//鼠标左键--确定选中点
handler.setInputAction((event) => {
// 屏幕坐标转为空间坐标
let cartesian = viewer.camera.pickEllipsoid(event.position, viewer.scene.globe.ellipsoid);
// 判断是否定义(是否可以获取到空间坐标)
if (Cesium.defined(cartesian)) {
// 将点添加进保存多边形点的数组中,鼠标停止移动的时添加的点和,点击时候添加的点,坐标一样
polygon_point_arr.push(cartesian);
// 判断是否开始绘制动态多边形,没有的话则开始绘制
if (temporary_polygon_entity == null) {
// 绘制动态多边形
draw_dynamic_polygon();
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//鼠标移动--实时绘制多边形
handler.setInputAction((event) => {
// 屏幕坐标转为空间坐标
let cartesian = viewer.camera.pickEllipsoid(event.endPosition, viewer.scene.globe.ellipsoid);
// 判断是否定义(是否可以获取到空间坐标)
if (Cesium.defined(cartesian)) {
// 判断是否已经开始绘制动态多边形,已经开始的话,则可以动态拾取鼠标移动的点,修改点的坐标
if (temporary_polygon_entity) {
// 只要元素点大于一,每次就删除一个点,因为实时动态的点是添加上去的
if (polygon_point_arr.length > 1) {
// 删除数组最后一个元素(鼠标移动添加进去的点)
polygon_point_arr.pop();
}
// 将新的点添加进动态多边形点的数组中,用于实时变化,注意:这里是先添加了一个点,然后再删除点,再添加,这样重复的
polygon_point_arr.push(cartesian);
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
//鼠标右键--结束绘制
handler.setInputAction((event) => {
// 取消鼠标移动监听
handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// 清除动态绘制的多边形
viewer.entities.remove(temporary_polygon_entity);
// 删除保存的临时多边形的entity
temporary_polygon_entity = null;
// 绘制结果多边形
draw_polygon();
// 清空多边形点数组,用于下次绘制
polygon_point_arr = [];
// 清除所有事件
if (handler) {
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}
//绘制动态多边形
function draw_dynamic_polygon() {
temporary_polygon_entity = viewer.entities.add({
polygon: {
// 这个方法上面有重点说明
hierarchy: new Cesium.CallbackProperty(() => {
// PolygonHierarchy 定义多边形及其孔的线性环的层次结构(空间坐标数组)
return new Cesium.PolygonHierarchy(polygon_point_arr);
}, false),
extrudedHeight: 0, // 多边体的高度(多边形拉伸高度)
height: 10, // 多边形离地高度
material: Cesium.Color.RED.withAlpha(0.5),
},
});
}
//绘制结果多边形
function draw_polygon() {
// 删除最后一个动态添加的点,如果鼠标没移动,最后一个和倒数第二个是一样的,所以也要删除
polygon_point_arr.pop();
// 三个点以上才能绘制成多边形
if (polygon_point_arr.length >= 3) {
let polygon_point_entity = viewer.entities.add({
polygon: {
hierarchy: polygon_point_arr,
extrudedHeight: 0, // 多边体的高度(多边形拉伸高度)
height: 10, // 多边形离地高度
material: Cesium.Color.RED.withAlpha(0.5),
outlineColor: Cesium.Color.RED,
outlineWidth: 2
},
});
// 坐标转换--这里可以输出所有点位坐标,不需要就删除了
// polygon_point_arr.forEach(val => {
// let polyObj = {}
// let cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(val)
// polyObj.lon = Cesium.Math.toDegrees(cartographic.longitude)
// polyObj.lat = Cesium.Math.toDegrees(cartographic.latitude)
// point_arr.push([polyObj.lon, polyObj.lat])
// })
// return point_arr;
} else {
return
}
}
边栏推荐
- TIA botu_ Concrete method of making analog input and output Global Library Based on SCL language
- PostgreSQL setting auto increment field
- [embedded foundation] serial port communication
- [Yocto RM]3 - Yocto Project Releases and the Stable Release Process
- Supervised, unsupervised and semi supervised learning
- Neural network of zero basis multi map detailed map
- Can you open an account for stock trading in flush? Is it safe?
- 嵌入式必学!硬件资源接口详解——基于ARM AM335X开发板 (下)
- The number of nodes of a complete binary tree [non-O (n) solution > Abstract dichotomy]
- 面试官问:JS的继承
猜你喜欢
Adobe Premiere基础-常用的视频特效(边角定位,马赛克,模糊,锐化,手写工具,效果控件层级顺序)(十六)
基于AM335X开发板 ARM Cortex-A8——Acontis EtherCAT主站开发案例
Web3 技术初体验以及相关学习资料
Implementation of timed tasks in laravel framework
Machine learning notes - time series as features
LMSOC:一种对社会敏感的预训练方法
零基础多图详解图神经网络
The practice of dual process guard and keeping alive in IM instant messaging development
嵌入式必学,硬件资源接口详解——基于ARM AM335X开发板 (上)
评价——秩和比综合评价
随机推荐
同花顺上能炒股开户吗?安全吗?
Supervised, unsupervised and semi supervised learning
PostgreSQL setting auto increment field
[Yocto RM]1 - System Requirements
[Yongyi XY chair] trial experience
力扣今日题-522. 最长特殊序列
什麼是數字化?什麼是數字化轉型?為什麼企業選擇數字化轉型?
要搞清楚什么是同步,异步,串行,并行,并发,进程,线程,协程
ShardingSphere-proxy-5.0.0建立mysql读写分离的连接(六)
【牛客討論區】第四章:Redis
I/O限制进程与CPU限制进程
评价——秩和比综合评价
9. Openfeign service interface call
Web3 technology initial experience and related learning materials
Maimai hot post: Why are big factories keen on making wheels?
对比学习中的4种经典训练模式
766. 托普利茨矩阵
Evaluation - grey correlation analysis
Adobe Premiere基础-常用的视频特效(边角定位,马赛克,模糊,锐化,手写工具,效果控件层级顺序)(十六)
向excel中导入mysql中的数据表