Home | Li Kejia
0%

ArcGIS4加载天地图

发表于 更新于

使用arcgis js 4.33

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
// TDTLayer.js
import WebTileLayer from "@arcgis/core/layers/WebTileLayer";
import TileInfo from "@arcgis/core/layers/support/TileInfo";
import Extent from "@arcgis/core/geometry/Extent";

const token = "你的天地图token";

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

// 创建天地图图层
/**
 * @param {Object} options 选项
 * @param {string} [options.layerType=vec] 底图类型，行政——vec，影像——img，地形——ter
 * @param {string} [options.projType=c] 坐标系类型，c为经纬度坐标系，w为墨卡托坐标系
 * @param {string} [options.title] 图层名称
 * @param {string} [options.id] 图层id
 * @returns {WebTileLayer} 天地图图层
 */
export function createTDTLayer({
  layerType = "vec",
  projType = "c",
  title = "",
  id = "",
} = {}) {
  const urlTemplate =
    `http://{subDomain}.tianditu.com/${layerType}_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0` +
    `&LAYER=${layerType}&STYLE=default&TILEMATRIXSET=${projType}&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&FORMAT=tiles` +
    `&tk=${token}`;

  return new WebTileLayer({
    urlTemplate,
    subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
    tileInfo: tileInfo,
    // 坐标系
    spatialReference: { wkid: 4326 },
    // 图层的全局范围
    fullExtent: new Extent({
      xmin: -180,
      ymin: -90,
      xmax: 180,
      ymax: 90,
      spatialReference: { wkid: 4326 },
    }),
    // 图层id
    id: id || `tdt_${layerType}`,
    // 图层名称
    title: title || `天地图-${layerType}`,
    // // 版权信息
    // copyright: "天地图",
  });
}

调用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
initMap() {
    const baseLayer = createTDTLayer({
      layerType: "vec",
      projType: "c",
      title: "行政底图",
    });
    const baseAnnoLayer = createTDTLayer({
      layerType: "cva",
      projType: "c",
      title: "行政标注",
    });
    const map = new Map({
      basemap: {
        baseLayers: [baseLayer, baseAnnoLayer],
      },
    });
    new MapView({
      container: "mapView",
      map,
      zoom: 4, //缩放值
      center: [114, 38.5], // 经度, 纬度
      spatialReference: {
        wkid: 4326,
      },
    });
 }