arcgis api 学习笔记

1.sceneView

 差不多已经懂了esri-loader的用法了

①下载直接使用，不用配置别的

②按需引入比较舒服，也是官方推荐的写法

import {setDefaultOptions,loadModules} from "esri-loader";

这里其实导入一个loadModules就够了，设置默认样式配置可以在loadModules里配置

③需要啥就去官方文档搜啥

举例：我需要用Basemap，引入AMD的写法，在loadModules里面

④写入变量，在then后面的箭头函数传进去所有需要用的变量

.then(([MapView, Map,Basemap,MapImageLayer]) => {}

完整代码： 

<template>
  <div id="viewDiv"></div>
</template>

<script>
import {
  setDefaultOptions,
  loadModules,
} from "esri-loader";
// 这里的设置默认配置项的写法等同于{css:true}
// setDefaultOptions({ css: true });
export default {
  mounted() {
    // 懒加载 ArcGIS API

    loadModules(["esri/views/MapView", "esri/Map","esri/Basemap","esri/layers/MapImageLayer"], { css: true }).then(
      ([MapView, Map,Basemap,MapImageLayer]) => {
        // create a basemap from a dynamic mapserver
        let basemap = new Basemap({
          baseLayers: [
            new MapImageLayer({
              url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer",
              title: "Basemap",
            }),
          ],
          title: "basemap",
          id: "basemap",
        });
        var map = new Map({
          // basemap: "topo-vector",
          // basemap: "streets-vector", //全球街道矢量
          basemap: basemap,
        });

        var view = new MapView({
          // 默认是4326
          container: "viewDiv",
          map: map,
          zoom: 8,
          center: [114, 29],
        });
      }
    );
  },
};
</script>

<style>
#viewDiv {
  width: 100%;
  height: 100%;
}
</style>

3D场景视图

<template>
  <div id="map_contentView"></div>
</template>
<script>
import * as esri from "esri-loader";

// 在mounted钩子函数中按需引入ArcGIS API和css，这里是4.17版本
export default {
  mounted() {
    esri.loadScript({ url: "https://js.arcgis.com/4.17/" });
    esri.loadCss("https://js.arcgis.com/4.17/esri/themes/light/main.css");
    this.initMap();
  },
  methods: {
    initMap() {
      esri
        .loadModules(
          ["esri/layers/WebTileLayer", "esri/Map", "esri/views/SceneView"],
          { css: true }
        )
        .then(([WebTileLayer, Map, SceneView]) => {
          var tiandituBaseUrl = "http://{subDomain}.tianditu.gov.cn"; //天地图服务地址
          var token = "4a76fd399e76e3e984e82953755c3410"; //天地图管网申请token
          const map = new Map({
            basemap: "topo-vector",
            ground: "world-elevation",
            logo: false,
          });
          this.view = new SceneView({
            //这个是让地图显示在id为map_contentView的标签上，是id叫他不是其他的
            container: "map_contentView",
            map: map,
            center: [120.52, 31.53],
            zoom: 8,
          });
          //球面墨卡托投影矢量底图
          var tiledLayer = new WebTileLayer({
            urlTemplate:
              tiandituBaseUrl +
              "/DataServer?T=img_w/wmts&x={col}&y={row}&l={level}&tk=" +
              token,
            subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
          });
          //矢量标注(球面墨卡托投影)
          var tiledLayerAnno = new WebTileLayer({
            urlTemplate:
              tiandituBaseUrl +
              "/DataServer?T=cia_w?T=vec_c/wmts&x={col}&y={row}&l={level}&tk=" +
              token,
            subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
          });
          //将天地图底图添加到map上
          map.add(tiledLayer);
          //标注添加到map上
          map.add(tiledLayerAnno);
        });
    },
  },
};
</script>
<style lang="scss">
#map_contentView {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>

2.mapview

加载2D地图

加载geojson数据

<template>
  <div id="viewDiv"></div>
</template>

<script>
import { setDefaultOptions, loadModules } from "esri-loader";
// 这里的设置默认配置项的写法等同于{css:true}
// setDefaultOptions({ css: true });
export default {
  mounted() {
    // 懒加载 ArcGIS API

    loadModules(
      [
        "esri/views/MapView",
        "esri/Map",
        "esri/Basemap",
        "esri/layers/MapImageLayer",
        "esri/layers/GeoJSONLayer",
      ],
      { css: true }
    ).then(([MapView, Map, Basemap, MapImageLayer, GeoJSONLayer]) => {
      // create a basemap from a dynamic mapserver
      let basemap = new Basemap({
        baseLayers: [
          new MapImageLayer({
            url:
              "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer",
            title: "Basemap",
          }),
        ],
        title: "basemap",
        id: "basemap",
      });
      var map = new Map({
        // basemap: "topo-vector",
        basemap: "streets-vector", //全球街道矢量
        // basemap: basemap,
      });

      var view = new MapView({
        // 默认是4326
        container: "viewDiv",
        map: map,
        zoom: 8,
        center: [114, 29],
      });
      const geojsonlayer = new GeoJSONLayer({
//本地数据   url:  "./1province.json",
        url:
          "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson",
        copyright: "USGS Earthquakes",
      });
      map.add(geojsonlayer); // adds the layer to the map
    });
  },
};
</script>

<style>
#viewDiv {
  width: 100%;
  height: 100%;
}
</style>

Map类中有一个比较特殊的属性叫做basemap,在arcgis api中，esri自己定义了一些底图可直接供我们使用，这些底层的调用，我们可以根据制定basemap属性直接调用已经定义好的底图。
esri给我们定义的底图有：streets ,satellite ,hybrid, topo, gray,dark-gray, oceans, national-geographic,terrain, osm, dark-gray-vector, gray-vector,streets-vector, streets-night-vector, streets-relief-vector, streets-navigation-vector,topo-vector.terrain, dark-gray, dark-gray-vector, gray-vector, streets-vector,streets-night-vector, streets-relief-vector, streets-navigation-vector , topo-vector,注意：要使用esri定义的底图属性basemap电脑必须联网。
————————