ArcGIS JS api 4.15加载天地图（一）

1 下载与配置。进入下载页面

https://developers.arcgis.com/javascript/latest/guide/get-api/

2.下载完成后，将js类库放到web程序资源文件。

修改init.js 和 dojo/dojo.js文件，搜索baseUrl，将baseUrl:"https://[HOSTNAME_AND_PATH_TO_JSAPI]dojo中的[HOSTNAME_AND_PATH_TO_JSAPI]改为自己web程序中的资源目录，最终如：http://localhost:8080/res/js/dojo（res为我的springboot项目配置的静态资源的路径）。
注：此处如果想像ArcGIS那样引用自定义类，可以在init.js中配置依赖路径（在packages数组中添加自定义的即可，比如{location:"../my",name:"my"} 完成自定义路径添加，my文件夹即dojo.js文件夹的上一级目录下的my文件夹）。

3 页面加载一下为测试页面，天地图以山东为例。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /><title>Intro to MapView - Create a 2D map</title><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style><link rel="stylesheet"    href="/res/js/esri/themes/light/main.css" /><script type="text/javascript" src="/res/js/init.js"></script><script>require(["esri/Map", "esri/views/MapView","esri/layers/BaseTileLayer","esri/layers/support/TileInfo","esri/geometry/SpatialReference","esri/geometry/Extent","esri/config","esri/request"], function(Map, MapView,BaseTileLayer,TileInfo,SpatialReference,Extent,esriConfig, esriRequest) {var tileInfo = new TileInfo({"dpi": 96,"format": "image/png","compressionQuality": 0,"spatialReference": new SpatialReference({"wkid": 4326}),"rows": 256,"cols": 256,"origin": {"x": -180,"y": 90},"lods": [{"level": 0,"resolution": 1.4062500000002376,"scale": 590995186.11759996},{"level": 1,"resolution": 0.703125000000119,"scale": 295497593.0588},{"level": 2,"resolution": 0.351562500000059,"scale": 147748796.5294},{"level": 3,"resolution": 0.17578125000003,"scale": 73874398.2647},{"level": 4,"resolution": 0.0878906250000148,"scale": 36937199.1323},{"level": 5,"resolution": 0.0439453125000074,"scale": 18468599.566175},{"level": 6,"resolution": 0.0219726562500037,"scale": 9234299.7830875},{"level": 7,"resolution": 0.0109863281250019,"scale": 4617149.89154375},{"level": 8,"resolution": 0.00549316406250093,"scale": 2308574.94577187},{"level": 9,"resolution": 0.00274658203125046,"scale": 1154287.47288594},{"level": 10,"resolution": 0.00137329101562523,"scale": 577143.736442969},{"level": 11,"resolution": 0.000686645507812616,"scale": 288571.868221484},{"level": 12,"resolution": 0.000343322753906308,"scale": 144285.934110742},{"level": 13,"resolution": 0.000171661376953154,"scale":72142.9670553711},{"level": 14,"resolution": 8.5830688476577E-05,"scale": 36071.4835276855},{"level": 15,"resolution": 4.29153442382885E-05,"scale": 18035.7417638428},{"level": 16,"resolution": 2.14576721191443E-05,"scale": 9017.87088192139},{"level": 17,"resolution": 1.07288360595721E-05,"scale": 4508.93544096069},{"level": 18,"resolution": 5.36441802978606E-06,"scale": 2254.46772048035},{"level": 19,"resolution": 2.68220901489303E-06,"scale": 1127.23386024017},{"level": 20,"resolution": 1.34110450744652E-06,"scale": 563.616930120087}]});var tileExtent = new Extent(114.229839088925,33.9389305555556,123.400530149205,38.90481944444446, new SpatialReference({'wkid': 4326}));//  var tileExtent = new Extent(-180,-90,180,90, new SpatialReference({//    'wkid': 4326// }));var MyCustomTileLayer = BaseTileLayer.createSubclass({// properties of the custom tile layerproperties: {urlTemplate: null,},// override getTileUrl()// generate the tile url for a given level, row and columngetTileUrl: function (level, row, col) {return this.urlTemplate.replace("{level}", level).replace("{col}", col).replace("{row}", 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, options) {// call getTileUrl() method to construct the URL to tiles// for a given level, row and col provided by the LayerViewvar url = this.getTileUrl(level, row, col);// request for tiles based on the generated url// the signal option ensures that obsolete requests are abortedreturn esriRequest(url, {responseType: "image",//signal: options && options.signalallowImageDataAccess: true }).then(function (response) {// when esri request resolves successfully// get the image from the responsevar image = response.data;var width = this.tileInfo.size[0];var height = this.tileInfo.size[0];// create a canvas with 2D rendering contextvar 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 canvasif (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));}});esriConfig.request.corsEnabledServers.push("t0.tianditu.gov.cn/vec_c");var mylayer = new MyCustomTileLayer({//urlTemplate: "http://www.sdmap.gov.cn/tileservice/SDPubMap?layer=SDPubMap&style=default&tilematrixset=default028mm&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix={level}&TileCol={col}&TileRow={row}",urlTemplate: "http://t0.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&tk=你的tk&TileMatrix={level}&TileCol={col}&TileRow={row}",tileInfo:tileInfo,fullExtent:tileExtent});//mylayer.tileInfo = tileInfo;//mylayer.fullExtent= tileExtent;var map = new Map({spatialReference:new SpatialReference({'wkid': 4326}),basemap: {baseLayers:[mylayer]}});//map.layers.add(mylayer);var view = new MapView({container: "viewDiv", // Reference to the scene div created in step 5map: map, // Reference to the map object created before the sceneextent:tileExtent,spatialReference:new SpatialReference({'wkid': 4326}),scale:72142,//zoom: 15, // Sets zoom level based on level of detail (LOD)center: [118.5, 35.5] // Sets center point of view using longitude,latitude});//view.goTo({center: [118.5, 35.5],scale:72142});});</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

注：MapView一定要添加spatialReference，不然调用不成功；zoom设置级别不好使，用scale可以，有待进一步研究；两个urlTemplate都可以用，应该是发布者不同，天地图那个需要tk，例子中的tk值需要自己添加上，山东省发布的哪个不需要；天地图wkid为4326。

4 效果展示

如果配置完成，不显示地图，可以将步骤三种的资源引用改成直接用esri官网的，试试，排除错误。（

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

）