鼠标点击绘制点、线
//点击模式开启/关闭
modeOpenOrClose = () => {
let that = this;
if (that.spotMode) {
that.handler.setInputAction(function (event) {
//返回地球表面上的点坐标
let earthPosition = viewer.camera.pickEllipsoid(event.position, viewer.scene.globe.ellipsoid);
if (Cesium.defined(earthPosition)) {
let ellipsoid = viewer.scene.globe.ellipsoid;
let cartographic = ellipsoid.cartesianToCartographic(earthPosition);
let lon = Cesium.Math.toDegrees(cartographic.longitude);
let lat = Cesium.Math.toDegrees(cartographic.latitude);
let alt = cartographic.height + ''
//高度太高 无法获取数据高度为0
if (alt.indexOf('e') != -1) alt = 0
let entity = that.AddPoint({
lon,
lat,
alt,
color: Cesium.Color.YELLOW
});
let entityPiontData = {
pointId: entity._id,
longitude: lon,
latitude: lat,
height: alt
}
store.commit('SAVE_CARTOGRAPHIC', entityPiontData) //储存到vuex
if (that.lastPoint === undefined) {
that.lastPoint = new Cesium.Cartesian3.fromDegrees(lon, lat, alt);
that.lastPoint.pointId = entity._id;
} else {
that.nextPoint = new Cesium.Cartesian3.fromDegrees(lon, lat, alt);
that.nextPoint.pointId = entity._id
that.AddPolyline({
positions: [that.lastPoint, that.nextPoint]
});
that.lastPoint = that.nextPoint;
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
} else {
that.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK) //移除事件
that.lastPoint = undefined;
}
}
// 添加点
AddPoint = (params) => {
let entity = new Cesium.Entity({
id:`${params.lon}点`,
name: '点',
show: true,
position: Cesium.Cartesian3.fromDegrees(params.lon, params.lat, params.alt),
point: new Cesium.PointGraphics({
show: true, //是否展示
pixelSize: 10, //点大小
color: params.color
})
});
//收集Id
this.pointIdList.push(entity._id);
viewer.entities.add(entity);
return entity;
}
// 添加线
AddPolyline = (params) => {
let entity = new Cesium.Entity({
id:`${new Date().getTime()}线`,
name: '线',
adjoinPointId: params.positions[0].pointId + '@' + params.positions[1].pointId, //相邻点id
polyline: new Cesium.PolylineGraphics({
show: true,
clampToGround: false,
positions: params.positions,
width: 10,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.2,
color: Cesium.Color.BLUE
})
})
});
viewer.entities.add(entity);
return entity;
}
2.改变点的高度,并重新绘制线
// 修改点的高度
editPointHeight = (data) => {
let axis = Cesium.Cartesian3.fromDegrees(data.longitude, data.latitude, data.height);
axis.pointId = data.pointId;
let adjoinPointIdlist = [];//相邻点id的集合
let pointList = []//相邻点坐标的集合
let entitiesArray = viewer.entities._entities._array
for (var i = 0; i < entitiesArray.length; i++) {
if (entitiesArray[i]._id == data.pointId) {
entitiesArray[i]._position._value.x = axis.x
entitiesArray[i]._position._value.y = axis.y
entitiesArray[i]._position._value.z = axis.z
}
//通过遍历获取adjoinPointId包含点id 获取两个点的坐标
if (entitiesArray[i].adjoinPointId && entitiesArray[i].adjoinPointId.indexOf(data.pointId) >= 0) {
let arr = entitiesArray[i].adjoinPointId.split('@')
if (arr[0] !== data.pointId) adjoinPointIdlist.push(arr[0])
else adjoinPointIdlist.push(arr[1])
viewer.entities.remove(viewer.entities.getById(entitiesArray[i]._id)); //删除线段
i--
}
}
//如果是修改的最后一个点 同时也修改lastPoint的位置
if (entitiesArray[entitiesArray.length - 1]._id == data.pointId) {
this.lastPoint = axis //记录点的位置
}
// console.log(adjoinPointIdlist,'adjoinPointIdlist')
//获取相邻点的位置
adjoinPointIdlist.forEach(v => {
entitiesArray.forEach(k => {
if (v == k._id) {
let obj = {
pointId: k._id,
...k._position._value
}
pointList.push(obj)
}
})
})
// console.log(pointList, 'pointList')
pointList.forEach((item, index) => {
if (index == 0) {
this.AddPolyline({
positions: [item, axis]
});
} else {
setTimeout(() => {
this.AddPolyline({
positions: [item, axis]
});
}, 10)
}
})
}
示例图