GeoScene 调用GP服务异步

最新推荐文章于 2024-05-27 17:13:38 发布

之乎者也哦

最新推荐文章于 2024-05-27 17:13:38 发布

阅读量703

点赞数 1

分类专栏： GeoScene Pro 文章标签： android GIS vue.js

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

版权

GeoScene Pro 专栏收录该内容

3 篇文章 11 订阅

订阅专栏

以点的缓冲区分析为例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.20/"></script>

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

    <script>
        require(["esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/Basemap",
            "esri/layers/GraphicsLayer",
            "esri/Graphic",
            "esri/geometry/Point",
            "esri/rest/geoprocessor",
            "esri/rest/support/LinearUnit",
            "esri/rest/support/FeatureSet",
            "esri/geometry/SpatialReference",
        ],
            function (
                esriConfig,
                Map,
                MapView,
                Basemap,
                GraphicsLayer,
                Graphic,
                Point,
                geoprocessor,
                LinearUnit,
                FeatureSet,
                SpatialReference
            ) {
                const map = new Map({
                    basemap: "hybrid"
                });

                const view = new MapView({
                    map: map,
                    center: [117, 36.65],
                    scale: 60000,
                    container: "viewDiv"
                });

                const gpUrl = "https://gisserver.jysj.cn/geoserver/rest/services/bufferAsy/GPServer/buffer";

                //创建显示图层
                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
                    },
                };              

                //单击事件
                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 dis = new LinearUnit();
                    dis.distance = 1000;
                    dis.units = "meters";

                    const params = {
                        点: featureSet,
                        距离__值或字段_: dis
                    };

                    //执行gp task
                    geoprocessor.submitJob(gpUrl, params).then(drawResultData);
                }

                //执行结果
                function drawResultData(jobInfo) {
                    var jobId = jobInfo.jobId;
                    const options = {
                        interval: 1000,
                        statusCallback: (j) => {
                            console.log("Job Status: ", j.jobStatus);
                        }
                    };
                    jobInfo.waitForJobCompletion(options).then(() => {
                        const features = jobInfo.fetchResultData("输出要素类");
                        features.then((feature) => {
                            console.log(feature);
                            const ret = feature.value.features;
                            console.log(feature.value.geometryType);
                            //显示缓冲区
                            const graphic = ret.map((f) => {
                                f.symbol = fillSymbol;
                                return f;
                            });
                            graphicsLayer.addMany(graphic);
                            view.goTo({
                                target: graphic,
                                tilt: 0
                            }).catch((error) => {
                                if (error.name != "AbortError") {
                                    console.error(error);
                                }
                            });
                        })
                    });
                }


            });

    </script>


</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

效果：

之乎者也哦

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
GeoScene 调用GP服务异步

以点的缓冲区分析为例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
复制链接

扫一扫