arcgis 爆管分析，线路规划前端

最新推荐文章于 2023-09-18 11:46:17 发布

@chenk

最新推荐文章于 2023-09-18 11:46:17 发布

阅读量433

点赞数

分类专栏： arcgis 文章标签： arcgis 前端 javascript

本文链接：https://blog.csdn.net/weixin_38845058/article/details/127752274

版权

arcgis 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

线路规划：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>RouteTask | Sample | ArcGIS API for JavaScript 4.18</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.18/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.18/"></script>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/tasks/RouteTask",
        "esri/tasks/support/RouteParameters",
        "esri/tasks/support/FeatureSet",
        "esri/layers/TileLayer",
        "esri/layers/MapImageLayer"
      ], function (
        Map,
        MapView,
        Graphic,
        GraphicsLayer,
        RouteTask,
        RouteParameters,
        FeatureSet,
        TileLayer,
        MapImageLayer
      ) {
        // Point the URL to a valid route service that uses an
        // ArcGIS Online hosted service proxy
        var routeTask = new RouteTask({
          url:
            "http://47.111.86.138:6080/arcgis/rest/services/custom/ruchengNa/NAServer/Route"
        });

        // The stops and route result will be stored in this layer
        var routeLayer = new GraphicsLayer();

        // Setup the route parameters
        var routeParams = new RouteParameters({
          stops: new FeatureSet(),
          outSpatialReference: {
            // autocasts as new SpatialReference()
            wkid: 3857
          }
        });

        // Define the symbology used to display the stops
        var stopSymbol = {
          type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
          style: "cross",
          size: 15,
          outline: {
            // autocasts as new SimpleLineSymbol()
            width: 10
          }
        };

        // Define the symbology used to display the route
        var routeSymbol = {
          type: "simple-line", // autocasts as SimpleLineSymbol()
          color: [0, 0, 255, 0.5],
          width: 10
        };



      // 加载img底图
       let XJLayer = new TileLayer({
        url: "http://ip:6080/arcgis/rest/services/custom/rucheng_gis/MapServer",
       });


     var layer1 = new MapImageLayer({
          url: "http://ip:6080/arcgis/rest/services/custom/ruchengNa/MapServer"
       });

      var map = new Map({
        basemap: {
          baseLayers: [XJLayer,routeLayer],
        },
      });
      
      
      map.add(layer1)

        var view = new MapView({
          container: "viewDiv", // Reference to the scene div created in step 5
          map: map, // Reference to the map object created before the scene
          center: [113.693561, 25.558533],
           scale: 24000
        });

        // Adds a graphic when the user clicks the map. If 2 or more points exist, route is solved.
        view.on("click", addStop);

        function addStop(event) {
		console.log(event)
          // Add a point at the location of the map click
          var stop = new Graphic({
            geometry: event.mapPoint,
            symbol: stopSymbol
          });
		  console.log(stop,"stop")
          routeLayer.add(stop);

          // Execute the route task if 2 or more stops are input
          routeParams.stops.features.push(stop);
          if (routeParams.stops.features.length >= 2) {
            routeTask.solve(routeParams).then(showRoute);
          }
        }
        // Adds the solved route to the map as a graphic
        function showRoute(data) {
          console.log(data,"data")
          var 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>
          Click on the map to add stops to the route. The route from the last
          stop to the newly added stop is calculated. If a stop is not
          reachable, it is removed and the last valid point is set as the
          starting point.
        </p>
      </div>
    </div>
  </body>
</html>

爆管分析：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>RouteTask | Sample | ArcGIS API for JavaScript 4.18</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.18/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.18/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/layers/GraphicsLayer",
      "esri/tasks/RouteTask",
      "esri/tasks/support/RouteParameters",
      "esri/tasks/support/FeatureSet",
      "esri/layers/TileLayer",
      "esri/layers/MapImageLayer",
      "esri/tasks/Geoprocessor"
    ], function (
      Map,
      MapView,
      Graphic,
      GraphicsLayer,
      RouteTask,
      RouteParameters,
      FeatureSet,
      TileLayer,
      MapImageLayer,
      Geoprocessor
    ) {




     const routeLayer = new GraphicsLayer();


      // 加载img底图
      let XJLayer = new TileLayer({
        url: "http://ip:6080/arcgis/rest/services/pro/rc_16/MapServer",
      });


      var layer1 = new MapImageLayer({
        url: "http://ip:6080/arcgis/rest/services/custom/ruchengNa/MapServer"
      });

      var map = new Map({
        basemap: {
          baseLayers: [XJLayer],
        },
      });


      //map.add(layer1)

      var view = new MapView({
        container: "viewDiv", // Reference to the scene div created in step 5
        map: map, // Reference to the map object created before the scene
        center: [113.693561, 25.558533],
        scale: 24000
      });

      var gp = new Geoprocessor({
        url: "http://ip:6080/arcgis/rest/services/custom/rucheng_pro/GPServer/rucheng2",
        outSpatialReference: {
          wkid: 102100
        }
      });





      var params = {
        "displayFieldName": "",
        "geometryType": "esriGeometryPoint",
        "spatialReference": {
          "wkid": 102100,
          "latestWkid": 3857
        },
        "fields": [{
          "name": "OID",
          "type": "esriFieldTypeOID",
          "alias": "OID"
        }],
        "features": [{
          "attributes": {
            "OID": 1
          },
          "geometry": {
            "x": 1.2655555081799999E7,
            "y": 2942104.0194999985
          }
        }],
        "exceededTransferLimit": false
      }
      var result = gp.execute({
        Flags: params,
        returnM:false,
        returnZ:false
      }).then(function(res){
		var list =res.results[0].value;
        routeLayer.addMany(list.features);
		map.add(routeLayer)
      })

  
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="paneDiv" class="esri-widget">
    <div>
      <p>
        Click on the map to add stops to the route. The route from the last
        stop to the newly added stop is calculated. If a stop is not
        reachable, it is removed and the last valid point is set as the
        starting point.
      </p>
    </div>
  </div>
</body>

</html>