arcgis for js 4.x 天地图调用(4.9版本以上)(经纬度投影、墨卡托投影)
1.注意版本问题,调用不同
2.MyCustomTileLayer.js
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
define(['exports', "esri/layers/BaseTileLayer","esri/request"], function (
exports,
BaseTileLayer,
esriRequest
) {
const MyCustomTileLayer = BaseTileLayer.createSubclass({
// properties of the custom tile layer
properties: {
urlTemplate: null,
},
// override getTileUrl()
// generate the tile url for a given level, row and column
getTileUrl: 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 LayerView
var url = this.getTileUrl(level, row, col);
// request for tiles based on the generated url
// the signal option ensures that obsolete requests are aborted
return esriRequest(url, {
responseType: "image",
//signal: options && options.signal
allowImageDataAccess: true
})
.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));
}
});
return MyCustomTileLayer;
})
3.4326tileinfo
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
define(['exports', 'esri/layers/support/TileInfo', 'esri/config'], function ( exports, TileInfo, esriConfig ) { 'use strict' const lods = [ { level: 1, levelValue: 1, resolution: 0.703125, scale: 295497593.05875003 }, { 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-5, scale: 36071.483527679447 }, { level: 15, levelValue: 15, resolution: 4.291534423828125e-5, scale: 18035.741763839724 }, { level: 16, levelValue: 16, resolution: 2.1457672119140625e-5, scale: 9017.8708819198619 }, { level: 17, levelValue: 17, resolution: 1.0728836059570313e-5, scale: 4508.9354409599309 }, { level: 18, levelValue: 18, resolution: 5.3644180297851563e-6, scale: 2254.4677204799655 }, { level: 19, levelValue: 19, resolution: 2.68220901489257815e-6, scale: 1127.23386023998275 }, { level: 20, levelValue: 2, resolution: 1.341104507446289075e-6, scale: 563.616930119991375 } ] const tileInfo = new TileInfo({ dpi: 90.71428571427429, rows: 256, cols: 256, format: 'image/png', compressionQuality: 0, origin: { x: -180, y: 90 }, spatialReference: { wkid: 4326 }, lods: lods }) exports.tileInfo = tileInfo exports.lods = lods })
4.html调用(经纬度投影)
<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <title>(经纬度)天地图加载</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 800px; width: 800px; overflow: hidden; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/css/main.css" /> <script src="https://js.arcgis.com/4.23/init.js"></script> <script> require(["esri/Map", "esri/views/MapView", "esri/layers/GraphicsLayer", "esri/Graphic", "esri/PopupTemplate", "esri/widgets/Popup", "esri/layers/MapImageLayer", "esri/widgets/Legend", "esri/layers/WebTileLayer", "esri/layers/WMTSLayer", "esri/widgets/BasemapGallery/support/LocalBasemapsSource", "esri/widgets/BasemapGallery", "esri/Basemap", "esri/layers/FeatureLayer", "esri/geometry/Extent", "esri/geometry/SpatialReference", 'esri/config', '../4326.js', '../4490.js', 'esri/layers/support/TileInfo', "../MyCustomTileLayer.js", "esri/layers/TileLayer", ], function( Map, MapView, GraphicsLayer, Graphic, PopupTemplate, Popup, MapImageLayer, Legend, WebTileLayer, WMTSLayer, LocalBasemapsSource, BasemapGallery, Basemap, FeatureLayer, Extent, SpatialReference, esriConfig, epsg4326, epsg4490, TileInfo, MyCustomTileLayer, TileLayer ) { var tileInfo = epsg4326.tileInfo; var key = "天地图key" key = "6a92e00bdfafade25568c053a5ba6de4" var tiledLayer = new MyCustomTileLayer({ urlTemplate: "http://t0.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" + key, tileInfo: tileInfo, id: '影像', listMode: 'hide' //这个属性设置是为了在layerlist不显示出来 }); var tiledLayer_poi = new MyCustomTileLayer({ urlTemplate: "http://t0.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" + key, tileInfo: tileInfo, id: '影像标记', listMode: 'hide' }); var tiledLayer1 = new MyCustomTileLayer({ 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&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" + key, tileInfo: tileInfo, id: '矢量', visible: false, listMode: 'hide' }); var tiledLayer_poi1 = new MyCustomTileLayer({ urlTemplate: "http://t0.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" + key, tileInfo: tileInfo, id: '矢量标记', visible: false, listMode: 'hide' }); var basemap = new Basemap({ baseLayers: [tiledLayer, tiledLayer_poi, tiledLayer1, tiledLayer_poi1], }) var map = new Map({ basemap: basemap }); var view = new MapView({ container: "viewDiv", map: map, spatialReference: { wkid: 4326 }, scale: tileInfo.lods[7], //center: [113.754645, 23.198923], //113.27434372047993,22.722786885699826 linked: false, zoom:7, constraints: { lods: tileInfo.lods, minScale: tileInfo.lods[0].scale, maxScale: tileInfo.lods[19].scale }, }); view.extent = new Extent({ xmin: 113.36595023855007, ymin: 23.671927965183833, xmax: 114.5628763484501, ymax: 22.7009907263257, spatialReference: { wkid: 4326 } }); }); </script> </head> <body class="calcite"> <div id="viewDiv"></div> </body> </html>
调用墨卡托投影 html
<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <title>(墨卡托)天地图加载</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 800px; width: 800px; overflow: hidden; } </style> <script src="http://code.jquery.com/jquery.min.js"></script> <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/css/main.css" /> <script src="https://js.arcgis.com/4.23/init.js"></script> <script> require(["esri/Map", "esri/views/MapView", "esri/layers/GraphicsLayer", "esri/Graphic", "esri/PopupTemplate", "esri/widgets/Popup", "esri/layers/MapImageLayer", "esri/widgets/Legend", "esri/layers/WebTileLayer", "esri/layers/WMTSLayer", "esri/widgets/BasemapGallery/support/LocalBasemapsSource", "esri/widgets/BasemapGallery", "esri/Basemap", "esri/layers/FeatureLayer", "esri/geometry/Extent", "esri/geometry/SpatialReference", 'esri/config','esri/layers/support/TileInfo', "../MyCustomTileLayer.js", "esri/layers/TileLayer", ], function( Map, MapView, GraphicsLayer, Graphic, PopupTemplate, Popup, MapImageLayer, Legend, WebTileLayer, WMTSLayer, LocalBasemapsSource, BasemapGallery, Basemap, FeatureLayer, Extent, SpatialReference, esriConfig, TileInfo, MyCustomTileLayer, TileLayer ) { var key = "天地图key" key = "6a92e00bdfafade25568c053a5ba6de4" // http://t0.tianditu.com/img_w/esri/wmts 可代替 http://t0.tianditu.gov.cn/img_w/wmts 效果一致 var tiledLayer = new MyCustomTileLayer({ 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={level}&TileCol={col}&TileRow={row}&tk=" + key, id: '影像', listMode: 'hide' //这个属性设置是为了在layerlist不显示出来 }); var tiledLayer_poi = new MyCustomTileLayer({ 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={level}&TileCol={col}&TileRow={row}&tk=" + key, id: '影像标记', listMode: 'hide' }); var tiledLayer1 = new MyCustomTileLayer({ 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={level}&TileCol={col}&TileRow={row}&tk=" + key, id: '矢量', visible: false, listMode: 'hide' }); var tiledLayer_poi1 = new MyCustomTileLayer({ 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={level}&TileCol={col}&TileRow={row}&tk=" + key, id: '矢量标记', visible: false, listMode: 'hide' }); var basemap = new Basemap({ baseLayers: [tiledLayer, tiledLayer_poi, tiledLayer1, tiledLayer_poi1], }) var map = new Map({ basemap: basemap }); var view = new MapView({ container: "viewDiv", map: map, spatialReference: { wkid: 3857 //102100 }, center: [113.754645, 23.198923], //113.27434372047993,22.722786885699826 linked: false, zoom:7, }); }); </script> </head> <body class="calcite"> <div id="viewDiv"></div> </body> </html>