ArcGIS API For Javascript 4.15 绘制地图：结合 Echarts 绘制地形剖面图

Myth丶恋晨 2022-12-26 15:28 166阅读 0赞

## 1、HTML 页面 ##

## index.html
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>第十讲-绘制地形剖面图</title>
        <link rel="stylesheet" href="http://localhost/arcgis_js_api/4.15/esri/css/main.css">
        <link rel="stylesheet" href="css/index.css">
        <script src="lib/echarts-4.2.1.js"></script>
        <script src="http://localhost/arcgis_js_api/4.15/init.js"></script>
        <script src="js/index.js"></script>
    </head>
    
    <body>
        <div id="viewDiv">
            <div class="chartPanel">
                <button id="drawPolyline">绘制剖面线</button>
                <div id="echartDiv"></div>
            </div>
        </div>
    </body>
    </html>

## 2、样式设置 ##

## index.css html, body { 
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }
    
    #viewDiv { 
        width: 100%;
        height: 100%;
    }
    
    .chartPanel { 
        position: absolute;
        top: 20px;
        right: 20px;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 10px;
    }
    
    #echartDiv { 
        width: 600px;
        height: 360px;
        background-color: rgba(250, 250, 250, 0.5);
    }

## 3、Javascript API 实现地图绘制 ##

## index.js
    
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/views/SceneView",
        "esri/layers/MapImageLayer",
        "esri/layers/TileLayer",
        "esri/layers/ElevationLayer",
        "esri/geometry/geometryEngine",
        "esri/views/draw/Draw",
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/geometry/Polyline",
        "esri/geometry/Point"
    ], function(
        Map,
        MapView,
        SceneView,
        MapImageLayer,
        TileLayer,
        ElevationLayer,
        geometryEngine,
        Draw,
        Graphic,
        GraphicsLayer,
        Polyline,
        Point
    ) { 
        // 记录剖面线的每一个结点
        var pointList = [];
        var hilightPointLayer = new GraphicsLayer();
        var nmg30dem = new ElevationLayer({ 
            url: "http://127.0.0.1:6080/arcgis/rest/services/nm_dem_30m_w/ImageServer"
        });
        var map = new Map({ 
            basemap: "hybrid",
            layers: [hilightPointLayer]
        });
        var view = new MapView({ 
            container: "viewDiv",
            map: map,
            center: [111.43, 40.85],
            zoom: 10
        });
        var draw = new Draw({ 
            view: view
        });
    
        document.getElementById("drawPolyline").addEventListener("click", function() { 
            enableCreatePolyline(draw);
        });
    
        function enableCreatePolyline(draw) { 
            var action = draw.create("polyline", {  mode: "click" });
            action.on("vertex-add", function(evt) { 
                var polyline = createPolyline(evt.vertices);
                createPolylineGraphic(polyline);
            });
            action.on("vertex-remove", function(evt) { 
                var polyline = createPolyline(evt.vertices);
                createPolylineGraphic(polyline);
            });
            action.on("cursor-update", function(evt) { 
                var polyline = createPolyline(evt.vertices);
                createPolylineGraphic(polyline);
            });
            action.on("draw-complete", function(evt) { 
                var polyline = createPolyline(evt.vertices);
                createPolylineGraphic(polyline);
                console.log("-----draw complete-----");
                drawProfile(polyline);
            });
        }
    
        function createPolyline(vertices) { 
            var polyline = new Polyline({ 
                paths: vertices,
                spatialReference: view.spatialReference
            });
            return polyline;
        }
    
        function createPolylineGraphic(polyline) { 
            view.graphics.removeAll();
            var graphic = new Graphic({ 
                geometry: polyline,
                symbol: { 
                    type: "simple-line",
                    color: [0, 0, 255],
                    width: 2
                }
            });
            view.graphics.add(graphic);
        }
    
        function drawProfile(polyline) { 
            // 1. 对绘制的线进行结点加密
            var totalLength = geometryEngine.geodesicLength(polyline, "meters");
            var segLength = totalLength / 50;
            var desifiedPolyline = geometryEngine.densify(polyline, segLength, "meters");
            // 把加密后的每一个结点在地图中进行展示
            desifiedPolyline.paths[0].forEach(point => { 
                console.log(point);
                var graphic = new Graphic({ 
                    geometry: new Point({  x: point[0], y: point[1], spatialReference: view.spatialReference }),
                    symbol: { 
                        type: "simple-marker",
                        size: 10,
                        color: "red",
                        style: "circle"
                    }
                });
                view.graphics.add(graphic);
            });
            // 2. 提取加密后的线的每一个结点的高程值
            nmg30dem.queryElevation(desifiedPolyline).then(function(result) { 
                var zArray = result.geometry.paths[0].map(point => { 
                    return point[2].toFixed(2);
                });
                var segCount = desifiedPolyline.paths[0].length - 1;
                var lengthArray = [];
                pointList = [];
                for (var i = 0; i <= segCount; i++) { 
                    var vertices = desifiedPolyline.paths[0].slice(0, i + 1);
                    var segment = createPolyline(vertices);
                    var length = geometryEngine.geodesicLength(segment, "meters").toFixed(0).toString();
                    lengthArray.push(length);
                    pointList.push({ 
                        name: length,
                        geometry: new Point({ 
                            x: vertices[i][0],
                            y: vertices[i][1],
                            spatialReference: view.spatialReference
                        })
                    });
                }
                var data = { 
                    x: lengthArray,
                    y: zArray
                };
                createChart(data);
            });
        }
    
        function createChart(data) { 
            var chart = echarts.init(document.getElementById("echartDiv"));
            var option = { 
                tooltip: { 
                    trigger: 'axis',
                    formatter: "海拔：{c}米"
                },
                xAxis: { 
                    type: 'category',
                    boundaryGap: false,
                    data: data.x,
                    name: "距离（单位：米）",
                    nameLocation: "center",
                    nameGap: 30
                },
                yAxis: { 
                    type: 'value',
                    name: "海拔（单位：米）",
                    nameLocation: "center",
                    nameGap: 40,
                    min: function(value) { 
                        return Math.floor(value.min / 100) * 100;
                    }
                },
                series: [{ 
                    data: data.y,
                    type: 'line',
                    areaStyle: { }
                }]
            };
            chart.setOption(option);
            // 实现折线图和地图的联动
            // 当鼠标点击折线图上的小圆点时，地图上会显示对应的结点
            chart.on("click", function(value) { 
                var pName = value.name;
                var point = pointList.find(p => { 
                    return p.name === pName
                });
                if (point) { 
                    hilightPointLayer.graphics.removeAll();
                    var graphic = new Graphic({ 
                        geometry: point.geometry,
                        symbol: { 
                            type: "simple-marker",
                            size: 10,
                            color: "red",
                            style: "circle"
                        }
                    });
                    hilightPointLayer.graphics.add(graphic);
                }
            });
        }
    });

## 4、Echarts 引入 ##

![20201206144932412.png_pic_center][]

[20201206144932412.png_pic_center]: /images/20221120/26f5597c00254584a0a3708947c76e02.png