De2ac705e04c209c84eaad1bc087483f
Cesium 动态绘制点线面(修改中,暂无源码,核心代码已放!)

我写的这个点线面绘制融入了增删改的功能。
其中可以通过手动点击地图进行动态绘制线面,也支持通过给定坐标数组来进行线面的增加。
绘制好的线面,可以点击进行修改;
以上介绍了我的大概的要给操作,下面以面的构建来进行代码解释;
cesium中想动态构建线面,离不开的一个属性就是CallbackProperty。
以下是部分核心代码:
1、构建面核心代码
此处面的postions用了callbackproperty,就可以进行动态绘制了,关于property的讲解可以参阅:https://www.jianshu.com/p/f0b47997224c

createPolygon: function(obj) {
        var $this = this;
        return this.viewer.entities.add({
            polygon: {
                hierarchy: new Cesium.CallbackProperty(function() {
                    return $this.positions
                }, false),
                clampToGround: obj.clampToGround || true,
                show: true,
                fill: obj.fill || true,
                material: obj.material || Cesium.Color.WHITE,
                width: obj.width || 3,
                outlineColor: obj.outlineColor || Cesium.Color.BLACK,
                outlineWidth: obj.outlineWidth || 1,
                outline: false || obj.outline

            }

        });
    },

2、操作逻辑核心代码
大致解释以下操作逻辑:
首先是绑定了鼠标左击,当鼠标在地图上点击时,会保存点击的坐标,用于构建面。鼠标移动时,会动态显示面;
鼠标右击时结束操作;
```
startCreate: function(callBack) {
var $this = this;
this.handler.setInputAction(function(evt) { //单机开始绘制
var cartesian = cCesium.getCatesian3FromPX(evt.position, $this.viewer);
if ($this.positions.length == 0) {
$this.positions.push(cartesian.clone());
}
$this.positions.push(cartesian);
var point = $this.createPoint(cartesian);
point.wz = $this.gonPointArr.length;
$this.gonPointArr.push(point);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
this.handler.setInputAction(function(evt) { //移动时绘制面
if ($this.positions.length < 1) return;
var cartesian = cCesium.getCatesian3FromPX(evt.endPosition, $this.viewer);
if ($this.positions.length == 2) {
if (!Cesium.defined($this.polygon)) {
$this.polygon = $this.createPolygon($this.style);
$this.polygon.objId = $this.objId;
}

top Created with Sketch.