arcgis js（九）地理处理任务三维可视域分析

最新推荐文章于 2023-08-24 13:44:11 发布

之乎者也哦

最新推荐文章于 2023-08-24 13:44:11 发布

阅读量888

点赞数 1

分类专栏： Web GIS 开发文章标签： GIS

本文链接：https://blog.csdn.net/HB_Programmer/article/details/119856698

版权

Web GIS 开发专栏收录该内容

12 篇文章 18 订阅

订阅专栏

1、这里引用官方的例子：Geoprocessing - viewshed analysis | ArcGIS API for JavaScript

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>
        Geoprocessing - viewshed analysis | Sample | ArcGIS API for JavaScript
        4.20
    </title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #paneDiv {
            position: absolute;
            top: 18px;
            right: 18px;
            padding: 12px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            width: 200px;
        }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.20/"></script>

    <script>
        require([
            "esri/Map",
            "esri/views/SceneView",
            "esri/layers/GraphicsLayer",
            "esri/Graphic",
            "esri/geometry/Point",
            "esri/rest/geoprocessor",
            "esri/rest/support/LinearUnit",
            "esri/rest/support/FeatureSet"
        ], (
            Map,
            SceneView,
            GraphicsLayer,
            Graphic,
            Point,
            geoprocessor,
            LinearUnit,
            FeatureSet
        ) => {
            const gpUrl =
                "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Elevation/ESRI_Elevation_World/GPServer/Viewshed";

            const map = new Map({
                basemap: "hybrid",
                ground: "world-elevation"
            });

            const view = new SceneView({
                container: "viewDiv",
                map: map,
                camera: {
                    position: [7.59564, 46.06595, 5184],
                    tilt: 70
                }
            });

            const graphicsLayer = new GraphicsLayer();
            map.add(graphicsLayer);

            const markerSymbol = {
                type: "simple-marker",
                color: [255, 0, 0],
                outline: {
                    color: [255, 255, 255],
                    width: 2
                }
            };

            const fillSymbol = {
                type: "simple-fill",
                color: [226, 119, 40, 0.75],
                outline: {
                    color: [255, 255, 255],
                    width: 1
                }
            };

            const options = {
                outSpatialReference: {
                    wkid: 102100
                }
            };

            view.on("click", computeViewshed);

            function computeViewshed(event) {
                graphicsLayer.removeAll();

                const point = new Point({
                    longitude: event.mapPoint.longitude,
                    latitude: event.mapPoint.latitude
                });

                const inputGraphic = new Graphic({
                    geometry: point,
                    symbol: markerSymbol
                });

                graphicsLayer.add(inputGraphic);

                const inputGraphicContainer = [];
                inputGraphicContainer.push(inputGraphic);
                const featureSet = new FeatureSet();
                featureSet.features = inputGraphicContainer;

                const vsDistance = new LinearUnit();
                vsDistance.distance = 5;
                vsDistance.units = "miles";

                const params = {
                    Input_Observation_Point: featureSet,
                    Viewshed_Distance: vsDistance
                };

                geoprocessor.execute(gpUrl, params, options).then(drawResultData);
            }

            function drawResultData(result) {
                const resultFeatures = result.results[0].value.features;

                // Assign each resulting graphic a symbol
                const viewshedGraphics = resultFeatures.map((feature) => {
                    feature.symbol = fillSymbol;
                    return feature;
                });

                // Add the resulting graphics to the graphics layer
                graphicsLayer.addMany(viewshedGraphics);

                view
                    .goTo({
                        target: viewshedGraphics,
                        tilt: 0
                    })
                    .catch((error) => {
                        if (error.name != "AbortError") {
                            console.error(error);
                        }
                    });
            }
        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
    <div id="paneDiv" class="esri-widget">
        Click on map to execute ViewShed GP Task
    </div>
</body>

</html>

2、效果:

之乎者也哦

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
arcgis js（九）地理处理任务三维可视域分析

1、这里引用官方的例子：https://developers.arcgis.com/javascript/latest/sample-code/geoprocessing-viewshed/<html><head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
复制链接

扫一扫