GeoScene 调用GP服务同步

最新推荐文章于 2024-03-28 11:20:14 发布

之乎者也哦

最新推荐文章于 2024-03-28 11:20:14 发布

阅读量659

点赞数 1

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

本文链接：https://blog.csdn.net/hb_programmer/article/details/121559201

版权

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/pointBuffer/GPServer/%E6%A8%A1%E5%9E%8B";

                //创建显示图层
                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 = {
                        point: featureSet,
                        dis: dis
                    };

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


                //执行结果
                function drawResultData(result) {
                    const resultFeatures = result.results[0].value.features;
                    console.log(resultFeatures);

                    //显示缓冲区
                    const graphic = resultFeatures.map((feature) => {
                        feature.symbol = fillSymbol;
                        return feature;
                    });
                    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>

效果：