html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="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>
<link
rel="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博客