背景知识
点、线、面以及文字的实时绘制是GIS很重要的一个功能，是用户对感兴趣区域标注的业务需要。同时Cesium提供了点、线(多段线)、面及文字(label)绘制的接口，绘制方式总共有两种，一种是通过Entity实体的方式，一种是通过Primitives的方式。第一种使用较为简单，是在Primitives基础上进行了封装；第二种则更加贴近WebGL底层，语法更复杂但是绘制效率更高效率。鉴于实时绘制数据量并不大，不需要使用复杂高效的方法，第一种方法完全适用。
Cesium通过ScreenSpaceEventHandler方法添加鼠标监听，包括鼠标的移动、点击等，同时会把鼠标的位置信息以回调函数方式返回。通过监听用户鼠标状态实现矢量图形及文字注记的位置记录。
CallbackProperty监听：当变量变化时触发该监听，通过监听鼠标拾取坐标的变化实现动态绘制。
代码实现
记录点位
var location ={
latitude:0,
longitude:0,
height:0,
endPosition:null,
cartesian :null};
viewer.screenSpaceEventHandler.setInputAction(functiononMouseMove(movement) {//记录移动位置
location.endPosition =viewer.scene.pickPosition(movement.endPosition);
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);
viewer.screenSpaceEventHandler.setInputAction(functiononLeftClick(movement) {var cartesian =viewer.scene.pickPosition(movement.position);//记录点击位置
location.cartesian =cartesian;var cartographic =Cesium.Cartographic.fromCartesian(cartesian);
location.latitude=Cesium.Math.toDegrees(cartographic.latitude);
location.longitude=Cesium.Math.toDegrees(cartographic.longitude);
location.height=cartographic.height;
},Cesium.ScreenSpaceEventType.LEFT_CLICK);
绘制文字注记
var handler = newCesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {var label = newCesium.Entity({
position : Cesium.Cartesian3.fromDegrees(location.longitude, location.latitude,location.height),
name :‘label‘,
label:{
text:‘文字‘,
font:‘24px Helvetica‘,
fillColor: Cesium.Color.SKYBLUE,
outlineColor: Cesium.Color.BLACK,
outlineWidth:2,
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
scaleByDistance:new Cesium.NearFarScalar(100, 1.0, 200, 0.4)
}
});
viewer.entities.add(label);
featureCollection.push(label);
handler.destroy();
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
});
绘制点
document.getElementById(‘point‘).onclick = function() {var handler = newCesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {var label = newCesium.Entity({
position : Cesium.Cartesian3.fromDegrees(location.longitude, location.latitude,location.height),
name :‘point‘,
point:{
outlineColor: Cesium.Color.BLACK,
}
});
viewer.entities.add(label);
featureCollection.push(label);
handler.destroy();
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
};
绘制多段线
functiondrawPolyline() {varfloatingPoint;varactivePolyline;var handler = newCesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(click) {//var position = viewer.scene.pickPosition(click.position);
if(Cesium.defined(location.cartesian)){var cartesian =location.cartesian;if(activeShapePoints.length === 0){
floatingPoint=creatPoint(cartesian);
activeShapePoints.push(cartesian);var dynamicPositions = new Cesium.CallbackProperty(function() {returnactiveShapePoints;
},false);
activePolyline=createPolyline(dynamicPositions);
}
activeShapePoints.push(cartesian);
creatPoint(cartesian);
}
},Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function(movement) {if(Cesium.defined(floatingPoint)){if(Cesium.defined(location.endPosition)){
floatingPoint.position.setValue(location.endPosition);
activeShapePoints.pop();
activeShapePoints.push(location.endPosition);
}
}
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(function(movement) {
handler.destroy();for(var i=0;i
viewer.entities.remove(Points[i]);
}
Points=[];
},Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);functioncreatePolyline(positionData) {varpolyline;
polyline=viewer.entities.add({
name :‘polyline‘,
polyline : {
positions : positionData,//在地形上绘制多段线，但是在3dtilset模型上无效
clampToGround : false,
followSurface :false,
material: Cesium.Color.RED,
width :3}
});returnpolyline;
}
}
绘制多边形
functiondrawPolygon() {varfloatingPoint;varactivePolygon;var handler = newCesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function(click) {var position =viewer.scene.pickPosition(click.position);if(Cesium.defined(location.cartesian)){var cartesian =location.cartesian;if(activeShapePoints.length === 0){
floatingPoint=creatPoint(cartesian);
activeShapePoints.push(cartesian);var dynamicPositions = new Cesium.CallbackProperty(function() {returnactiveShapePoints;
},false);
activePolygon=createPolygon(dynamicPositions);
}
activeShapePoints.push(cartesian);
creatPoint(cartesian);
}
},Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function(movement) {if(Cesium.defined(floatingPoint)){if(Cesium.defined(location.endPosition)){
floatingPoint.position.setValue(location.endPosition);
activeShapePoints.pop();
activeShapePoints.push(location.endPosition);
}
}
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(function(movement) {
handler.destroy();for(var i=0;i
viewer.entities.remove(Points[i]);
}
Points=[];
},Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);functioncreatePolygon(positionData) {varpolygon;
polygon=viewer.entities.add({
name:‘polygon‘,
positions : positionData,
polygon:{
hierarchy : positionData,
perPositionHeight:true,
material: Cesium.Color.RED.withAlpha(0.7),
outline:true,
outlineColor: Cesium.Color.YELLOW.withAlpha(1)
}
});returnpolygon;
}
}
效果图
转播
