基于ArcGIS JS 4.18 API 在三维场景（SceneView）下加载天地图服务

项目需求及技术选择

由于本公司的一个 临时项目，甲方没有预算购置底图，所以拟采用天地图服务作为底图。经过调研，csdn博客大部分都是在二维场景下，有些在三维场景下，但是 代码不全，或者因为 官方API的升级导致，无法正常调用天地图服务。

天地图的服务的申请和注册

天地图的官方地址为：https://www.tianditu.gov.cn/，根据个人需求可以申请个人账户或者公司账户。在官网主页的【开发资源】菜单栏下的【地图API】子选项中，可以查看要使用的地图服务。
如下图所示

请注意：你还需要在控制台中创建你的应用，根据实际的项目需求设置你需要的功能，此时创建完成能够获取到应用的key值。

ArcGIS JS的外部地图服务调用

该用例依然使用esri-loader地图加载框架进行开发，ArcGIS JS 官方的实例采用的WebTileLayer和TileInfo类。需要定义好TileInfo的内容和比例尺

代码编写

1.定义TileInfo的结构，这里需要定义的是切片的信息，地图的范围以及坐标系和每一级切片的等级比例尺分辨率和等级的级别名称。（天地图的比例尺是官方的比例尺，坐标系是CGCS2000地理坐标系）

const tileInfo = new TileInfo({
        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 }
        ]
    });

2.需要定义比例尺以及定义地图的Extent。（我调研很多博客都没有这个步骤，导致加载失败）

 //2.1 在定义extent之前需要声明比例尺
  const sp = new SpatialReference({
        wkid: 4490
    });
  //2.2 定义地图的extent
  const fullExtent = new Extent(-180, -90, 180, 90, sp);

3. 创建地图实例

 const layer = new WebTileLayer({ // 天地图影像地图
        id: "test",
        title: "aaa",
        urlTemplate: "http://{subDomain}.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=自己的申请应用的天地图key",
        subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
        fullExtent: fullExtent,
        tileInfo,
        copyright: '天地图',
        spatialReference: {
            wkid: 4490
        }
    });

这里需要说明的是注意urlTemplate中的LAYER参数和TILEMATRIXSET参数，这里的取值 非常重要，这里的参数是根据服务里img_c的值分别取到，举例说明如下图所示，当然千万不要忘记修改你的key值。还需要注意的fullExtent，在ArcGIS JS4.18中如果不定义fullExtent就会无法加载并且报错。

5.最后将创建好的天地图实例加载到Map实例对象中。

const     map = new Map({
        ground: {
            surfaceColor: "#021b2d",
            opacity: 1,
        },
    });
const     mapView = new SceneView({
        container: "map-container", //
        map: map, //
        environment: {
            background: {
                type: "color",
                color: "#021b2d"
            },
            starsEnabled: false,
            atmosphereEnabled: false
        },
        camera: {
            heading: 353.89950174364276,
            position: {
                x: 120.74493505602345,
                y: 30.187067569986592,
                z: 62203.88886116259,
                spatialReference: 4490,
            },
            tilt: 61.83364562727329,
            fov: 55
        },
        spatialReference: {
            wkid: 4490
        },
        constraints: {
            altitude: {
                max: 30000000,
                min: 2000
            }
        },
    });
map.add(layer);
//后续还可以设置初始视角使用mapView.goTo方法，这里不再阐述。

本文仅个人见解，如果有不正确或不合理之处，欢迎各位小伙伴批评指正。