图像资源

// @gis-api 0.5-session
// @permissions ["project.read","map.write"]
import {map} from "sqsmap";
map.addImage("marker", {width:1,height:1,data:new Uint8Array([0,0,255,255])}, {pixelRatio:1,sdf:false});
await map.sqs.flush();
const image = await map.getImage("marker");
image.data.data.set([255,0,0,255]);
map.updateImage("marker", image.data);
await map.sqs.flush();
export default {ids:await map.listImages(),info:await map.sqs.getImageInfo("marker")};

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>SqsMap image resources</title>
<style>body{margin:0;font:16px system-ui;background:#f5f7fa;color:#182330}main{display:grid;grid-template-columns:1fr 280px;min-height:100vh}#map{min-height:70vh}aside{padding:20px}button{padding:8px;margin:4px}pre{white-space:pre-wrap;overflow-wrap:anywhere}@media(max-width:650px){main{grid-template-columns:1fr}}</style>
<main><div id="map"></div><aside><h1>Editable map image</h1><button id="add" disabled>Add blue image</button><button id="update" disabled>Update to red</button><button id="remove" disabled>Remove image</button><button id="query" disabled>Read image metadata</button><button id="destroy">Destroy map</button><p id="attribution"></p><pre id="status">Starting</pre></aside></main>
<script type="module">
import {MapView} from 'https://www.sqsmap.com/sdk/sqsmap-core/dist/index.js';
const status=document.querySelector('#status'),buttons=['add','update','remove','query'].map(id=>document.getElementById(id));let view,closed=false,busy=false,initialized=false,offImages,offView,offAttributions,offError;
function image(color){const data=new Uint8Array(16*16*4);for(let i=0;i<data.length;i+=4)data.set(color,i);return {width:16,height:16,data};}
async function refresh(){if(!view||closed)return;const exists=await view.hasImage('marker');if(closed)return;buttons[0].disabled=busy||exists||!initialized;buttons[1].disabled=buttons[2].disabled=busy||!exists;buttons[3].disabled=busy;}
async function perform(fn){if(closed||busy)return;busy=true;try{await refresh();await fn();await view.flush({render:true});await refresh();}catch(error){if(!closed)status.textContent=String(error);}finally{busy=false;if(!closed)await refresh();}}
buttons[0].addEventListener('click',()=>perform(()=>view.addImage('marker',image([0,0,255,255]))));
buttons[1].addEventListener('click',()=>perform(()=>view.updateImage('marker',image([255,0,0,255]))));
buttons[2].addEventListener('click',()=>perform(()=>view.removeImage('marker')));
buttons[3].addEventListener('click',()=>perform(async()=>{const snapshot=await view.getImage('marker');status.textContent=JSON.stringify({ids:await view.listImages(),info:await view.getImageInfo('marker'),firstPixel:snapshot?Array.from(snapshot.data.data.slice(0,4)):null},null,2);}));
function destroy(){if(closed)return;closed=true;offImages?.();offView?.();offAttributions?.();offError?.();view?.destroy();for(const button of buttons)button.disabled=true;status.textContent='Map destroyed; observers removed.';}
document.querySelector('#destroy').addEventListener('click',destroy);window.addEventListener('pagehide',destroy,{once:true});
try{
 view=await MapView.create(document.querySelector('#map'),{worker:false});if(closed){view.destroy();throw Error('Initialization cancelled.');}
 if(view.capabilities.imageRegistry!==true)throw Error('A matching image-capable SDK is required.');
 offImages=view.onImagesChange(event=>{if(!closed){status.textContent=JSON.stringify(event,null,2);refresh().catch(error=>{if(!closed)status.textContent=String(error);});}});
 offError=view.on('error',event=>{if(!closed)status.textContent=event.message;});
 async function attribution(){try{const value=await view.getAttributions();if(!closed)document.querySelector('#attribution').textContent=value.text;}catch(error){if(!closed)status.textContent=String(error);}}
 offAttributions=view.onAttributionsChange(attribution);await attribution();
 // Read actual style progress, then initialize the image once. No fixed loading delay.
 offView=view.on('view',()=>{if(initialized||closed||!['ready','degraded'].includes(view.basemapStatus.state)||view.basemapStatus.readyTiles===0)return;initialized=true;perform(()=>view.addImage('marker',image([0,0,255,255])));});
 view.jumpTo({center:[0,0],zoom:0});view.setStyle('https://www.sqsmap.com/sdk/sqsmap-core/image-fixtures/style.json');await view.flush();await refresh();
}catch(error){if(!closed)status.textContent=String(error);}
</script></html>