ArcGIS api for javascript 的入门学习

1、安装依赖

npm install @arcgis/core

2、按需引入（根据需要引入）

import Map from "@arcgis/core/Map";
import MapView from '@arcgis/core/views/MapView';
import Basemap from '@arcgis/core/Basemap';
import Extent from '@arcgis/core/geometry/Extent';
import Circle from '@arcgis/core/geometry/Circle';
import Draw from '@arcgis/core/views/2d/draw/Draw';
import Point from '@arcgis/core/geometry/Point';
import Polygon from '@arcgis/core/geometry/Polygon';
import Polyline from '@arcgis/core/geometry/Polyline';
import SpatialReference from '@arcgis/core/geometry/SpatialReference';
import FeatureLayer from '@arcgis/core/layers/FeatureLayer';
import WFSLayer from '@arcgis/core/layers/WFSLayer';
import TileLayer from '@arcgis/core/layers/TileLayer';
import MapImageLayer from '@arcgis/core/layers/MapImageLayer';
import WMSLayer from '@arcgis/core/layers/WMSLayer';
import WMTSLayer from '@arcgis/core/layers/WMTSLayer';
import WebTileLayer from '@arcgis/core/layers/WebTileLayer';

3、加载layer 

加载WMTSLayer

addWMTSLayer(url, id){
  var layer = new WMTSLayer({
    url: url,
    activeLayer: {
      id: id
    }
  });
  return layer
},

加载TileLayer

addTDTLayer(url){
  var layer = new TileLayer({
     url: url
  });
  return layer
}

加载GraphicsLayer

rings格式（类似）

const rings = [
 [
  [-97.06138,32.837,35.1,4.8],
  [-97.06133,32.836,35.2,4.1],
  [-97.06124,32.834,35.3,4.2],
  [-97.06138,32.837,35.1,4.8]
 ]
];

var graphicsLayer = new GraphicsLayer();
// 可为点线面的Graphic
var polygonGraphic = new Graphic({
  geometry: new Polygon({
    rings: rings,
    spatialReference: this.spatialreference
  }),
  symbol: {
    type: "simple-fill",
    color: [0, 0, 0, 0],
    style: "solid",
    outline: {
      color: [0, 0, 0, 0.6],
      width: 3
    }
  },
});
graphicsLayer.add(polygonGraphic);
this.map.add(graphicsLayer);

4、基本地图展示(WMTSLayer为例)

<div id='map'></div>

addMap{
  var layer = this.addWMTSLayer(url, id)
  if (layer)
  vectors.push(layer);
  const customBasemap = new Basemap({
    baseLayers: vectors,
  });
  var myMap = new Map({
    basemap: customBasemap
  });
  var myView = new MapView({
    container: 'map',
    center: [117.5,27.2],//地图中心
    map: myMap,
    zoom: 12,
    spatialReference: new SpatialReference("EPSG:4326"),
    ui:{
      components: [],
    },
    popup: {
      collapseEnabled: false,
    },
  });
  this.view= myView
},
addWMTSLayer(url, id){
  var layer = new WMTSLayer({
    url: url,
    activeLayer: {
      id: id
    }
  });
  return layer
}

5、地图事件

监听zoom变化 

this.view.watch("zoom", (zoom) => {
  console.log(zoom)
})

监听拖拽事件

this.view.on("drag", function (event) {
  //拖拽结束
  if (event.action === 'end') {}
})

监听click事件

myView.on("click", async (event) => {
  console.log(event.mapPoint)
})

6、添加图例

<div id="legendDiv"></div>

let legend = new Legend({
   view: myView,
   container: "legendDiv",
   layerInfos: []
});
myView.ui.add(legend, "bottom-left");

7、查询

QueryTask 进行空间和属性查询,进行查询的地图服务并不必加载到Map中进行显示  url，条件

返回FeatureSet

query(url, name) {
      const self = this;
      var queryTask = new QueryTask({
        url: url,
      });
      var query = new Query({
        returnGeometry: true,
        outFields: ["*"],
      });
      var opts = {
        duration: 1000,
      };
      query.where = "NAME = '" + name + "'";
      queryTask.execute(query).then(function (results) {
        if (results.features.length >= 1) {
          self.view.goTo(
            {
              target: results.features[0].geometry,
            },
            opts
          );
          self.view.map.remove(self.QX_layer)
          const QX_raphic = new Graphic({
            geometry: results.features[0].geometry,
            symbol: {
              type: "simple-fill", // autocasts as SimpleFillSymbol
              color: [17, 12, 17, 0.5],
              style: "solid",
              outline: {
                color: [0, 14, 27, 1],
                width: 2
              }
            },
          });
          self.QX_layer = new GraphicsLayer();
          self.QX_layer.add(QX_raphic, 9999)
          self.view.map.add(self.QX_layer, 9999)
        }
      });
    }

IdentifyTask 地图服务中识别要素的，用户绘制几何对象以后进行查询，返回一个数组

    identifyTask (url, layer, geometry) {
      const identifyTask = new IdentifyTask(url);
      const params = new IdentifyParameters();
      
      params.tolerance = 5;
      params.returnGeometry = true;
      const layerInfos = layer.allSublayers ? layer.allSublayers.items : [];
      var layerIds = [];
      for (var i = 0; i < layerInfos.length; i++) {
        const sublayer = layerInfos[i];
        if (sublayer.visible) {
          layerIds.push(sublayer.id);
        }
      }
      params.layerIds = layerIds;
      params.layerOption = 'all';
      // params.layerOption = IdentifyParameters.LAYER_OPTION_ALL;
      params.width = this.view.width;
      params.height = this.view.height;
      params.geometry = geometry;
      params.mapExtent = this.view.extent;
      identifyTask.execute(params).then((results) => {
        return results.results.map((result) => {
          const graphic = result.feature;
          let content = "";
          if (graphic.attributes) {
            content = "<table id='popup'>";
            for (let [key, value] of Object.entries(graphic.attributes)) {
              content +=
                "<tr><th>" +
                key +
                "</th><td title='" +
                key +
                "'>" +
                value +
                "</td></tr>"
            }
            content += "</table>";
            if (content == "<table></table>") {
              content = null;
            }
          }eometry = graphic.geometry.extent.center;
          var title =
            graphic.attributes[result.displayFieldName] || result.layerName;
          graphic.popupTemplate = {
            title: title,
            content: content,
          };
          return graphic;
        });
      })
      .then((results) => {
        if (results.length > 0) {
          this.view.popup.open({
            features: results,
            location: geometry,
          });
        }
      });
    }