参考了:https://blog.csdn.net/weixin_33774883/article/details/87495638
绘制点线面。
https://blog.csdn.net/qq_27532167/article/details/83346893
空间距离测量
主要是去掉了贴地,免得画上去的元素被地形盖住,加上线的动态更新,而不是画完了才能看见线。
//获取俩点的距离,返回公里单位值
getLineDis(startCartographic, endCartographic) {
//使用cesium的对象中的方法获取距离数据,而不是根据坐标转换计算,
var geodesic = new Cesium.EllipsoidGeodesic();
geodesic.setEndPoints(startCartographic, endCartographic);
var lengthInMeters = Math.round(geodesic.surfaceDistance*100)/100;//数学,四舍五入,
return lengthInMeters;//单位米
},
//距离累加
sum(arr) {
var s = 0;
for (var i = arr.length - 1; i >= 0; i--) {
s =Number(s) + Number(arr[i]);
}
return s;
},
//画线
drawLineString(callback){
var isDraw = this.isDraw//是否是画线操作
var disNums = []; //线路长度之和
var _this = this;
var polylinePath = []; //点集合,存放当前点和上一个点
var PolyLinePrimitive = (function () {
function _(positions) {
this.options = {
id:"lineEntity",
polyline: {
positions: [],
material: Cesium.Color.RED.withAlpha(0.5),
width:3
}
};
this.positions = positions;
this._init();
}
_.prototype._init = function () {
var _self = this;
var _update = function () {
return _self.positions;
};
//实时更新polyline.positions
this.options.polyline.positions = new Cesium.CallbackProperty(_update, false);
_this.viewer.entities.add(this.options);
};
return _;
})();
var handler = new Cesium.ScreenSpaceEventHandler(_this.viewer.scene.canvas);
var positions = [];
var poly = undefined;
//鼠标左键单击画点
handler.setInputAction(function (movement) {
let ray=_this.viewer.camera.getPickRay(movement.position),
cartesians=_this.viewer.scene.globe.pick(ray,_this.viewer.scene),
cartographic=Cesium.Cartographic.fromCartesian(cartesians),
lng=Cesium.Math.toDegrees(cartographic.longitude),//经度值
lat=Cesium.Math.toDegrees(cartographic.latitude),//纬度值
mapPosition={x:lng,y:lat,z:cartographic.height},//cartographic.height的值为地形高度。
//把三维坐标转成笛卡尔坐标,供添加实体时使用
newposition = Cesium.Cartesian3.fromDegrees(mapPosition.x,mapPosition.y,mapPosition.z);
if (positions.length == 0) {
positions.push(newposition.clone());
}
positions.push(newposition);
var viewer = _this.viewer
isDraw = true;
//世界坐标转地理坐标(弧度)
if (cartographic) {
polylinePath.push(cartographic); //加点
if (isDraw && polylinePath.length == 1) {
var strartpoint = viewer.entities.add(
{
position: newposition,
point: {
color: Cesium.Color.WHITE,
pixelSize: 3,
},
label: {
text: "起点",
font: '14pt monospace',
}
}
);
}
if (isDraw && polylinePath.length > 1) {
var text = 0;
text = _this.sum(disNums) + Number(_this.getLineDis(polylinePath[0], polylinePath[1]));
disNums.push(_this.getLineDis(polylinePath[0], polylinePath[1]));
var temppoint;
if(text<1000){
temppoint = viewer.entities.add(
{
position: newposition,
point: {
color: Cesium.Color.WHITE,
pixelSize: 3,
},
label: {
text: text.toFixed(2) + '米',
font: '14pt monospace',
}
}
);
}else if(text>=1000){
temppoint = viewer.entities.add(
{
position: newposition,
point: {
color: Cesium.Color.WHITE,
pixelSize: 3,
},
label: {
text: ((text/1000).toFixed(2)) + '公里',
font: '14pt monospace',
}
}
);
}
var lastpoint = polylinePath[polylinePath.length - 1];
polylinePath = [lastpoint];
viewer.trackedEntity = undefined;
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//鼠标移动
handler.setInputAction(function (movement) {
let ray=_this.viewer.camera.getPickRay(movement.endPosition),
cartesians=_this.viewer.scene.globe.pick(ray,_this.viewer.scene),
cartographic=Cesium.Cartographic.fromCartesian(cartesians),
lng=Cesium.Math.toDegrees(cartographic.longitude),//经度值
lat=Cesium.Math.toDegrees(cartographic.latitude),//纬度值
mapPosition={x:lng,y:lat,z:cartographic.height},//cartographic.height的值为地形高度。
//把三维坐标转成笛卡尔坐标,供添加实体时使用
newposition = Cesium.Cartesian3.fromDegrees(mapPosition.x,mapPosition.y,mapPosition.z);
var cartesian = newposition
if (positions.length >= 2) {
if (!Cesium.defined(poly)) {
poly = new PolyLinePrimitive(positions);
} else {
if(cartesian != undefined){
positions.pop();
cartesian.y += (1 + Math.random());
positions.push(cartesian);
}
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
//单击鼠标右键结束画线
handler.setInputAction(function (movement) {
handler.destroy();
callback(positions);
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
},