cesium1.63.1api版本贴地贴模型量算工具效果

内容概览

1.cesium1.63.1API版本贴地量算工具效果2.源代码demo下载效果图如下：实现思路：测距以及测面都是利用到cesium鼠标操作监听事件：鼠标左键Cesium.ScreenSpaceEventType.LEFT_CLICK、鼠标移动Cesium.ScreenSpaceEventType.MOUSE_MOVE、鼠标右键Cesium.ScreenSpaceEventType.RIGHT_CLICK。鼠标左键事件，获取点击地图的每个坐标点；鼠标移动事件，动态扑捉鼠标移动状态，下一个坐标点位置；鼠标右键意味着地图量算结束状态。另外，量算面积的计算，结合turf.js来计算。距离量算的监听事件函数,里面涉及到细节函数，自行看对应的源码demo： 

 this.handler.setInputAction(function (evt) { //单机开始绘制
            var cartesian = that.getCatesian3FromPX(evt.position, that.viewer, [that.polyline, that.floatLable]);
            if (!cartesian) return;
            if (that.positions.length == 0) {
                var label = that.createLabel(cartesian, "起点");
                that.labels.push(label);
                that.floatLable = that.createLabel(cartesian, "");
                that.floatLable.show = false;
                that.positions.push(cartesian);
                that.positions.push(cartesian.clone());
                that.lastCartesian = cartesian;
            } else {
                that.floatLable.show = false;
                that.positions.push(cartesian);
                if (!that.lastCartesian) return;
                var distance = that.getLength(cartesian, that.lastCartesian);
                that.allDistance += distance;
                var text = that.formatLength(distance);
                var label = that.createLabel(cartesian, text);
                that.labels.push(label);
            }
            that.lastCartesian = cartesian;
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        this.handler.setInputAction(function (evt) {
            if (that.positions.length < 1) return;
            that.floatLable.show = true;
            var cartesian = that.getCatesian3FromPX(evt.endPosition, that.viewer, [that.polyline, that.floatLable]);
            if (!cartesian) return;
            if (that.positions.length == 2) {
                if (!Cesium.defined(that.polyline)) {
                    that.polyline = that.createLine();
                }
            }
            if (that.polyline) {
                that.positions.pop();
                that.positions.push(cartesian);
                if (!that.lastCartesian) return;
                var distance = that.getLength(cartesian, that.lastCartesian);
                that.floatLable.show = true;
                that.floatLable.label.text = that.formatLength(distance);
                that.floatLable.position.setValue(cartesian);
            }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        this.handler.setInputAction(function (evt) {
            if (!that.polyline) return;
            that.floatLable.show = false;
            that.viewer.scene.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
            that.viewer.trackedEntity = undefined;

            var cartesian = that.getCatesian3FromPX(evt.position, that.viewer, [that.polyline, that.floatLable]);
            var distanceLast = that.getLength(cartesian, that.lastCartesian);
            that.allDistance += distanceLast;
            var allDistance = that.formatLength(that.allDistance);


            var label = that.createLabel(cartesian, "");
            if (!cartesian) return;
            that.labels.push(label);
            that.labels[that.labels.length - 1].label.text = "总长：" + allDistance;
            if (that.handler) {
                that.handler.destroy();
                that.handler = null;
            }
            if (that.tsLabel) {
                that.viewer.entities.remove(that.tsLabel);
            }
            if (that.ts_handler) {
                that.ts_handler.destroy();
                that.ts_handler = null;
            }
        }, Cesium.ScreenSpaceEventType.RIGHT_CLICK); 

面积量算的监听事件函数,里面涉及到细节函数，自行看对应的源码demo：

 this.handler.setInputAction(function(evt) { 
            var cartesian = that.getCatesian3FromPX(evt.position,that.viewer,that.filterEntityArr);
            if (!cartesian) return;
            //that.tsLabel.label.text = "单机新增点\n双击结束" ;
            if (that.positions.length == 0) {

                that.positions.push(cartesian);
                that.positions.push(cartesian.clone());
            } else {
                that.positions.push(cartesian);
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        this.handler.setInputAction(function(evt) {
            if (that.positions.length < 1) return;
            var cartesian = that.getCatesian3FromPX(evt.endPosition,that.viewer,that.filterEntityArr);
            if (!cartesian) return;
            if (that.positions.length == 2) {
                if (!Cesium.defined(that.polyline)) {
                    that.polyline = that.createLine();
                }
            }
            if (that.positions.length == 3) {
                if (!Cesium.defined(that.polygon)) {
                    that.viewer.entities.remove(that.polyline);
                    that.polygon = that.createGon();
                    that.floatLabel = that.createLabel(cartesian, "");
                }
            }

            that.positions.pop();
            that.positions.push(cartesian);
            if (that.polygon) {
                var area = that.getAreaAndCenter(that.positions).area;
                var center = that.getAreaAndCenter(that.positions).center;
                var text = that.formatArea(area);
                that.floatLabel.label.text = "面积：" + text;
                if (center) that.floatLabel.position.setValue(center);
            }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        this.handler.setInputAction(function(evt) {
            if (!that.polygon) return;
            that.viewer.scene.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
            that.viewer.trackedEntity = undefined;
            if (that.handler) {
                that.handler.destroy();
                that.handler = null;
            }

            if (that.ts_handler) {
                that.ts_handler.destroy();
                that.ts_handler = null;
            }
        }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);