当前位置:网站首页>Cesium 点击绘制圆形(动态绘制圆形)
Cesium 点击绘制圆形(动态绘制圆形)
2022-07-06 11:51:00 【最凶残的小海豹】
这里重点说一下:CallbackProperty
是一个类,其值由回调函数延迟计算。也就是说它在不断地自我调用,每当其返回的对象有改变时,就会抛出改变后的值。利用这种特性,我们就可以在定义semiMinorAxis
和semiMajorAxis
时,用CallbackProperty
生成动态的值赋值给semiMinorAxis
和semiMajorAxis
参数,就可以得到动态绘制圆形的效果。
使用方法:调用 click_draw_circle() 方法就可以
var handler = null;
var circle_center_entity = null; // 池火灾 圆心点 entity
var temporary_circle_entity = null; // 临时圆形entity
var circle_entity = null; // 结果圆形entity
var circle_end_point = null; // 结束点
var circle_center_point = null; // 圆心点
function click_draw_circle(){
// 再次点击的时候,清除已绘制的中心点,临时圆和结果圆,初始化参数
if (circle_entity !== null) {
viewer.entities.remove(circle_center_entity);
viewer.entities.remove(temporary_circle_entity);
viewer.entities.remove(circle_entity);
circle_center_entity = null;
temporary_circle_entity = null;
circle_entity = null;
circle_end_point = null;
circle_center_point = null;
}
// 清除所有点击事件
if (handler) {
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}
handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
// 鼠标点击左键
handler.setInputAction(event => {
let position = event;
//根据屏幕坐标获取坐标位置
const point = GV.GeoPoint.fromScreen(position.position.x, position.position.y, viewer);
if (!point) {
alert('请点击地球获取坐标!')
return;
}
// 判断圆心是否已经绘制,如果绘制了,再次点击左键的时候,就是绘制最终结果圆形
if (circle_center_entity) {
// 设置最终点
circle_end_point = {
lon: point.lon.toFixed(10),
lat: point.lat.toFixed(10),
height: 0
}
// 绘制结果多边形
draw_circle();
// 清除事件
handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// 清除 绘制的中心点和临时圆
viewer.entities.remove(circle_center_entity);
viewer.entities.remove(temporary_circle_entity);
} else {
// 设置中心点坐标和结束点坐标
circle_end_point = circle_center_point = {
lon: point.lon.toFixed(10),
lat: point.lat.toFixed(10),
height: 0
}
// 绘制圆心点
create_circle_center_point([point.lon.toFixed(10), point.lat.toFixed(10)]);
// 开始绘制动态圆形
draw_dynamic_circle(circle_center_point)
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
// 鼠标移动--实时绘制圆形
handler.setInputAction((event) => {
let position = event;
//根据屏幕坐标获取坐标位置
const point = GV.GeoPoint.fromScreen(position.endPosition.x, position.endPosition.y, viewer);
if (point) {
if (temporary_circle_entity) {
// 修改结束点-用于动态绘制圆形
circle_end_point = {
lon: point.lon.toFixed(10),
lat: point.lat.toFixed(10),
height: 0
}
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}
// 创建圆心点
function create_circle_center_point(point_arr) {
circle_center_entity = viewer.entities.add({
// fromDegrees(经度,纬度,高度)以度为单位的经度和纬度值返回Cartesian3位置
position: Cesium.Cartesian3.fromDegrees(point_arr[0], point_arr[1], 100),
point: {
// 点的大小(像素)
pixelSize: 5,
// 点位颜色,fromCssColorString 可以直接使用CSS颜色
color: Cesium.Color.WHITE,
// 边框颜色
outlineColor: Cesium.Color.fromCssColorString('#fff'),
// 边框宽度(像素)
outlineWidth: 2,
// 是否显示
show: true
}
});
}
// 绘制动态圆
function draw_dynamic_circle(point) {
temporary_circle_entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(point.lon, point.lat),
ellipse: {
// 半短轴(画圆:半短轴和半长轴一致即可)
semiMinorAxis: new Cesium.CallbackProperty(() => {
// PolygonHierarchy 定义多边形及其孔的线性环的层次结构(空间坐标数组)
return two_points_distance(point, circle_end_point);
}, false),
// 半长轴
semiMajorAxis: new Cesium.CallbackProperty(() => {
// PolygonHierarchy 定义多边形及其孔的线性环的层次结构(空间坐标数组)
return two_points_distance(point, circle_end_point);
}, false),
// 填充色
material: Cesium.Color.RED.withAlpha(0.5),
// 是否有边框
outline: true,
// 边框颜色
outlineColor: Cesium.Color.WHITE,
// 边框宽度
outlineWidth: 4
},
});
}
// 绘制结果圆形
function draw_circle() {
circle_entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(circle_center_point.lon, circle_center_point.lat),
ellipse: {
// 半短轴(画圆:半短轴和半长轴一致即可)
semiMinorAxis: two_points_distance(circle_center_point, circle_end_point),
// 半长轴
semiMajorAxis: two_points_distance(circle_center_point, circle_end_point),
// 填充色
material: Cesium.Color.RED.withAlpha(0.5),
// 是否有边框
outline: true,
// 边框颜色
outlineColor: Cesium.Color.WHITE,
// 边框宽度
outlineWidth: 4
},
});
}
// 根据经纬度计算两点之前的直线距离
function two_points_distance(start_point, end_point) {
// 经纬度转换为世界坐标
var start_position = Cesium.Cartesian3.fromDegrees(start_point.lon, start_point.lat, start_point.height);
var end_position = Cesium.Cartesian3.fromDegrees(end_point.lon, end_point.lat, end_point.height);
// 返回两个坐标的距离(单位:米)
return Cesium.Cartesian3.distance(start_position, end_position);
}
绘制中:
绘制完毕:
边栏推荐
- 1805. 字符串中不同整数的数目
- 时钟轮在 RPC 中的应用
- spark基础-scala
- 【翻译】供应链安全项目in-toto移至CNCF孵化器
- 精彩编码 【进制转换】
- [translation] micro survey of cloud native observation ability. Prometheus leads the trend, but there are still obstacles to understanding the health of the system
- 学习探索-函数防抖
- Tencent Android interview must ask, 10 years of Android development experience
- USB host driver - UVC swap
- Tensorflow2.0 自定义训练的方式求解函数系数
猜你喜欢
凤凰架构3——事务处理
力扣101题:对称二叉树
【基础架构】Flink/Flink-CDC的部署和配置(MySQL / ES)
Blue Bridge Cup microbial proliferation C language
手把手教你学会js的原型与原型链,猴子都能看懂的教程
Druid database connection pool details
Systematic and detailed explanation of redis operation hash type data (with source code analysis and test results)
【翻译】云原生观察能力微调查。普罗米修斯引领潮流,但要了解系统的健康状况仍有障碍...
Standardized QCI characteristics
In depth analysis, Android interview real problem analysis is popular all over the network
随机推荐
[infrastructure] deployment and configuration of Flink / Flink CDC (MySQL / es)
凤凰架构2——访问远程服务
[translation] linkerd's adoption rate in Europe and North America exceeded istio, with an increase of 118% in 2021.
Information System Project Manager - Chapter VIII project quality management
小微企业难做账?智能代账小工具快用起来
1805. 字符串中不同整数的数目
CPU负载很低,loadavg很高处理方法
In depth analysis, Android interview real problem analysis is popular all over the network
Alibaba data source Druid visual monitoring configuration
腾讯字节阿里小米京东大厂Offer拿到手软,老师讲的真棒
Learning and Exploration - function anti shake
1805. Number of different integers in the string
Example of shutter text component
【基础架构】Flink/Flink-CDC的部署和配置(MySQL / ES)
10 schemes to ensure interface data security
MySQL must know and learn
企业精益管理体系介绍
Introduction to enterprise lean management system
DaGAN论文解读
How to customize animation avatars? These six free online cartoon avatar generators are exciting at a glance!