ArcGIS js api 4.x 3D多段长度量测

提出背景

4.x api中只提供了2d的要素绘制工具，没有提供3d的，提供的量测微件中，面向三维的只有面积量测和单段长度&高程量测，并不能满足需求，因此，自己动手丰衣足食，决定从底层开始逐步构建多段长度量测工具

具体思路

代码实现

代码不一定能跑通，仅记录思路

require([
    "esri/Map",
    "esri/views/SceneView",
    "esri/layers/GraphicsLayer",
    "esri/Graphic",
    "esri/geometry/projection",
    "esri/geometry/geometryEngine",
    "dojo/dom",
    "dojo/domReady!"
], function (
    Map, SceneView, GraphicsLayer, Graphic, projection, geometryEngine, dom
) {
    var map = new Map({
        basemap: "hybrid"
    });

    var view = new SceneView({
        container: "viewDiv",
        map: map,

        camera: { // autocasts as new Camera()
            position: { // autocasts as new Point()
                x: -0.17746710975334712,
                y: 51.44543992422466,
                z: 1266.7049653716385
            },
            heading: 0.34445102566290225,
            tilt: 82.95536300536367
        }
    });
    var graphicLayer = new GraphicsLayer(); // 线图层
    var textLayer = new GraphicsLayer(); // 文字图层
    var pointLayer = new GraphicsLayer(); // 点图层

    var linePaths = [] // 线要素路径数组
    var textGraphics = [] // 文字graphic数组
    var pointGraphics = [] // 点要素graphic数组

    var lineSymbol = { // 线要素symbol
        type: "line-3d",  // autocasts as new LineSymbol3D()
        symbolLayers: [{
            type: "line",  // autocasts as new LineSymbol3DLayer()
            size: 2,  // points
            material: { color: "red" }
        }]
    };

    var textSymbol = { // 文本要素symbol
        type: "text",  // autocasts as new TextSymbol()
        color: "white",
        haloColor: "black",
        haloSize: "1px",
        text: "0",
        xoffset: 3,
        yoffset: 3,
        font: {  // autocast as new Font()
            size: 12,
            family: "sans-serif",
            weight: "bold"
        }
    };

    var pointSymbol = { // 点要素symbol
        type: "point-3d",  // autocasts as new PointSymbol3D()
        symbolLayers: [{
            type: "object",  // autocasts as new ObjectSymbol3DLayer()
            width: 5,    // diameter of the object from east to west in meters
            height: 5,  // height of object in meters
            depth: 5,   // diameter of the object from north to south in meters
            resource: { primitive: "sphere" },
            material: { color: [226, 119, 40] }
        }]
    };

    view.map.add(graphicLayer);
    view.map.add(textLayer);
    view.map.add(pointLayer);

    view.when(function(){
        view.on('click',function(e){ // 监听鼠标点击事件
            if(e.button !== 0){ // 鼠标左键，1为中键，2为右键
                return;
            }
            var point = [e.mapPoint.x, e.mapPoint.y, e.mapPoint.z];
            addGraphic(point);
        });

        view.on('key-up', function(e){ // 监听键盘按键
            if (e.key == 'Escape') { // 按下esc键
                // 清除线要素
                linePaths = [];
                graphicLayer.removeAll();
                // 清除文字要素
                text = [];
                textLayer.removeAll();
                // 清除点要素
                point = [];
                pointLayer.removeAll();
            }
        });

    });

    function addGraphic(point){
        linePaths.push(point);
        var polyline = {
            type: "polyline", // autocasts as new Polyline()
            paths: linePaths
        };
        var polylineGraphic = new Graphic({
            geometry: polyline,
            symbol: lineSymbol
        });
        if (linePaths.length >= 2) {
            // 计算长度
            var length = geometryEngine.geodesicLength(polylineGraphic.geometry, 'meters');
            // 添加文字
            addText(point, length);
        }

        addPoint(point); // 添加点
        // 添加线
        graphicLayer.removeAll();
        graphicLayer.add(polylineGraphic);
    }

    function addText(point, length){
        var pt = {
            type: "point", // autocasts as new Point()
            x: point[0],
            y: point[1],
            z: point[2]
        };
        textSymbol.text = length.toFixed(3) + 'm';
        var textGraphic = new Graphic({
            geometry: pt,
            symbol: textSymbol
        });
        textGraphics.push(textGraphic);
        textLayer.removeAll();
        textLayer.addMany(textGraphics);
    }

    function addPoint(point){
        var pt = {
            type: "point", // autocasts as new Point()
            x: point[0],
            y: point[1],
            z: point[2]
        };
        var pointGraphic = new Graphic({
            geometry: pt,
            symbol: pointSymbol,
        });
        pointGraphics.push(pointGraphic);
        pointLayer.removeAll();
        pointLayer.addMany(pointGraphics);
    }

})

效果