需要注意2个地方，一个是tileInfo，一个是getTileUrl，
在tileInfo中定义好cesiumlab切片的相关信息。
getTileUrl 格式化url的格式。
注意设置编辑，避免超出范围报404。
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>WebTileLayer</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="http://localhost:8093/arcgis/4.28/esri/themes/light/main.css" />
<script src="http://localhost:8093/arcgis/4.28/init.js"></script>
<script>
var bashUrl = "http://localhost:8093/cesiumKlmy"
var url = "/{z}/{x}/{y}.png";
require(["esri/Map", "esri/views/SceneView", "esri/layers/WebTileLayer", "esri/geometry/SpatialReference", 'esri/layers/support/TileInfo'],
(Map, SceneView, WebTileLayer, SpatialReference, TileInfo) => {
const tileInfo = new TileInfo({
dpi: 90.71428571428571,
format: "image/png",
spatialReference: new SpatialReference({
wkid: 4326,
}),
origin: {
x: -180,
y: 90
},
lods:
[{
level: 0,
levelValue: 1,
resolution: 0.703125,
scale: 295497593.05875003
},
{
level: 1,
levelValue: 2,
resolution: 0.3515625,
scale: 147748796.52937502
},
{
level: 2,
levelValue: 3,
resolution: 0.17578125,
scale: 73874398.264687508
},
{
level: 3,
levelValue: 4,
resolution: 0.087890625,
scale: 36937199.132343754
},
{
level: 4,
levelValue: 5,
resolution: 0.0439453125,
scale: 18468599.566171877
},
{
level: 5,
levelValue: 6,
resolution: 0.02197265625,
scale: 9234299.7830859385
},
{
level: 6,
levelValue: 7,
resolution: 0.010986328125,
scale: 4617149.8915429693
},
{
level: 7,
levelValue: 8,
resolution: 0.0054931640625,
scale: 2308574.9457714846
},
{
level: 8,
levelValue: 9,
resolution: 0.00274658203125,
scale: 1154287.4728857423
},
{
level: 9,
levelValue: 10,
resolution: 0.001373291015625,
scale: 577143.73644287116
},
{
level: 10,
levelValue: 11,
resolution: 0.0006866455078125,
scale: 288571.86822143558
},
{
level: 11,
levelValue: 12,
resolution: 0.00034332275390625,
scale: 144285.93411071779
},
{
level: 12,
levelValue: 13,
resolution: 0.000171661376953125,
scale: 72142.967055358895
},
{
level: 13,
levelValue: 14,
resolution: 8.58306884765625e-005,
scale: 36071.483527679447
},
{
level: 14,
levelValue: 15,
resolution: 4.291534423828125e-005,
scale: 18035.741763839724
},
{
level: 15,
levelValue: 16,
resolution: 2.1457672119140625e-005,
scale: 9017.8708819198619
},
{
level: 16,
levelValue: 17,
resolution: 1.0728836059570313e-005,
scale: 4508.9354409599309
},
{
level: 17,
levelValue: 18,
resolution: 5.3644180297851563e-006,
scale: 2254.4677204799655
},
{
level: 18,
levelValue: 19,
resolution: 2.68220901489257815e-006,
scale: 1127.23386023998275
},
{
level: 19,
levelValue: 20,
resolution: 1.341104507446289075e-006,
scale: 563.616930119991375
},
{
level: 20,
levelValue: 21,
resolution: 6.705522537231445375e-7,
scale: 281.8084650599956875
},
{
level: 21,
levelValue: 22,
resolution: 3.3527612686157226875e-7,
scale: 140.90423252999784375
}
]
})
// 创建WebTileLayer实例
const mylayer = new WebTileLayer({
urlTemplate: bashUrl + url,
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
},
// 设置边界，避免超出范围了请求后台报404
fullExtent:new Extent({
xmin:84.96650291898627,
ymin:45.53639816676759,
xmax:85.03257700820414,
ymax:45.600000206741775,
})
});
// 格式化url
mylayer.getTileUrl = function (level, row, col) {
return this.urlTemplate
.replace("{z}", level)
.replace("{x}", col)
.replace("{y}", row);
}
// 创建地图实例
const map = new Map();
// 创建视图实例
const view = new SceneView({
container: "viewDiv",
map: map,
// 中心点位置
center: [85.03257700820414, 45.53639816676759],
zoom: 10,
spatialReference: new SpatialReference({
wkid: 4326,
})
});
map.add(mylayer, 0);
})
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>