下载外部图片

interface MapImageLoadResult {
  readonly data: {readonly width:number; readonly height:number; readonly data:Uint8Array}
}
map.loadImage(url:string):Promise<MapImageLoadResult>

// @gis-api 0.5-session
// @permissions ["project.read", "map.write"]
import {map} from "sqsmap";
const result=await map.loadImage("https://www.sqsmap.com/sdk/sqsmap-core/load-image-fixtures/icon.png");
map.addImage("marker",result.data);
await map.sqs.flush();
export default {width:result.data.width,height:result.data.height};

<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>SqsMap external image</title>
<style>body{margin:0;font:14px system-ui}#map{height:65vh;min-height:240px}.tools{display:flex;gap:8px;padding:12px;flex-wrap:wrap}input{min-width:260px;flex:1}#status,#attribution{padding:8px 12px;white-space:pre-wrap}</style>
<div id="map"></div><div class="tools"><input id="url" aria-label="Image URL"><button id="load" disabled>Load PNG/JPEG/WebP</button><button id="cancel" disabled>Cancel download</button><button id="remove" disabled>Remove image</button><button id="destroy" disabled>Destroy map</button></div><div id="status" role="status">Starting…</div><div id="attribution"></div>
<script type="module">
import {MapView} from './dist/index.js';
const status=document.querySelector('#status'),url=document.querySelector('#url'),load=document.querySelector('#load'),cancel=document.querySelector('#cancel'),remove=document.querySelector('#remove'),destroy=document.querySelector('#destroy');
url.value=new URL('./load-image-fixtures/icon.png',import.meta.url).href;
const view=await MapView.create(document.querySelector('#map'));let alive=true,pending;
const report=error=>{if(alive)status.textContent=(error.code?error.code+': ':'')+String(error.message??error);};
const offAttribution=view.on('sqs.attributionschange',event=>{document.querySelector('#attribution').textContent=event.attributions.text;});
const offImages=view.on('sqs.imageschange',event=>{if(alive)status.textContent='Image '+event.method+': '+event.id;});
view.jumpTo({center:[0,0],zoom:0});view.setStyle(new URL('./missing-image-style.json',import.meta.url).href);
try {
 const deadline=Date.now()+15000;while(!(['ready','degraded'].includes(view.basemapStatus.state)&&view.basemapStatus.readyTiles>0)){if(Date.now()>deadline)throw Error('Style did not become ready');await new Promise(r=>setTimeout(r,30));}
 document.querySelector('#attribution').textContent=(await view.getAttributions()).text;load.disabled=remove.disabled=destroy.disabled=false;status.textContent='Ready to load an external image';
}catch(error){report(error);destroy.disabled=false;}
load.onclick=async()=>{
 if(!alive||pending)return;const controller=new AbortController();pending=controller;load.disabled=true;cancel.disabled=false;status.textContent='Downloading…';
 try {const image=await view.loadImage(url.value,{signal:controller.signal});if(!alive||controller.signal.aborted)return;
  if(await view.hasImage('marker'))view.removeImage('marker');view.addImage('marker',image.data);await view.flush({render:true});if(alive)status.textContent='Loaded '+image.data.width+' × '+image.data.height;
 }catch(error){report(error);}finally{if(pending===controller)pending=undefined;if(alive){load.disabled=false;cancel.disabled=true;}}
};
cancel.onclick=()=>pending?.abort();
remove.onclick=async()=>{try{if(await view.hasImage('marker')){view.removeImage('marker');await view.flush({render:true});}if(alive)status.textContent='Image removed';}catch(error){report(error);}};
destroy.onclick=()=>{alive=false;pending?.abort();offAttribution();offImages();view.destroy();for(const button of [load,cancel,remove,destroy])button.disabled=true;url.disabled=true;status.textContent='Map destroyed';};
window.addEventListener('pagehide',()=>{if(alive)destroy.onclick();},{once:true});
</script></html>