ArcGIS API for JavaScript网络分析-最短路径分析

最新推荐文章于 2024-08-15 22:11:29 发布

冷雨828

最新推荐文章于 2024-08-15 22:11:29 发布

阅读量906

点赞数 1

分类专栏： ArcGIS API for JavaScript 文章标签： arcgis javascript 开发语言

本文链接：https://blog.csdn.net/huangguo1688/article/details/128654784

版权

ArcGIS API for JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该示例展示了如何利用ArcGISAPIforJavaScript4.22进行路线规划。用户可以点击地图添加途径点，当有至少两个点时，API将计算并显示最短路径。此外，还提到了通过调用REST接口解决网络分析服务来获取最短路径的方法。

摘要由CSDN通过智能技术生成

方法一、直接调用route和RouteParameters接口。

1.1、完整代码如下

<!-- 

To run this demo, you need to replace 'YOUR_API_KEY' with an API key from the ArcGIS Developer dashboard.

Sign up for a free account and get an API key.

https://developers.arcgis.com/documentation/mapping-apis-and-services/get-started/

 -->
 <html>
    <head>
      <meta charset="utf-8" />
      <meta
        name="viewport"
        content="initial-scale=1,maximum-scale=1,user-scalable=no"
      />
      <title>Route | Sample | ArcGIS API for JavaScript 4.22</title>
      <style>
        html,
        body,
        #viewDiv {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        }
  
        #paneDiv {
          position: absolute;
          top: 10px;
          left: 62px;
          padding: 0 12px 0 12px;
          background-color: rgba(0, 0, 0, 0.5);
          color: white;
        }
      </style>
  
      <link
        rel="stylesheet"
        href="https://js.arcgis.com/4.22/esri/themes/light/main.css"
      />
      <script src="https://js.arcgis.com/4.22/"></script>
  
      <script>
        require([
          "esri/Map",
          "esri/views/MapView",
          "esri/Graphic",
          "esri/layers/GraphicsLayer",
          "esri/rest/route",
          "esri/rest/support/RouteParameters",
          "esri/rest/support/FeatureSet",
          "esri/layers/MapImageLayer",
        ], function (
          Map,
          MapView,
          Graphic,
          GraphicsLayer,
          route,
          RouteParameters,
          FeatureSet,
          MapImageLayer
        ) {
          const routeUrl = "http://**/arcgis/rest/services/ljfl/pathPlanning/NAServer/route";
          const mapurl = 'http://**/arcgis/rest/services/ljfl/pathPlanning/MapServer';
          const maplayer = new MapImageLayer({ url: mapurl });
          const routeLayer = new GraphicsLayer();
          const routeParams = new RouteParameters({
            stops: new FeatureSet(),
            outSpatialReference: {
              wkid: 4490
            }
          });
  
          const stopSymbol = {
            type: "simple-marker", 
            style: "cross",
            size: 15,
            outline: {
              width: 4
            }
          };
  
          const routeSymbol = {
            type: "simple-line", 
            color: [0, 0, 255, 0.5],
            width: 5
          };
  
          const map = new Map({
            basemap: "streets-navigation-vector",
            layers: [routeLayer,maplayer] 
          });
  
          const view = new MapView({
            container: "viewDiv", 
            map: map,
            center: [106.646621,26.616976],
            zoom: 13
          });
 
          view.on("click", addStop);
  
          function addStop(event) {
            const stop = new Graphic({
              geometry: event.mapPoint,
              symbol: stopSymbol
            });
            routeLayer.add(stop);
  
            routeParams.stops.features.push(stop);
            if (routeParams.stops.features.length >= 2) {
              route.solve(routeUrl, routeParams).then(showRoute);
            }
          }
          function showRoute(data) {
            const routeResult = data.routeResults[0].route;
            routeResult.symbol = routeSymbol;
            routeLayer.add(routeResult);
          }
        });
      </script>
    </head>
    <body>
      <div id="viewDiv"></div>
      <div id="paneDiv" class="esri-widget">
        <div>
          <p>
            点击添加途径点，大于等于两个点就生成最短路径。
          </p>
        </div>
      </div>
    </body>
  </html>

1.2、结果演示