本文主要是介绍arcgis js api加载4490服务，以basetilelayer方式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><metaname="viewport"content="initial-scale=1, maximum-scale=1, user-scalable=no"/><title>以basetilelayer加载切片服务</title><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style><linkrel="stylesheet"href="https://js.arcgis.com/4.27/esri/themes/light/main.css"/><script src="https://js.arcgis.com/4.27/"></script><script>require(["esri/Map","esri/views/SceneView","esri/layers/BaseTileLayer","esri/layers/support/TileInfo","esri/geometry/SpatialReference","esri/geometry/Extent","esri/config","esri/request","esri/layers/FeatureLayer",], function (Map,SceneView,BaseTileLayer,TileInfo,SpatialReference,Extent,esriConfig,esriRequest,FeatureLayer) {var tileInfo = new TileInfo({rows: 256,cols: 256,dpi: 96,format: "PNG",compressionQuality: 0,origin: {x: -180,y: 90,},spatialReference: {wkid: 4490,latestWkid: 4490,},lods: [{level: 0,resolution: 0.703125,scale: 2.958287637958547e8,},{level: 1,resolution: 0.3515625,scale: 1.4791438189792734e8,},{level: 2,resolution: 0.17578125,scale: 7.395719094896367e7,},{level: 3,resolution: 0.087890625,scale: 3.6978595474481836e7,},{level: 4,resolution: 0.0439453125,scale: 1.8489297737240918e7,},{level: 5,resolution: 0.02197265625,scale: 9244648.868620459,},{level: 6,resolution: 0.010986328125,scale: 4622324.4343102295,},{level: 7,resolution: 0.0054931640625,scale: 2311162.2171551147,},{level: 8,resolution: 0.00274658203125,scale: 1155581.1085775574,},{level: 9,resolution: 0.001373291015625,scale: 577790.5542887787,},{level: 10,resolution: 6.866455078125e-4,scale: 288895.27714438934,},{level: 11,resolution: 3.4332275390625e-4,scale: 144447.63857219467,},{level: 12,resolution: 1.71661376953125e-4,scale: 72223.81928609734,},{level: 13,resolution: 8.58306884765625e-5,scale: 36111.90964304867,},{level: 14,resolution: 4.291534423828125e-5,scale: 18055.954821524334,},{level: 15,resolution: 2.1457672119140625e-5,scale: 9027.977410762167,},{level: 16,resolution: 1.0728836059570312e-5,scale: 4513.9887053810835,},{level: 17,resolution: 5.364418029785156e-6,scale: 2256.9943526905417,},{level: 18,resolution: 2.682209014892578e-6,scale: 1128.4971763452709,},{level: 19,resolution: 1.341104507446289e-6,scale: 564.2485881726354,},{level: 20,resolution: 6.705522537231445e-7,scale: 282.1242940863177,},{level: 21,resolution: 3.3527612686157227e-7,scale: 141.06214704315886,},{level: 22,resolution: 1.6763806343078613e-7,scale: 70.53107352157943,},],});var tileExtent = new Extent({xmin: 114.11814939507543,ymin: 30.477998641133187,xmax: 114.29229960553091,ymax: 30.60676075395578,spatialReference: {wkid: 4490,},});var MyCustomTileLayer = BaseTileLayer.createSubclass({properties: {urlTemplate: null,},getTileUrl: function (level, row, col) {return this.urlTemplate.replace("{z}", level).replace("{x}", col).replace("{y}", row);},fetchTile: function (level, row, col, options) {var url = this.getTileUrl(level, row, col);return esriRequest(url, {responseType: "image",allowImageDataAccess: true,}).then(function (response) {var image = response.data;var width = this.tileInfo.size[0];var height = this.tileInfo.size[0];var canvas = document.createElement("canvas");var context = canvas.getContext("2d");canvas.width = width;canvas.height = height;if (this.tint) {context.fillStyle = this.tint.toCss();context.fillRect(0, 0, width, height);context.globalCompositeOperation = "difference";}context.drawImage(image, 0, 0, width, height);return canvas;}.bind(this));},});var mylayer = new MyCustomTileLayer({urlTemplate:"https://edutrial.geoscene.cn/geoscene/rest/services/hanyang4490/MapServer/WMTS/tile/1.0.0/hanyang4490/default/default028mm/{z}/{y}/{x}.png",tileInfo: tileInfo,});var map = new Map({spatialReference: new SpatialReference({ wkid: 4490 }),basemap: {baseLayers: [mylayer],},});var view = new SceneView({container: "viewDiv",map: map,extent: tileExtent,spatialReference: new SpatialReference({ wkid: 4490 }),});});</script></head><body><div id="viewDiv"></div></body>
</html>
参考资料：
arcgis javascript api4.x以basetilelayer方式加载arcgis发布的栅格切片服务_arcgis api for javascript加载本地影像切片-CSDN博客
这篇关于arcgis js api加载4490服务，以basetilelayer方式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
