ArcGIS API for Javascript4.8 路径网络分析、最短路径查询

本文所使用路径分析服务的数据与服务可以在ArcGIS Desktop 10.3制作网络数据集，并通过ArcGIS Server发布为NAServer中找到。使用ArcGIS API for JavaScript4.8调用该服务进行查询。结果如下图：

代码是在官方demo上修改来的，官方的demo是需要设备代理服务器，才能显示效果的，这里我直接设置了ArcGIS Server允许跨域，所以不需要设置代理。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>ArcGIS demo</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/config",
        "esri/views/MapView",
        "esri/layers/MapImageLayer",
        "esri/geometry/Extent",
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/tasks/RouteTask",
        "esri/tasks/support/RouteParameters",
        "esri/tasks/support/FeatureSet",
        "dojo/on",
        "dojo/domReady"
    ], function (Map,
                 esriConfig,
                 MapView,
                 MapImageLayer,
                 Extent,
                 Graphic,
                 GraphicsLayer,
                 RouteTask,
                 RouteParameters,
                 FeatureSet,
                 on
    ) {
        esriConfig.request.corsEnabledServers.push("localhost:6080");//设置地图服务器已允许跨域
        var routeLayer = new GraphicsLayer();
        //layer为原始路网数据层，可以不添加
        var layer=new MapImageLayer({
            url:"http://localhost:6080/arcgis/rest/services/route/MapServer"
        });
        var map = new Map({
           basemap: "streets",
            layers:[layer,routeLayer]
        });
        //起始点样式
        var stopSymbol = {
            type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
            style: "cross",
            size: 15,
            outline: { // autocasts as new SimpleLineSymbol()
                width: 4
            }
        };
        //返回路线样式
        var routeSymbol = {
            type: "simple-line", // autocasts as SimpleLineSymbol()
            color: [0, 0, 255, 0.5],
            width: 5
        };
        //查询参数
        var routeParams = new RouteParameters({

            stops: new FeatureSet(),//停靠点
            // barriers:new FeatureSet(),//可通过此属性设置障碍点
            outSpatialReference: { // 输出投影
                wkid: 3857
            }
        });
        //ArcGIS Server NA服务地址，NAServer/后为NAServer里的图层名称，不支持中文，建议在发布服务前改掉
        var routeTask = new RouteTask({
            url: "http://localhost:6080/arcgis/rest/services/routeService/NAServer/path"
        });
        // 二维视图
        var view = new MapView({
            map: map,
            container: "viewDiv"
        });

        view.ui.remove("attribution");//移除底部ESRI logo
        //初始化位置
        view.when(function () {
            view.extent = new Extent({
                xmin: 9170813.75677811,
                ymin: 5213570.648163019,
                xmax: 1.521319180644298E7,
                ymax: 8073715.481906304,
                spatialReference: {
                    wkid: 3857
                }
            })
        });
        //点击地图添加停靠点
        on(view, "click", addStop);
        function addStop(event) {
            // 将停靠点添加在地图上
            var stop = new Graphic({
                geometry: event.mapPoint,
                symbol: stopSymbol
            });
            routeLayer.add(stop);

            // 将点击点加入到计算参数中，超过两个点则开始计算路线
            routeParams.stops.features.push(stop);
            if (routeParams.stops.features.length >= 2) {
                // 进行查询
                routeTask.solve(routeParams).then(showRoute,logError);
            }
        }
        //输出查询的结果
        function showRoute(data) {
            var routeResult = data.routeResults[0].route;
            routeResult.symbol = routeSymbol;
            routeLayer.add(routeResult);
        }
        //输出查询错误信息
        function logError(error) {
            console.error(error);
        }
    })
</script>
</body>

</html>

ArcGIS API for Javascript4.8 路径网络分析、最短路径查询

猜你喜欢