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

灰太狼 2022-09-07 06:56 207阅读 0赞

1、这里引用官方的例子：[Geoprocessing - viewshed analysis | ArcGIS API for JavaScript][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、效果:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70][]

[Geoprocessing - viewshed analysis _ ArcGIS API for JavaScript]: https://developers.arcgis.com/javascript/latest/sample-code/geoprocessing-viewshed/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hCX1Byb2dyYW1tZXI_size_16_color_FFFFFF_t_70]: /images/20220829/fba43778c3d9465cb01b9e78f92fd144.png