1、提示框
<div id="toolTip" style="display:none;position:absolute;height:20px;width:127px;background: olive;top:0px;left:0px">
</div>
2、 自由测量（任意两点间距离）
function measureLineSpace(viewer) {
var handler=new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
var positions = [];
var poly = null;
var tooltip = document.getElementById("toolTip");
var distance = 0;
var cartesian = null;
var floatingPoint;
tooltip.style.display = "block";
//监听移动事件
handler.setInputAction(function (movement) {
tooltip.style.left = movement.endPosition.x +440+ "px";
tooltip.style.top = movement.endPosition.y+30+ "px";
tooltip.innerHTML = '<p>单击开始，双击结束</p>';
//移动结束位置
cartesian = viewer.scene.pickPosition(movement.endPosition);
//判断点是否在画布上
if(Cesium.defined(cartesian)){
if (positions.length >= 2) {
if (!Cesium.defined(poly)) {
//画线
poly = new PolyLinePrimitive(positions);
} else {
positions.pop();
// cartesian.y += (1 + Math.random());
positions.push(cartesian);
}
distance = getSpaceDistance(positions);
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
//监听单击事件
handler.setInputAction(function (movement) {
tooltip.style.display = "none";
cartesian = viewer.scene.pickPosition(movement.position);
if(Cesium.defined(cartesian)){
if (positions.length == 0) {
positions.push(cartesian.clone());
}
positions.push(cartesian);
//在三维场景中添加Label
var textDisance = distance + "米";
floatingPoint = viewer.entities.add({
name: '空间直线距离',
position:positions[positions.length - 1],
point: {
pixelSize: 5,
color: Cesium.Color.RED,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 2,
heightReference:Cesium.HeightReference.NONE
},
label: {
text: textDisance,
font: '18px sans-serif',
fillColor: Cesium.Color.GOLD,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth: 2,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(20, -20),
heightReference:Cesium.HeightReference.NONE
}
});
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//监听双击事件
handler.setInputAction(function (movement) {
handler.destroy();//关闭事件句柄
positions.pop();//最后一个点无效
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
}
//绘线效果1
var PolyLinePrimitive = (function () {
function _(positions) {
this.options = {
name: '直线',
polyline: {
show: true,
positions: [],
material: Cesium.Color.CHARTREUSE ,
width: 2
}
};
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);
viewer.entities.add(this.options);
};
return _;
})();
3、//垂直测量（任意两点间垂直距离）
function measureLineFlat(viewer,width) {
var handler=new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
var positions = [];
var poly = null;
var tooltip = document.getElementById("toolTip");
var hei = 0;
var cartesian = null;
var floatingPoint;
tooltip.style.display = "block";
//监听移动事件
handler.setInputAction(function (movement) {
tooltip.style.left = movement.endPosition.x +440+ "px";
tooltip.style.top = movement.endPosition.y+30+ "px";
tooltip.innerHTML = '<p>单击开始，双击结束</p>';
//移动结束位置
cartesian = viewer.scene.pickPosition(movement.endPosition);
//判断点是否在画布上
if(Cesium.defined(cartesian)){//在：画线+测量
if (positions.length >= 2) {
if (!Cesium.defined(poly)) {//如果poly为空
//画线+圆
poly = new PolyLinePrimitive2(positions,width);
}
else {
//如果poly=_
positions.pop();
positions.push(cartesian);
}
hei = getHeight(positions);
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// //监听单击事件
handler.setInputAction(function (movement) {
tooltip.style.display = "none";
cartesian = viewer.scene.pickPosition(movement.position);
if(Cesium.defined(cartesian)){
//如果是第一个点
if (positions.length == 0) {
//起始点加两次
positions.push(cartesian.clone());
positions.push(cartesian);
//添加起始点图标
floatingPoint = viewer.entities.add({
name : '高度',
position : positions[0],
point : {
pixelSize : 5,
color : Cesium.Color.RED,
outlineColor : Cesium.Color.WHITE,
outlineWidth : 2,
heightReference:Cesium.HeightReference.none
},
label : {
text : "0米",
font : '18px sans-serif',
fillColor : Cesium.Color.GOLD,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth : 2,
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
pixelOffset : new Cesium.Cartesian2(20, -40)
}
});
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//监听双击事件
handler.setInputAction(function (movement) {
handler.destroy();
tooltip.style.display = "none";
var point1cartographic = Cesium.Cartographic.fromCartesian(positions[0]);
var point2cartographic = Cesium.Cartographic.fromCartesian(positions[1]);
var point_temp= Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(point1cartographic.longitude), Cesium.Math.toDegrees(point1cartographic.latitude),point2cartographic.height);
var textDisance = hei + "米";
viewer.entities.add({
name : '直线距离',
position : point_temp,
point : {
pixelSize : 5,
color : Cesium.Color.RED,
outlineColor : Cesium.Color.WHITE,
outlineWidth : 2,
heightReference:Cesium.HeightReference.none
},
label : {
text : textDisance,
font : '18px sans-serif',
fillColor : Cesium.Color.GOLD,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth : 2,
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
pixelOffset : new Cesium.Cartesian2(20, -20)
}
});
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
}
//绘线效果2
var PolyLinePrimitive2 = (function(){
function _(positions,width){
this.options = {
name:'直线',
polyline : {
show : true,
positions : [],
material : Cesium.Color.AQUA,
width : 2
}
};
this.options1={
positions : [],
name:'椭圆',
ellipse : {
semiMinorAxis:5.0,
semiMajorAxis:5.0,
material:Cesium.Color.RED.withAlpha(0.5)
}
};
this.positions = positions;
this._init();
}
_.prototype._init = function(){
var _self = this;
//临时终点（垂直）
var _update = function(){
var tt=[];
var temp_position =[];
//起点
temp_position.push( _self.positions[0]);
tt.push( _self.positions[0]);
tt.push( _self.positions[1]);
var point1cartographic = Cesium.Cartographic.fromCartesian(_self.positions[0]);//起点
var point2cartographic = Cesium.Cartographic.fromCartesian(_self.positions[1]); //终点
//组合终点（起点的经纬度加上终点的高度）
var point_temp= Cesium.Cartesian3.fromDegrees(Cesium.Math.toDegrees(point1cartographic.longitude), Cesium.Math.toDegrees(point1cartographic.latitude),point2cartographic.height);
temp_position.push(point_temp);
console.log(temp_position);
return temp_position;
};
//起点
var _update_ellipse = function(){
return _self.positions[0];
};
//椭圆半长轴
var _semiMinorAxis = function(){
return _self.width;
};
//椭圆高度
var _height = function(){
var point2cartographic = Cesium.Cartographic.fromCartesian(_self.positions[1]); //终点
return point2cartographic.height;
};
//实时更新polyline.positions
this.options.polyline.positions = new Cesium.CallbackProperty(_update,false); //终点
this.options1.position = new Cesium.CallbackProperty(_update_ellipse,false);//起点
this.options1.ellipse.semiMinorAxis = new Cesium.CallbackProperty(_semiMinorAxis,false);
this.options1.ellipse.semiMajorAxis = new Cesium.CallbackProperty(_semiMinorAxis,false);
//高度
this.options1.ellipse.height = new Cesium.CallbackProperty(_width,false);
viewer.entities.add(this.options);
viewer.entities.add(this.options1);
};
return _;
})();
4、测量效果
2.png
1.png
