ArcGIS JSAPI 学习教程 - 可视域分析图层介绍-创建与编辑

- 完整代码
- 在线示例
本文主要介绍一下可视域分析图层介绍。
arcgis js 新版本更新了可视域分析图层类，相对于之前的用法，操作起来更加方便。
本文主要介绍一下，可视域图层的创建、编辑与创建可视域分析。
本文包括完整代码以及在线示例。
完整代码

html 复制代码
<html>

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>
        可视域分析多图层 | ArcGIS API for JavaScript 4.33
    </title>

    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
        }

        #viewDiv .esri-attribution {
            display: none;
        }

        #myCustomGroup {
            position: absolute;
            top: 150px;
            left: 64px;
        }
    </style>

    <script type="module" src="https://openlayers.vip/arcgis_api/calcite-components/2.8.1/calcite.esm.js"></script>

    <link rel="stylesheet" href="https://openlayers.vip/arcgis_api/4.33/esri/themes/light/main.css"/>
    <script src="https://openlayers.vip/arcgis_api/4.33/init.js"></script>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?f80a36f14f8a73bb0f82e0fdbcee3058";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

    <script>
        require([
            "esri/Map",
            "esri/views/SceneView",
            'esri/layers/IntegratedMeshLayer',
            'esri/layers/ViewshedLayer',
            'esri/analysis/ViewshedAnalysis',
            'esri/analysis/Viewshed',
            "esri/geometry/Point",
            'esri/widgets/LayerList'], (
            Map,
            SceneView,
            IntegratedMeshLayer,
            ViewshedLayer,
            ViewshedAnalysis,
            Viewshed,
            Point,
            LayerList
        ) => {

            // 创建倾斜摄影
            var layer = new IntegratedMeshLayer({
                title: '倾斜摄影图层',
                url: "https://gs3d.geosceneonline.cn/server/rest/services/Hosted/hk1/SceneServer",
            });


            // 创建场景
            const map = new Map({
                layers: [layer],
            });


            // 创建可视域分析对象
            const viewshedAnalysis = new ViewshedAnalysis({
                viewsheds: [
                    // 可视域对象
                    new Viewshed({
                        // 观察点
                        observer: new Point({
                            spatialReference: {
                                latestWkid: 3857,
                                wkid: 102100,
                            },
                            x: 12710561.590172164,
                            y: 2541654.800844678,
                            z: 80.210722059971886,
                        }),
                        // 可视域参数
                        farDistance: 300,
                        heading: 64,
                        tilt: 84,
                        // 可视域观察角度
                        horizontalFieldOfView: 360,
                        verticalFieldOfView: 180,
                    })
                ]
            });


            // 创建可视域图层
            const viewshedLayer = new ViewshedLayer({
                // 可视域分析对象
                title: '可视域分析',
            });

            // 创建可视域图层
            const viewshedLayerSphere = new ViewshedLayer({
                // 可视域分析对象
                source: viewshedAnalysis,
                title: '球形可视域分析',
            });

            // 添加到地图汇总
            map.add(viewshedLayer);
            map.add(viewshedLayerSphere);

            const view = new SceneView({
                container: "viewDiv",
                map: map
            });

            view.when(function () {
                view.extent = layer.fullExtent;
            })

            // 开启编辑
            view.whenLayerView(viewshedLayerSphere).then(
                // 可视域图层视图
                function (viewshedLayerView_) {
                    // 开启交互编辑
                    viewshedLayerView_.interactive = true;
                }
            )

            let viewshedLayerView;

            view.whenLayerView(viewshedLayer).then(
                // 可视域图层视图
                function (viewshedLayerView_) {
                    viewshedLayerView = viewshedLayerView_;
                }
            )

            let activateCreateViewsheds = true;
            // Toggle button to enable/disable the custom render node
            const renderNodeToggle = document.getElementById("renderNodeToggle");
            renderNodeToggle.addEventListener("calciteSwitchChange", () => {
                // 开启标绘创建可视域
                if (activateCreateViewsheds) {
                    viewshedLayerView?.createViewsheds();
                } else {
                    viewshedLayerView.interactive = false;
                }
                activateCreateViewsheds = !activateCreateViewsheds;
            });

            const layerList = new LayerList({
                view: view
            });

            view.ui.add(layerList, {
                position: "top-left",
                index: 0
            });
        });


    </script>
</head>

<body>
<div id="viewDiv" style="float: left; width: 100%; height: 100%">
</div>

<div id="myCustomGroup">
    <calcite-block open heading="是否开启可视域绘制" id="renderNodeUI">
        <calcite-label layout="inline">
            关闭
            <calcite-switch id="renderNodeToggle"></calcite-switch>
            开启
        </calcite-label>
    </calcite-block>
</div>

</body>

</html>
在线示例

ArcGIS Maps SDK for JavaScript 在线示例：可视域分析图层介绍