arcgis javascript 4.x加载天地图示例

<template>
  <div id="mapContainer" style="width: 100%; height: 100%"></div>
  <!-- <study-1></study-1> -->
</template>

<script>
import '@arcgis/core/assets/esri/themes/light/main.css';
import { defineComponent } from '@vue/composition-api'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import WebTileLayer from '@arcgis/core/layers/WebTileLayer'
import { onMounted } from 'vue'
import Study1 from './components/study1.vue';
import TileInfo from '@arcgis/core/layers/support/TileInfo'
import Point from '@arcgis/core/geometry/Point'
export default defineComponent({
  setup() {
    window.fastConfig = {

    }
    onMounted(() => {
      var tileInfo = new TileInfo({
        // dpi: 90.71428571427429,
        dpi: 96,
        rows: 256,
        cols: 256,
        compressionQuality: 0,
        origin: {
          x: -180,
          y: 90
        },
        spatialReference: {
          wkid: 4490
        },
        lods: [
          { level: 0, levelValue: 1, resolution: 0.703125, scale: 295497593.05875003 },
          { level: 1, levelValue: 2, resolution: 0.3515625, scale: 147748796.52937502 },
          { level: 2, levelValue: 3, resolution: 0.17578125, scale: 73874398.264687508 },
          { level: 3, levelValue: 4, resolution: 0.087890625, scale: 36937199.132343754 },
          { level: 4, levelValue: 5, resolution: 0.0439453125, scale: 18468599.566171877 },
          { level: 5, levelValue: 6, resolution: 0.02197265625, scale: 9234299.7830859385 },
          { level: 6, levelValue: 7, resolution: 0.010986328125, scale: 4617149.8915429693 },
          { level: 7, levelValue: 8, resolution: 0.0054931640625, scale: 2308574.9457714846 },
          { level: 8, levelValue: 9, resolution: 0.00274658203125, scale: 1154287.4728857423 },
          { level: 9, levelValue: 10, resolution: 0.001373291015625, scale: 577143.73644287116 },
          { level: 10, levelValue: 11, resolution: 0.0006866455078125, scale: 288571.86822143558 },
          { level: 11, levelValue: 12, resolution: 0.00034332275390625, scale: 144285.93411071779 },
          { level: 12, levelValue: 13, resolution: 0.000171661376953125, scale: 72142.967055358895 },
          { level: 13, levelValue: 14, resolution: 8.58306884765625e-005, scale: 36071.483527679447 },
          { level: 14, levelValue: 15, resolution: 4.291534423828125e-005, scale: 18035.741763839724 },
          { level: 15, levelValue: 16, resolution: 2.1457672119140625e-005, scale: 9017.8708819198619 },
          { level: 16, levelValue: 17, resolution: 1.0728836059570313e-005, scale: 4508.9354409599309 },
          { level: 17, levelValue: 18, resolution: 5.3644180297851563e-006, scale: 2254.4677204799655 },
          { level: 18, levelValue: 19, resolution: 2.68220901489257815e-006, scale: 1127.23386023998275 },
          { level: 19, levelValue: 20, resolution: 1.341104507446289075e-006, scale: 563.616930119991375 }
        ]
      })

      
      let key = '天地图密钥(浏览器端)'
      let satelliteLayer = new WebTileLayer({
        urlTemplate:
          //加载天地图要注意3个参数！！！！vec_c、LAYER=vec、TILEMATRIXSET=c
          "http://{subDomain}.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" +
          key,
        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        id: "天地图矢量",
        tileInfo,
        spatialReference: { wkid: 4490 },//重点在这一句,如果不指定,那么默认为102100,在前端就会报坐标系的错误
      });
      var anoBaseLayer = new WebTileLayer({
        urlTemplate:
          "http://{subDomain}.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=" +
          key,
        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        id: "天地图矢量注记",
        tileInfo,
        spatialReference: { wkid: 4490 },//重点在这一句,如果不指定,那么默认为102100,在前端就会报坐标系的错误
      });
      window.fastConfig.map = new Map({
        //底图
        basemap: {
          baseLayers: [satelliteLayer],
          referenceLayers: [anoBaseLayer]
        },
        spatialReference: {
          wkid: 4490
        }

      });

      window.fastConfig.view = new MapView({
        container: 'mapContainer',
        map: window.fastConfig.map,
        zoom: 9,
        center: new Point({
          x: 122.106863,
          y: 30.016028,
          spatialReference: {
            wkid: 4490
          }
        })

      });

    })
  },
  components: {
    Study1
  }
})
</script>
<style lang="scss">
html,
body,
#app {
  margin: 0;
  padding: 0;
  height: 100%;
}
</style>

注意：
1、(先加载切片底图，后加载GraphicLayer和MapImageLayer)
GraphicLayer和MapImageLayer(动态地图服务)的图层可以和切片不一致，但是在定位和缩放时9view.goTo(extent)），extent的坐标系必须和切片一致，否则报错且不生效
2、一个map加载的切片坐标系必须一致，不能第一个加载4490，第二个加载4326，如果这样，后者不生效