使用ArcGIS API for JS4.8调用已发布的服务，实现可视域分析

在ArcGIS Server中发布已构建的可视域分析模型发布为空间处理服务中，我们已经将视域分析的计算发布为服务，发布成功后，打开ArcGIS Server管理页面，找到该服务，找到服务的连接地址。使用ArcGIS API for JS调用该服务，即可进行视域分析。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通视分析</title>
    <link type="text/css" rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.8/esri/css/main.css"/>
    <script src="http://localhost/arcgis_js_api/library/4.8/init.js"></script>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="viewDiv"></div>
<script>
    require(["esri/Map",
        "esri/Ground",
        "esri/layers/ElevationLayer",
        "esri/config",
        "esri/views/SceneView",
        "esri/layers/GraphicsLayer",
        "esri/Graphic",
        "esri/geometry/Point",
        "esri/tasks/Geoprocessor",
        "esri/tasks/support/LinearUnit",
        "esri/tasks/support/FeatureSet",
        "dojo/domReady"
    ], function (Map,
                 Ground,
                 ElevationLayer,
                 esriConfig,
                 SceneView,
                 GraphicsLayer, Graphic, Point,
                 Geoprocessor,
                 LinearUnit, FeatureSet
                 ) {
        esriConfig.request.corsEnabledServers.push("localhost:6080");//设置地图服务器已允许跨域
        var customElevation = ElevationLayer({
            url: "http://localhost:6080/arcgis/rest/services/dem/zzdem/ImageServer"
        });
        var map = new Map({
            // basemap: "streets",//ESRI提供的底 图
            basemap: "hybrid",//ESRI提供的影像图
            ground: new Ground({
                layers: [ customElevation ]
            })
        });
        var graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);
        //点击地图样式
        var markerSymbol = {
            type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
            color: [255, 0, 0],
            outline: { // autocasts as new SimpleLineSymbol()
                color: [255, 255, 255],
                width: 2
            }
        };
        //可视域填充样式
        var fillSymbol = {
            type: "simple-fill", // autocasts as new SimpleFillSymbol()
            color: [226, 119, 40, 0.75],
            outline: { // autocasts as new SimpleLineSymbol()
                color: [255, 255, 255],
                width: 1
            }
        };


        var view=new SceneView({
            map:map,
            container: "viewDiv"
        });
        view.ui.remove("attribution");//移除底部ESRI logo
        //第一次位置跳转
        view.when(function () {
            view.goTo({
                position: {
                    x: 113.642578125,
                    y: 34.7222900390625,
                    z: 700,
                    spatialReference: {
                        wkid: 4326
                    }
                },
                heading: 50,
                tilt: 80
            }, {
                speedFactor: 0.7
            });
        });
        //地理处理服务的地址，为GPServr地址+模型名称
        var gpUrl =
            "http://localhost:6080/arcgis/rest/services/gp/view/GPServer/view";
        var gp = new Geoprocessor(gpUrl);
        gp.outSpatialReference = { // 输出坐标系
            wkid: 102100
        };
        //每一次点击地图，都会根据点的位置进行求解计算
        view.on("click", computeViewshed);
        function computeViewshed(event) {
            graphicsLayer.removeAll();

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

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

            graphicsLayer.add(inputGraphic);

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

            var vsDistance = new LinearUnit();
            vsDistance.distance = 1000;
            vsDistance.units = "meters";//注意单位

            var params = {
                point: featureSet,//对应发布服务的point参数，为当前视点平面位置
                dis: vsDistance//对应发布服务的dis参数，为可视的距离
            };
            //同步异步和服务器的设置有关
            // 进行异步查询，使用gp.excute为同步查询
            gp.submitJob(params).then(drawResultData,outError);
            //进行同步查询
            // gp.execute(params).then(drawResult,outError);
        }
        //接收异步结果，进行绘制
        function drawResultData(result) {
            console.log("分析完成");
            console.log(result);
            var jobId=result.jobId;
            //根据jobID获取分析结果
            //下面的第二个参数为，发布服务时，看到的结果参数的名称
            gp.getResultData(jobId,"result").then(function (value) {
                console.log("查询完成");
                var resultFeatures = value.value.features;
                // 给每一个结果添加样式
                var viewshedGraphics = resultFeatures.map(function(feature) {
                    feature.symbol = fillSymbol;
                    return feature;
                });

                // 从俯视状态看结果
                graphicsLayer.addMany(viewshedGraphics);
                view.goTo({
                    target: viewshedGraphics,
                    tilt: 0
                });
            },outError)
        }
        //接收同步结果记性绘制
        // function drawResult(result) {
        //     var resultFeatures = result.results[0].value.features;
        //     // 配置样式
        //     var viewshedGraphics = resultFeatures.map(function(feature) {
        //         feature.symbol = fillSymbol;
        //         return feature;
        //     });
        //
        //    // 将结果添加到地图
        //     graphicsLayer.addMany(viewshedGraphics);
        //     view.goTo({
        //         target: viewshedGraphics,
        //         tilt: 0
        //     });
        // }
        //输出错误
        function outError(e){
            console.error(e);
        }
    })
</script>
</body>
</html>
结果下入：从点过查询点，到图上出结果需要2-3分钟的时间，耐心等待，不要重复点击。
使用ArcGIS API for JS4.8调用已发布的服务，实现可视域分析

猜你喜欢
