ArcGIS API for JavaScript与天地图的简单使用

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

<script>
	//首先引入esri-loader
  import {loadModules} from 'esri-loader';

  export default {
    name: 'index',
    data(){
      return{

      };
    },
    mounted() {
    	//这里的option可以自己选择使用哪个版本
      let options = {
        url: 'https://js.arcgis.com/4.24/',
        css: 'https://js.arcgis.com/4.24/esri/themes/light/main.css'
      };
      loadModules([
        'esri/Map',
        'esri/layers/WebTileLayer',
        'esri/layers/support/TileInfo',
        'esri/views/MapView',
        'esri/geometry/SpatialReference',
        'esri/geometry/Point',
        'esri/layers/WMTSLayer',
        'esri/layers/MapImageLayer',
        'esri/identity/IdentityManager',
        'esri/layers/FeatureLayer',
        'dojo/domReady!'
      ], options).then(
        ([Map, WebTileLayer, TileInfo, MapView, SpatialReference, Point, WMTSLayer, MapImageLayer, IdentityManager, FeatureLayer]) => {
          let token = '***********'; //此处的token需要自己在天地图官网注册,没有token会报错；
          //下方的 tileInfo 可以通用,用来定义地图的各种配置
          let tileInfo = new TileInfo({
            dpi: 90.71428571427429,  // 切片方案的每英寸点数（即像素）。
            size: 256,  // 设置每个瓷砖的高度和宽度为[256, 256]像素。
            origin: {  // 切片方案的原点。
              x: -180,
              y: 90
            },
            spatialReference: {wkid: 4490},
            lods: [ //地图放大缩小层级
              {'level': '5', 'scale': 18489334.715625, 'resolution': 0.0439453125},
              {'level': '6', 'scale': 9244667.3578125, 'resolution': 0.02197265625},
              {'level': '7', 'scale': 4622333.67890625, 'resolution': 0.010986328125},
              {'level': '8', 'scale': 2311166.839453125, 'resolution': 0.0054931640625},
              {'level': '9', 'scale': 1155583.4197265625, 'resolution': 0.00274658203125},
              {'level': '10', 'scale': 577791.7098632812, 'resolution': 0.001373291015625},
              {'level': '11', 'scale': 288895.8549316406, 'resolution': 0.0006866455078125},
              {'level': '12', 'scale': 144447.9274658203, 'resolution': 0.00034332275390625},
              {'level': '13', 'scale': 72223.96373291015, 'resolution': 0.000171661376953125},
              {'level': '14', 'scale': 36111.98186645508, 'resolution': 0.0000858306884765625},
              {'level': '15', 'scale': 18055.99093322754, 'resolution': 0.00004291534423828125},
              {'level': '16', 'scale': 9027.99546661377, 'resolution': 0.000021457672119140625},
              {'level': '17', 'scale': 4513.997733306885, 'resolution': 0.000010728836059570312},
              {'level': '18', 'scale': 2256.9988666534423, 'resolution': 0.000005364418029785156},
              {'level': '19', 'scale': 1128.4994333267211, 'resolution': 0.000002682209014892578}
            ]
          });
          //ArcGIS API for JavaScript展示天地图有好几种方式,我只用过其中两种
          //第一种
          let tiledLayerAnno = new WebTileLayer({
            urlTemplate: '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=' + token,
            subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
            tileInfo: tileInfo,
            spatialReference: {wkid: 4490}
          });
          //第二种
          // const layer = new WMTSLayer({
          //   url: 'http://t0.tianditu.gov.cn/vec_c/wmts',
          //   customParameters: {
          //     tk: token
          //   }
          // });
          // const annaLayer = new WMTSLayer({
          //   url: 'http://t0.tianditu.gov.cn/cva_c/wmts',
          //   customParameters: {
          //     tk: token
          //   }
          // });
          // const annaLayer2 = new WMTSLayer({
          //   url: 'https://t0.tianditu.gov.cn/img_c/wmts',
          //   customParameters: {
          //     tk: token
          //   }
          // });
          //定位到济南市中心
          let cityCenter = new Point(116.985, 36.671, new SpatialReference({wkid: 4490}));
          let map = new Map({
            basemap: {
              baseLayers: [tiledLayerAnno]
            }
          });
				
          let view = new MapView({
            container: 'viewDiv',
            map: map,
            center: cityCenter,
            zoom: 12,
            ui: {
              components: ['zoom', 'compass']
            }
          });
          //点击后地图会高亮
         view.on('click', (event) => {
            view.hitTest(event).then(response => {
              console.log(response);
              let result = response.results[0];
              if (result && result.graphic) {
                let graphic = result.graphic;
                //自定义高亮
                //这里的几何图形是面状，配置graphic的symbol为fillSymbol
                graphic.symbol = {
                  type: 'simple-fill',
                  color: 'red',
                  outline: {
                    color: [128, 128, 128, 0.5],
                    width: '0.5px'
                  }
                };
                view.graphics.removeAll();//清除上一次点击目标
                view.graphics.add(graphic);//添加新的点击目标
              }
            });
          });
         // 有时会地图服务需要注册唯一码,
          $.ajax({
            url: 'http://**********/arcgis/tokens/',
            type: 'POST',
            data: {
              username: '',
              password: '',
              client: '',
              expiration: '',
              f: 'json'
            },
            dataType: 'json',
            success: function (data, response, status) {
           		//获取后，使用下列方法注册,server字段对应要请求的域名
              IdentityManager.registerToken({
                server: 'http://******/arcgis/rest/services',
                token: data.token
              });
          		
          		//自定义弹窗信息
              const popupTemplate = {
                title: '信息',
                content: `
                  <p>项目名称：{JSXMMC}</p>
                  <p>时间：{REMARK}</p>
                `
              };
              // 通过FeatureLayer方法还可以进行自定义筛选，通过definitionExpression字段进行筛选
              const fl = new FeatureLayer({
                url: 'http://******/arcgis/rest/services/SmartConstruction/20210918Construction/FeatureServer/1',
                popupTemplate: popupTemplate,
                outFields: ['*'],
                definitionExpression: `JSXMMC like '%面粉厂%'`
              });
              map.add(fl);
            }
          });
        }
      );
    }
  };
</script>

<style scoped>
  #viewDiv {
    position: absolute;
    width: 100%;
    height: 80vh;
  }
</style>