Cesium实现⽂字、点、多段线、多边形的实时绘制
背景知识
点、线、⾯以及⽂字的实时绘制是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(function onMouseMove(movement) {
//记录移动位置
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
var cartesian = viewer.scene.pickPosition(movement.position);
//记录点击位置
location.cartesian = cartesian;
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
错的组词是什么
location.latitude = Degrees(cartographic.latitude);
location.longitude = Degrees(cartographic.longitude);
location.height = cartographic.height;
},Cesium.ScreenSpaceEventType.LEFT_CLICK);
绘制⽂字注记
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {
var label = new Cesium.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)
}
});
featureCollection.push(label);
handler.destroy();
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
});
绘制点
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {
var label = new Cesium.Entity({
position : Cesium.Cartesian3.fromDegrees(location.longitude, location.latitude,location.height),            name : 'point',
point:{
outlineColor: Cesium.Color.BLACK,
}
});
featureCollection.push(label);
handler.destroy();
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
};
绘制多段线
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);    handler.setInputAction(function(click) {
//var position = viewer.scene.pickPosition(click.position);sql server数据库时间转换为字符串
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() {
return activeShapePoints;
},false);
activePolyline = createPolyline(dynamicPositions);
}
activeShapePoints.push(cartesian);
creatPoint(cartesian);
}
},Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function(movement) {
if(Cesium.defined(floatingPoint)){
if(Cesium.dPosition)){
position和location的区别floatingPoint.position.dPosition);
activeShapePoints.pop();
activeShapePoints.dPosition);
}
}
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(function(movement) {
handler.destroy();
for(var i=0;i<Points.length;i++){
}
Points = [];
},Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
function createPolyline(positionData) {
var polyline;
polyline = ities.add({
name : 'polyline',
polyline : {
positions : positionData,
//在地形上绘制多段线，但是在3dtilset模型上⽆效
clampToGround : false,
followSurface : false,
material: Cesium.Color.RED,
width : 3
}
});
return polyline;
}
}
绘制多边形
var handler = new Cesium.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);郑州java培训学校
activeShapePoints.push(cartesian);
node爬虫框架推荐var dynamicPositions = new Cesium.CallbackProperty(function() {
return activeShapePoints;
},false);
activePolygon = createPolygon(dynamicPositions);
}
activeShapePoints.push(cartesian);
creatPoint(cartesian);
}
},Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function(movement) {
if(Cesium.defined(floatingPoint)){
if(Cesium.dPosition)){
floatingPoint.position.dPosition);
activeShapePoints.pop();
activeShapePoints.dPosition);
}
}
},Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(function(movement) {
handler.destroy();
for(var i=0;i<Points.length;i++){
}
Points = [];
},Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
function createPolygon(positionData) {
var polygon;
polygon = ities.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)
}
});
return polygon;
}
}
效果图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。