feat:引入naiveUI,实现工具条雏形,实现距离测量
parent
2da9f05c19
commit
819d0d32e5
@ -0,0 +1,242 @@
|
||||
import * as Cesium from 'cesium'
|
||||
export default class MeasureDistance {
|
||||
constructor(viewer) {
|
||||
this.viewer = viewer
|
||||
this.isMeasure = false
|
||||
this.initEvents()
|
||||
this.positions = []
|
||||
this.temPositions = [] // 鼠标移动时产生的临时点
|
||||
this.vertexEntities = [] // 节点元素
|
||||
this.lineEntity = undefined // 折线元素
|
||||
this.totalDistance = 0 // 总距离
|
||||
}
|
||||
|
||||
initEvents(){
|
||||
this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
|
||||
|
||||
}
|
||||
//激活
|
||||
activate() {
|
||||
this.registerEvents(); //注册鼠标事件
|
||||
this.isMeasure = true;
|
||||
this.totalDistance = 0 // 总距离
|
||||
//设置鼠标样式
|
||||
this.viewer._element.style.cursor = 'crosshair';
|
||||
this.viewer.enableCursorStyle = true;
|
||||
this.temPositions = [];
|
||||
this.positions = [];
|
||||
this.viewer.scene.globe.depthTestAgainstTerrain = true
|
||||
}
|
||||
|
||||
//禁用
|
||||
deactivate() {
|
||||
if (!this.isMeasure) return;
|
||||
this.unRegisterEvents();
|
||||
this.viewer._element.style.cursor = 'default';
|
||||
this.viewer.enableCursorStyle = true;
|
||||
this.isMeasure = false;
|
||||
this.viewer.scene.globe.depthTestAgainstTerrain = false
|
||||
}
|
||||
|
||||
//清空绘制
|
||||
clear() {
|
||||
//清除线对象
|
||||
this.viewer.entities.remove(this.lineEntity);
|
||||
this.lineEntity = undefined;
|
||||
|
||||
//清除节点
|
||||
this.vertexEntities.forEach(item => {
|
||||
this.viewer.entities.remove(item);
|
||||
});
|
||||
this.vertexEntities = [];
|
||||
}
|
||||
//创建线对象
|
||||
createLineEntity() {
|
||||
this.lineEntity = this.viewer.entities.add({
|
||||
polyline: {
|
||||
positions: new Cesium.CallbackProperty(e => {
|
||||
return this.temPositions;
|
||||
}, false),
|
||||
width: 2,
|
||||
material: Cesium.Color.YELLOW,
|
||||
// depthFailMaterial: Cesium.Color.YELLOW,
|
||||
clampToGround: true,
|
||||
disableDepthTestDistance:99000000,
|
||||
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
}
|
||||
})
|
||||
}
|
||||
//创建线节点
|
||||
createVertex() {
|
||||
let vertexEntity = new Cesium.Entity({
|
||||
id: "MeasureDistanceVertex" + this.positions[this.positions.length - 1],
|
||||
position: this.positions[this.positions.length - 1],
|
||||
point: {
|
||||
color: Cesium.Color.FUCHSIA,
|
||||
pixelSize: 6,
|
||||
disableDepthTestDistance:99000000,
|
||||
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
|
||||
},
|
||||
label:{
|
||||
text: this.spaceDistance(this.positions) + "km",
|
||||
font: "2rem sans-serif",
|
||||
fillColor: Cesium.Color.WHITE,
|
||||
style: Cesium.LabelStyle.FILL,
|
||||
pixelOffset: new Cesium.Cartesian2(20, -10),
|
||||
eyeOffset: new Cesium.Cartesian3(0, 0, 0),
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000),
|
||||
scale: 0.5,
|
||||
showBackground: true,
|
||||
backgroundColor: new Cesium.Color(0.165, 0.165, 0.165, 0.5),
|
||||
backgroundPadding: new Cesium.Cartesian2(10, 10),
|
||||
disableDepthTestDistance:99000000,
|
||||
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
});
|
||||
this.vertexEntities.push(vertexEntity)
|
||||
this.viewer.entities.add(vertexEntity)
|
||||
}
|
||||
//创建起点
|
||||
createStartEntity() {
|
||||
let vertexEntity = this.viewer.entities.add({
|
||||
position: this.positions[0],
|
||||
type: "MeasureDistanceVertex",
|
||||
point: {
|
||||
show: true,
|
||||
pixelSize: 10,
|
||||
color: Cesium.Color.RED,
|
||||
outlineColor: Cesium.Color.WHITE,
|
||||
outlineWidth: 1,
|
||||
disableDepthTestDistance:99000000,
|
||||
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
|
||||
},
|
||||
});
|
||||
this.vertexEntities.push(vertexEntity)
|
||||
}
|
||||
//创建终点节点
|
||||
createEndEntity() {
|
||||
let vertexEntity = this.viewer.entities.add({
|
||||
position: this.positions[this.positions.length - 1],
|
||||
type: "MeasureDistanceVertex",
|
||||
label:{
|
||||
text: "总距离：" + this.totalDistance.toFixed(3) + "km",
|
||||
font: "2.5rem sans-serif",
|
||||
fillColor: Cesium.Color.WHITE,
|
||||
style: Cesium.LabelStyle.FILL,
|
||||
pixelOffset: new Cesium.Cartesian2(20, -60),
|
||||
eyeOffset: new Cesium.Cartesian3(0, 0, 30),
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000),
|
||||
scale: 0.5,
|
||||
showBackground: true,
|
||||
backgroundColor: new Cesium.Color(0.165, 0.165, 0.165, 0.99),
|
||||
backgroundPadding: new Cesium.Cartesian2(10, 10),
|
||||
disableDepthTestDistance:99000000,
|
||||
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
},
|
||||
// billboard: {
|
||||
// // image: "../../static/images/end.png",
|
||||
// scaleByDistance: new Cesium.NearFarScalar(300, 1, 1200, 0.4), //设置随图缩放距离和比例
|
||||
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000), //设置可见距离 10000米可见
|
||||
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
||||
// },
|
||||
point: {
|
||||
pixelSize: 10,
|
||||
color: Cesium.Color.RED,
|
||||
outlineColor: Cesium.Color.WHITE,
|
||||
outlineWidth: 1,
|
||||
heightReference:Cesium.HeightReference.CLAMP_TO_GROUND,
|
||||
disableDepthTestDistance:99000000
|
||||
},
|
||||
});
|
||||
this.vertexEntities.push(vertexEntity)
|
||||
}
|
||||
//注册鼠标事件
|
||||
registerEvents() {
|
||||
this.leftClickEvent();
|
||||
this.rightClickEvent();
|
||||
this.mouseMoveEvent();
|
||||
}
|
||||
//左键点击事件
|
||||
leftClickEvent() {
|
||||
//单击鼠标左键画点点击事件
|
||||
this.handler.setInputAction(e => {
|
||||
let position = this.viewer.scene.pickPosition(e.position);
|
||||
if (!position) {
|
||||
const ellipsoid = this.viewer.scene.globe.ellipsoid;
|
||||
position = this.viewer.scene.camera.pickEllipsoid(e.position, ellipsoid);
|
||||
}
|
||||
if (!position) return;
|
||||
this.positions.push(position);
|
||||
if (this.positions.length === 1) { //首次点击
|
||||
this.createLineEntity();
|
||||
this.createStartEntity();
|
||||
return;
|
||||
}
|
||||
this.createVertex();
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
}
|
||||
|
||||
//鼠标移动事件
|
||||
mouseMoveEvent() {
|
||||
this.handler.setInputAction(e => {
|
||||
if (!this.isMeasure) return;
|
||||
let position = this.viewer.scene.pickPosition(e.endPosition);
|
||||
if (!position) {
|
||||
position = this.viewer.scene.camera.pickEllipsoid(e.startPosition, this.viewer.scene.globe.ellipsoid);
|
||||
}
|
||||
if (!position) return;
|
||||
this.handleMoveEvent(position);
|
||||
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
||||
}
|
||||
|
||||
//处理鼠标移动
|
||||
handleMoveEvent(position) {
|
||||
if (this.positions.length < 1) return;
|
||||
this.temPositions = this.positions.concat(position);
|
||||
}
|
||||
|
||||
//右键事件
|
||||
rightClickEvent() {
|
||||
this.handler.setInputAction(e => {
|
||||
if (!this.isMeasure || this.positions.length < 1) {
|
||||
this.deactivate();
|
||||
this.clear()
|
||||
} else {
|
||||
this.createEndEntity();
|
||||
this.lineEntity.polyline = {
|
||||
positions: this.positions,
|
||||
width: 2,
|
||||
material: Cesium.Color.YELLOW,
|
||||
depthFailMaterial: Cesium.Color.YELLOW
|
||||
};
|
||||
this.deactivate();
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
||||
}
|
||||
|
||||
//解除鼠标事件
|
||||
unRegisterEvents() {
|
||||
this.handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
||||
this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
this.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算距离
|
||||
* @param positions 长度大于1的Cartesian3数组
|
||||
*/
|
||||
spaceDistance(positions) {
|
||||
let l = positions.length
|
||||
let point1cartographic = Cesium.Cartographic.fromCartesian(positions[l-1]);
|
||||
let point2cartographic = Cesium.Cartographic.fromCartesian(positions[l-2]);
|
||||
/**根据经纬度计算出距离**/
|
||||
let geodesic = new Cesium.EllipsoidGeodesic();
|
||||
geodesic.setEndPoints(point1cartographic, point2cartographic);
|
||||
this.totalDistance += geodesic.surfaceDistance/1000
|
||||
return (geodesic.surfaceDistance/1000).toFixed(3);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue