更新 'test.js'

尝试修复加载的耗时

test.js

@@ -19,6 +19,7 @@ viewport.yoffset = (viewport.height / 2 - viewport.centery);
 
 let needtiles = new Array();
 let cache = new Array();
+let xhrmanager = new Array();
 
 function calTileSize() {
     let etsize = tilesize;
@@ -95,19 +96,6 @@ function updateviewporttest(scrollx, scrolly, oldz, newz) {
 //test
 function drawtest() {
     ctx.clearRect(0, 0, map.width, map.height);
-    // const testtiles = new Array();
-    // testtiles.push({ x: 0, y: 0 });
-    // testtiles.push({ x: 0, y: 1 });
-    // testtiles.push({ x: 1, y: 0 });
-    // testtiles.push({ x: 1, y: 1 });
-    // testtiles.forEach(et => {
-    //     let etsize = tilesize;
-    //     if (zoom_level != Math.floor(zoom_level)) {
-    //         etsize = tilesize * Math.pow(2, zoom_level - Math.floor(zoom_level + 1));
-    //     }
-    //     const tilev = mplat2viewport(et.x * etsize, et.y * etsize);
-    //     drawRect(tilev.x, tilev.y, etsize, etsize);
-    // });
     const viewport_left_top = viewport2mplat(0, 0);
     const viewport_right_bottom = viewport2mplat(viewport.width, viewport.height);
     const mixnum = calTileNum(viewport_left_top.x);
@@ -118,6 +106,7 @@ function drawtest() {
     const verticount = maynum - miynum + 1;
 
     clearcanvas();
+    xhrabort();
     let tails = new Array();
     for (let i = 0; i < horicount; i++) {
         for (let j = 0; j < verticount; j++) {
@@ -131,7 +120,7 @@ function drawtest() {
     needtiles.forEach(et => {
         const etsize = calTileSize();
         const tilev = mplat2viewport(et.x * etsize, et.y * etsize);
-        drawRect(tilev.x, tilev.y, etsize, etsize);
+        //drawRect(tilev.x, tilev.y, etsize, etsize);
         let z = zoom_level;
         if (zoom_level != Math.floor(zoom_level)) {
             z = Math.floor(zoom_level + 1);
@@ -207,10 +196,38 @@ function downloadimg(z, x, y) {
     });
 }
 
+//尝试优化图片下载机制
+function xhrdownloadimg(z, x, y) {
+    return new Promise((resolve, reject) => {
+        const url = `https://tile.openstreetmap.org/${z}/${x}/${y}.png`;
+        let imgxhr = new XMLHttpRequest();
+        imgxhr.open('GET', url, true);
+        //imgxhr.withCredentials = true;
+        imgxhr.responseType = 'blob';
+        imgxhr.onload = function (e) {
+            if (this.status === 200 && imgxhr.response) {
+                let blob = new Blob([imgxhr.response], { type: 'image/png' });
+                let img = createImageBitmap(blob);
+                cache.push({ img: img, z: z, x: x, y: y });
+                resolve(img);
+            }
+        };
+        xhrmanager.push(imgxhr);
+        imgxhr.send(null);
+    });
+}
+
+function xhrabort() {
+    xhrmanager.forEach(element => {
+        element.abort();
+    });
+    xhrmanager = new Array();
+}
+
 async function getImg(z, x, y) {
     const found = cache.find(e => (e.z == z && e.x == x && e.y == y));
     if (found == undefined) {
-        let p = await downloadimg(z, x, y);
+        let p = await xhrdownloadimg(z, x, y);
         return p;
     } else {
         console.log('exist' + z + '/' + x + '/' + y + '.png');