arcgis/core学习实践（二）

技术栈vite+vue3+ts

今天来实现官网的这个Find a route and directions小栗子

 https://developers.arcgis.com/javascript/latest/find-a-route-and-directions/

官网还是amd的写法风格，也就是用的是esri-loader

我把他重写下，不过区别不大 

实现效果如下

 完整代码

<template>
  <div>
    <div class="map-div" ref="mapDiv"></div>
    <el-button type="primary" @click="openBindOnClick">打开获取事件</el-button>
    <el-button type="danger" @click="removeBindOnClick">移除获取事件</el-button>
  </div>

</template>

<script lang="ts">
export default { name: '' }
</script>

<script setup lang="ts">
import WebMap from '@arcgis/core/WebMap'
import MapView from '@arcgis/core/views/MapView'
import esriConfig from "@arcgis/core/config.js";
import BasemapToggle from '@arcgis/core/Widgets/BasemapToggle'
import Locate from '@arcgis/core/Widgets/Locate'
import Track from '@arcgis/core/widgets/Track'
import Graphic from '@arcgis/core/Graphic'
import Symbol from "@arcgis/core/symbols/Symbol";
import SimpleMarkerSymbol from "@arcgis/core/symbols/SimpleMarkerSymbol";
import Search from "@arcgis/core/widgets/Search";


import * as route from "@arcgis/core/rest/route";
import RouteParameters from "@arcgis/core/rest/support/RouteParameters";
import FeatureSet from "@arcgis/core/rest/support/FeatureSet";
import type Point from "@arcgis/core/geometry/Point"
import LineSymbol from '@arcgis/core/symbols/LineSymbol'

import { onMounted, ref } from 'vue'
// import "@arcgis/core/assets/esri/themes/light/main.css";
const mapDiv = ref<HTMLDivElement>()
esriConfig.apiKey = "YOUR_KEY"
esriConfig.assetsPath = "/assets";
const webMap = new WebMap({
  // basemap: "arcgis-topographic"
  basemap: "arcgis-imagery"
})

const mapView = new MapView({
  map: webMap,
  center: [112, 37],
  zoom: 9,
})
// 换底图
const basemapToggle = new BasemapToggle({
  view: mapView,
  nextBasemap: "arcgis-topographic"
});
mapView.ui.add(basemapToggle, "bottom-right");
// 定位
const locate = new Locate({
  view: mapView,
  useHeadingEnabled: false,
  goToOverride: function (view, options) {
    options.target.scale = 1500;
    return view.goTo(options.target);
  }
});
// 跟踪
mapView.ui.add(locate, "top-left");
const track = new Track({
  view: mapView,
  graphic: new Graphic({
    symbol: new SimpleMarkerSymbol({
      color: "green",
      // type: "simple-marker",
      size: "12px",
      outline: {
        color: "#efefef",
        width: "1.5px"
      }
    })
  }),
  useHeadingEnabled: false
});
mapView.ui.add(track, "top-left");
const search = new Search({  //Add Search widget
  view: mapView,
  activeMenu: "source"
});
mapView.ui.add(search, "top-right");

const routeUrl = "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World";

let getRouteFromTwoPoint: any = null
function addGraphic(type: string, point: Point) {
  const graphic = new Graphic({
    symbol: new SimpleMarkerSymbol({
      color: (type === "origin") ? "white" : "black",
      size: "8px"

    }),
    geometry: point
  });
  mapView.graphics.add(graphic);
}

function getRoute() {
  const routeParams = new RouteParameters({
    stops: new FeatureSet({
      features: mapView.graphics.toArray()
    }),
    returnDirections: true
  });
  route.solve(routeUrl, routeParams)
    .then(function (data) {
      data.routeResults.forEach(function (result) {
        result.route.symbol = new LineSymbol({
          width: 3,
          color: [5, 150, 255]
        })
        mapView.graphics.add(result.route);
      });

      // Display directions
      console.log(data.routeResults)
      const directions: HTMLOListElement = document.createElement("ol");

      if (data.routeResults.length > 0) {
        directions.classList.add("esri-widget", "esri-widget--panel", "esri-directions__scroller");
        directions.style.marginTop = "0";
        directions.style.padding = "15px 15px 15px 30px";
        const features = data.routeResults[0].directions.features;

        // Show each direction
        features.forEach(function (result, i) {
          const direction = document.createElement("li");
          direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)";
          directions.appendChild(direction);
        });

        //  取一下第一次创建的ol
        let directions1 = document.getElementsByClassName("esri-widget esri-widget--panel esri-directions__scroller esri-component")[0] as HTMLOListElement
        directions1 && mapView.ui.remove(directions1);

        // 添加右上角的路线说明
        mapView.ui.add(directions, "top-right");
        console.log(mapView.ui)
      }

    })

    .catch(function (error) {
      console.log(error);
    })
}

// 开启点击两点生成路线功能
const openBindOnClick = ():void => {
  getRouteFromTwoPoint = mapView.on("click", function (event) {

    if (mapView.graphics.length === 0) {
      addGraphic("origin", event.mapPoint);
    } else if (mapView.graphics.length === 1) {
      addGraphic("destination", event.mapPoint);

      getRoute(); // Call the route service

    } else {
      mapView.graphics.removeAll();
      addGraphic("origin", event.mapPoint);
    }

  });
}

// 关闭功能
const removeBindOnClick = ():void => {
  // 关闭点击事件
  getRouteFromTwoPoint != null && getRouteFromTwoPoint.remove()
  // 去掉右上角的路线说明
  let directions1 = document.getElementsByClassName("esri-widget esri-widget--panel esri-directions__scroller esri-component")[0] as HTMLOListElement
  directions1 && mapView.ui.remove(directions1);
  // 去掉地图上画的点与线
  mapView.graphics.removeAll();
}
onMounted(() => {
  mapView.container = mapDiv.value!
})
</script>

<style>
@import "@arcgis/core/assets/esri/themes/light/main.css";

.map-div {
  padding: 0;
  margin: 0;
  height: 600px;
  width: 1000px;
}
</style>

官网代码 

<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
 <title>ArcGIS Maps SDK for JavaScript Tutorials: Find a route and directions</title>
 <style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
 </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.25/"></script>

  <script>

    require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView",

      "esri/Graphic",
      "esri/rest/route",
      "esri/rest/support/RouteParameters",
      "esri/rest/support/FeatureSet"

    ], function(esriConfig, Map, MapView, Graphic, route, RouteParameters, FeatureSet) {

    esriConfig.apiKey = "YOUR_API_KEY";

    const map = new Map({
      basemap: "arcgis-navigation" //Basemap layer service
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-118.24532,34.05398], //Longitude, latitude
      zoom: 12
    });

    const routeUrl = "https://route-api.arcgis.com/arcgis/rest/services/World/Route/NAServer/Route_World";

    view.on("click", function(event){

      if (view.graphics.length === 0) {
        addGraphic("origin", event.mapPoint);
      } else if (view.graphics.length === 1) {
        addGraphic("destination", event.mapPoint);

        getRoute(); // Call the route service

      } else {
        view.graphics.removeAll();
        addGraphic("origin",event.mapPoint);
      }

    });

    function addGraphic(type, point) {
      const graphic = new Graphic({
        symbol: {
          type: "simple-marker",
          color: (type === "origin") ? "white" : "black",
          size: "8px"
        },
        geometry: point
      });
      view.graphics.add(graphic);
    }

    function getRoute() {
      const routeParams = new RouteParameters({
        stops: new FeatureSet({
          features: view.graphics.toArray()
        }),

        returnDirections: true

      });

      route.solve(routeUrl, routeParams)
        .then(function(data) {
          data.routeResults.forEach(function(result) {
            result.route.symbol = {
              type: "simple-line",
              color: [5, 150, 255],
              width: 3
            };
            view.graphics.add(result.route);
          });

          // Display directions
         if (data.routeResults.length > 0) {
           const directions = document.createElement("ol");
           directions.classList = "esri-widget esri-widget--panel esri-directions__scroller";
           directions.style.marginTop = "0";
           directions.style.padding = "15px 15px 15px 30px";
           const features = data.routeResults[0].directions.features;

           // Show each direction
           features.forEach(function(result,i){
             const direction = document.createElement("li");
             direction.innerHTML = result.attributes.text + " (" + result.attributes.length.toFixed(2) + " miles)";
             directions.appendChild(direction);
           });

          view.ui.empty("top-right");
          view.ui.add(directions, "top-right");

         }

        })

        .catch(function(error){
            console.log(error);
        })

    }

  });
  </script>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

 对比如下

这些地方类型检查会报错，要改下

 

 

 这个classList要说明下，ts推断他是只读的修改，不能修改，

上面那个说明的意思是要通过DOMTokenList对象来修改类型列表

百度了下DOMTokenList这个对象，他有个add方法可以添加类名

mdn链接DOMTokenList - Web API 接口参考 | MDN

 

最后增加了两个按钮控制下功能开启与关闭