console
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Custom TileLayer</title>
<link rel="stylesheet" href="//js.arcgis.com/4.28/esri/themes/light/main.css" />
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="//js.arcgis.com/4.28/">
</script>
<script>
require([
"esri/Map",
"esri/request",
"esri/Color",
"esri/views/MapView",
"esri/widgets/LayerList",
"esri/widgets/Expand",
"esri/layers/BaseTileLayer",
"esri/core/reactiveUtils"
], (Map, esriRequest, Color, MapView, LayerList, Expand, BaseTileLayer, reactiveUtils) => {
function formatNumberLength (num, radix = 10, length = 0) {
let str = num.toString(radix)
if (length === 0) {
return str
}
while (str.length < length) {
str = '0' + str
}
return str
}
const TintLayer = BaseTileLayer.createSubclass({
properties: {
urlTemplate: null,
tileInfo: null,
},
getTileUrl: function (level, row, col) {
console.log('t', level, row, col)
return this.urlTemplate.replace("{z}", "L" + formatNumberLength(level, 10, 2))
.replace("{x}", "C" + formatNumberLength(col, 16, 8))
.replace("{y}", "R" + formatNumberLength(row, 16, 8));
}
});
const openTopoMapTileLayer = new TintLayer({
urlTemplate: "http://localhost:8888/EarthG11/图层/_alllayers/{z}/{y}/{x}.jpg",
tileInfo: {
"rows": 256,
"cols": 256,
"dpi": 96,
"format": "MIXED",
"compressionQuality": 75,
"origin": {
"x": -180,
"y": 90
},
"spatialReference": {
"wkid": 4490,
"latestWkid": 4490
},
"lods": [{
"level": 0,
"resolution": 0.7039130078552128,
"scale": 295828763.7958547
},
{
"level": 1,
"resolution": 0.3519565039276064,
"scale": 147914381.89792734
},
{
"level": 2,
"resolution": 0.1759782519638032,
"scale": 73957190.94896367
},
{
"level": 3,
"resolution": 0.0879891259819016,
"scale": 36978595.474481836
},
{
"level": 4,
"resolution": 0.0439945629909508,
"scale": 18489297.737240918
},
{
"level": 5,
"resolution": 0.0219972814954754,
"scale": 9244648.868620459
},
{
"level": 6,
"resolution": 0.0109986407477377,
"scale": 4622324.4343102295
},
{
"level": 7,
"resolution": 0.00549932037386885,
"scale": 2311162.2171551147
},
{
"level": 8,
"resolution": 0.002749660186934425,
"scale": 1155581.1085775574
}]
},
});
const map = new Map({
layers: [openTopoMapTileLayer]
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [106, 27],
zoom: 5
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>