求助！arcgis js 4.x 怎么监听WebTileLayer的所有瓦片的加载情况
在使用MapView.takeScreenshot()截图输出天地图和其他瓦片图层时，由于网络原因导致天地图部分瓦片并没有及时渲染出来，最终输出的图片中缺失部分瓦片，怎样监听这些瓦片的加载情况，在部分瓦片加载失败时能重新加载，求大佬给个思路，谢谢
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
Take a screenshot of a SceneView | Sample | ArcGIS Maps SDK for JavaScript
4.28
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.28/esr ... ot%3B
/>
<script src="https://js.arcgis.com/4.28/%26 ... gt%3B
<script>
const tileInfo = {
rows: 256,
cols: 256,
compressionQuality: 0,
origin: {
x: -180,
y: 90,
},
spatialReference: {
wkid: 4490,
latestWkid: 4490,
},
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-5,
scale: 36071.483527679447,
},
{
level: 14,
levelValue: "15",
resolution: 4.291534423828125e-5,
scale: 18035.741763839724,
},
{
level: 15,
levelValue: "16",
resolution: 2.1457672119140625e-5,
scale: 9017.8708819198619,
},
{
level: 16,
levelValue: "17",
resolution: 1.0728836059570313e-5,
scale: 4508.9354409599309,
},
{
level: 17,
levelValue: "18",
resolution: 5.3644180297851563e-6,
scale: 2254.4677204799655,
},
{
level: 18,
levelValue: "19",
resolution: 2.68220901489257815e-6,
scale: 1127.23386023998275,
},
{
level: 19,
levelValue: "20",
resolution: 1.341104507446289075e-6,
scale: 563.616930119991375,
},
],
};
require([
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/Map",
"esri/layers/support/TileInfo",
"esri/geometry/Extent",
"esri/geometry/Point",
], (MapView, WebTileLayer, Map, TileInfo, Extent, Point) => {
const map = new Map({});
const TDT_TOKEN = "5ef8f5d922ba36d3ae88e673ad57497b";
const TDT_URL =
"http://{subDomain}.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" +
TDT_TOKEN;
const tdt = new WebTileLayer({
id: "tdt",
tileInfo: new TileInfo(tileInfo),
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
fullExtent: new Extent({
xmin: -180,
ymin: -90,
xmax: 180,
ymax: 90,
spatialReference: { wkid: 4490 },
}),
urlTemplate: TDT_URL,
spatialReference: {
wkid: 4490,
},
});
const mapView = new MapView({
container: "viewDiv",
map,
center: new Point({
x: 120,
y: 33,
spatialReference: {
wkid: 4490,
},
}),
zoom: 12,
spatialReference: {
wkid: 4490,
},
constraints: {
maxZoom: 17,
minZoom: 2,
},
});
map.add(tdt);
document
.querySelector("#screenshotBtn")
.addEventListener("click", () => {
mapView.takeScreenshot({}).then((screenshot) => {
download(screenshot.dataUrl, "地图打印");
});
});
function download(url, filename) {
fetch(url).then(async (ctx) => {
console.log(ctx);
let res = await ctx.blob();
console.log(res);
var newUrl = URL.createObjectURL(res);
var a = document.createElement("a");
a.setAttribute("href", newUrl);
a.setAttribute("target", "_blank");
a.setAttribute("download", filename); // 自定义文件名（有效）
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
// @ts-ignore
a = null;
URL.revokeObjectURL(url);
});
}
});
</script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#screenshotBtn {
position: fixed;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id="viewDiv" class="esri-widget">
<button id="screenshotBtn">打印</button>
</div>
</body>
</html>
1 个回复
谢军
赞同来自: 安图生
要回复问题请先登录或注册