ArcGIS api for js 4.12加载天地图的几种方法

方法一：使用BaseTileLayer加载天地图

以下是加载二维的js代码，三维也很简单，把MapView换成SceneView即可。

		<script>
			require([
				"esri/Map",
				"esri/request",
				"esri/Color",
				"esri/views/MapView",
				"esri/layers/BaseTileLayer"
			], function(
				Map,
				esriRequest,
				Color,
				MapView,
				BaseTileLayer
			) {
				// *******************************************************
				// Custom tile layer class code
				// Create a subclass of BaseTileLayer
				// *******************************************************

				var TintLayer = BaseTileLayer.createSubclass({
					properties: {
						urlTemplate: null,
						tint: {
							value: null,
							type: Color
						}
					},

					// generate the tile url for a given level, row and column
					getTileUrl: function(level, row, col) {
						return this.urlTemplate
							.replace("{z}", level)
							.replace("{x}", col)
							.replace("{y}", row);
					},

					// This method fetches tiles for the specified level and size.
					// Override this method to process the data returned from the server.
					fetchTile: function(level, row, col) {
						// call getTileUrl() method to construct the URL to tiles
						// for a given level, row and col provided by the LayerView
						var url = this.getTileUrl(level, row, col);

						// request for tiles based on the generated url
						return esriRequest(url, {
							responseType: "image"
						}).then(
							function(response) {
								// when esri request resolves successfully
								// get the image from the response
								var image = response.data;
								var width = this.tileInfo.size[0];
								var height = this.tileInfo.size[0];

								// create a canvas with 2D rendering context
								var canvas = document.createElement("canvas");
								var context = canvas.getContext("2d");
								canvas.width = width;
								canvas.height = height;

								// Apply the tint color provided by
								// by the application to the canvas
								if (this.tint) {
									// Get a CSS color string in rgba form
									// representing the tint Color instance.
									context.fillStyle = this.tint.toCss();
									context.fillRect(0, 0, width, height);

									// Applies "difference" blending operation between canvas
									// and steman tiles. Difference blending operation subtracts
									// the bottom layer (canvas) from the top layer (tiles) or the
									// other way round to always get a positive value.
									context.globalCompositeOperation = "difference";
								}

								// Draw the blended image onto the canvas.
								context.drawImage(image, 0, 0, width, height);

								return canvas;
							}.bind(this)
						);
					}
				});

				// *******************************************************
				// Start of JavaScript application
				// *******************************************************

				// Create a new instance of the TintLayer and set its properties
				var MapTileLayer = new TintLayer({
					//矢量墨卡托图层
					//urlTemplate: "http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你的key",
					//影像墨卡托图层
					urlTemplate: "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你的key",
					//tint: new Color("#004FBB"),
					title: "天地图"
				});

				var AnoTileLayer = new TintLayer({
					//矢量墨卡托注记层
					//urlTemplate: "http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你的key",
					//影像墨卡托注记层
					urlTemplate: "http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你的key",
					//tint: new Color("#004FBB"),
					title: "天地图注记"
				});

				// add the new instance of the custom tile layer the map
				var map = new Map({
					layers: [MapTileLayer, AnoTileLayer],
				});

				// create a new scene view and add the map
				var view = new MapView({
					container: "viewDiv",
					map: map
				});
			});
		</script>

方法二：使用WebTileLayer加载天地图

以下是三维的js代码，改成二维也一样。直观感受，使用WebTileLayer比较简单，但BaseTileLayer可以自定义样式，根据需求选择使用方法吧。

<script>
			require([
				"esri/layers/WebTileLayer",
				"esri/Map",
				"esri/views/SceneView"
			], function(WebTileLayer, Map, SceneView) {
				var map = new Map({
					ground: "world-elevation"
				});

				var view = new SceneView({
					container: "viewDiv",
					map: map,
					scale: 123456789,
					center: [-65, -15]
				});

				var tiledLayer = new WebTileLayer({
					urlTemplate: "http://{subDomain}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=你的key",
					subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
					copyright: '天地图'
				});

				map.add(tiledLayer);
			});
		</script>

最后，来个加载天地图作为底图的例子，注意key要换成自己申请的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
		<title>Custom Basemap - 4.12</title>

		<style>
			html,
			body,
			#viewDiv {
				padding: 0;
				margin: 0;
				height: 100%;
				width: 100%;
			}
		</style>

		<link href="https://js.arcgis.com/4.12/esri/themes/light/main.css" rel="stylesheet" type="text/css" />
		<script src="https://js.arcgis.com/4.12/"></script>

		<script>
			require([
				"esri/layers/WebTileLayer",
				"esri/Map",
				"esri/Basemap",
				"esri/widgets/BasemapToggle",
				"esri/views/SceneView"
			], function(WebTileLayer, Map, Basemap, BasemapToggle, SceneView) {

				var mapBaseLayer = new WebTileLayer({
					urlTemplate: "http://{subDomain}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=你的key",
					subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
					copyright: '天地图影像图'
				});

				var anoBaseLayer = new WebTileLayer({
					urlTemplate: "http://{subDomain}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=你的key",
					subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
					copyright: '天地图影像注记'
				});

				var imgBasemap = new Basemap({
					baseLayers: [mapBaseLayer,anoBaseLayer],
					title: "影像图",
					id: "img_w",
					thumbnailUrl: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/0/0/0"
				});
				
				var mapBaseLayer_vec = new WebTileLayer({
					urlTemplate: "http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=你的key",
					subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
					copyright: '天地图矢量图'
				});
				
				var anoBaseLayer_vec = new WebTileLayer({
					urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=你的key",
					subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
					copyright: '天地图矢量注记'
				});
				
				var vecBasemap = new Basemap({
					baseLayers: [mapBaseLayer_vec,anoBaseLayer_vec],
					title: "矢量图",
					id: "cva_w",
					thumbnailUrl: "https://stamen-tiles.a.ssl.fastly.net/terrain/10/177/410.png"
				});

				var map = new Map({
					basemap: imgBasemap,
					ground: "world-elevation"
				});


				var view = new SceneView({
					container: "viewDiv",
					map: map
				});

				view.when(function() {
					var toggle = new BasemapToggle({
						titleVisible: true,
						view: view,
						nextBasemap: vecBasemap
					});

					view.ui.add(toggle, "bottom-right");
				});
			});
		</script>
	</head>

	<body>
		<div id="viewDiv"></div>
	</body>
</html>

刚开始想要加载天地图的时候，在网上搜啊搜，浪费了很多时间，但是效果很不理想，无奈只能自己去看官方文档，结果发现其实很简单，简直不要太惊喜，无奈…………