Arcgis route demo

能力	描述	收费情况
简单路径计算route	坐标点之间的路径计算	20,000 条路线免费，然后每 1,000 条路线 0.5 美元
坐标点的服务区域Service areas	驾驶或行走时可以到达的区域	5,000 个服务区免费，然后每 1,000 个服务区 50 美元
路线安排	提供线路服务的同时最小化整体运输成本的过程	每 1,000 条路线 50 美元
最近设施点路线	根据行程时间或行程距离从事件中查找一个或多个附近设施点	每 1,000 条路线 50 美元

注：仅route、service areas 支持 JS API调用

Arcgis route demo

效果图

1、模块添加等操作(这里注意官方文档对route模块使用的是export 来导出，因此需要注意引入方式)

import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import esriConfig from "@arcgis/core/config";
import Graphic from "@arcgis/core/Graphic";
import Point from "@arcgis/core/geometry/Point"; // 经纬度点
import { solve } from "@arcgis/core/rest/route";
import RouteParameters from "@arcgis/core/rest/support/RouteParameters";
import FeatureSet from "@arcgis/core/rest/support/FeatureSet";

2、地图注册

 const map = new Map({
    basemap: 'arcgis-navigation'
  });  
const view = new MapView({
    container: "viewDiv",
    map: map,
    center: new Point([-122.62, 45.526201]),
    zoom: 12,
    constraints: {
      snapToZoom: false
    }
  });

3、先定义几个点绘制在地图上

  const origin = new Point([-122.690176, 45.522054]);
  const stop = new Point([-122.614995, 45.526201]);
  const destination = new Point([-122.68782, 45.51238]); 
  const graphic = new Graphic({
      symbol: {
        type: "simple-marker",
        color: '#000000',
        size: size,
        outline: {
          color: '#ffffff',
          width: "1px"
        }
      },
      geometry: point
    });
    view.graphics.add(graphic);

4、连线

/**
* stops: 起始点信息
* routeUrl // 引用路由服务的变量
* returnDirections 控制solve方法return的routeResults有没有路径文字信息
*/ 
function getRoute() {
    const routeUrl = "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World";
    const routeParams = new RouteParameters({
      stops: new FeatureSet({
        features: view.graphics.toArray()
      }),
        returnDirections:true
    });
     //调用solve方法获取路由
    solve(routeUrl, routeParams)
      .then((data) => {
        if (data.routeResults.length > 0) {
          showRoute(data.routeResults[0].route);
        }
      })
      .catch((error) => {
        console.log(error);
      })
  }

  function showRoute(routeResult) {
    routeResult.symbol = {
      type: "simple-line",
      color: [5, 150, 255],
      width: 3
    };
    view.graphics.add(routeResult, 0);
  }

Arcgis Fleet-routing demo

Arcgis Closest facility routing demo

Arcgis Service areas demo

效果图

1、模块引入(同理需要注意networkService、serviceArea的引入)

import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import esriConfig from "@arcgis/core/config";
import Graphic from "@arcgis/core/Graphic";
import ScaleBar from "@arcgis/core/widgets/ScaleBar"; // 比例尺
import { fetchServiceDescription } from "@arcgis/core/rest/networkService"; //出行模式travelMode需要
import { solve } from "@arcgis/core/rest/serviceArea";
import FeatureSet from "@arcgis/core/rest/support/FeatureSet";
import ServiceAreaParameters from "@arcgis/core/rest/support/ServiceAreaParameters";

2、地图注册

  const map = new Map({
    basemap: "arcgis-navigation"
  });
  const view = new MapView({
    container: "viewDiv",
    map,
    center: [-117.133163, 34.022445],
    zoom: 13,
    constraints: {
      snapToZoom: false
    }
  });

3、根据中心点圈出服务范围

async function findServiceArea(locationFeature) {
    const serviceAreaParameters = new ServiceAreaParameters({
      facilities: new FeatureSet({
        features: [locationFeature]
      }),
      defaultBreaks: [5], // 距离 可传多个 如[2.5,5,10,···]
      travelDirection: "to-facility",// 可选'from-facility' 去或来
      trimOuterPolygon: true // 休整最外圈的图形 否则很丑
    });
    const { serviceAreaPolygons } = await solve(url, serviceAreaParameters);
    for (const graphic of serviceAreaPolygons) {
      graphic.symbol = {
        type: "simple-fill",
        color: "#009455"
      }
    }
    view.graphics.addMany(serviceAreaPolygons, 0);
  }

4、可选择模式travelMode

travelMode 是一个JSON 对象可由fetchServiceDescription调用服务url后在返回的supportedTravelModes数组里面获取

const networkDescription = await fetchServiceDescription(url);
travelMode = networkDescription.supportedTravelModes.find(
  // (travelMode) => travelMode.name === "Driving Distance"
  (travelMode) => travelMode.name === "Driving Time"
);
const serviceAreaParameters = new ServiceAreaParameters({
	facilities: new FeatureSet({
    features: [locationFeature]
    }),
    defaultBreaks: [0.5, 1, 2],
    travelMode,
    travelDirection: "to-facility",
    trimOuterPolygon: true
  });