点聚合

import {map} from 'sqsmap';
map.addSource('points',{type:'geojson',cluster:true,clusterMaxZoom:8,
 clusterProperties:{total:['+',['get','weight']]},data:{type:'FeatureCollection',features:[
  {type:'Feature',id:'a',properties:{weight:3},geometry:{type:'Point',coordinates:[0,0]}},
  {type:'Feature',id:'b',properties:{weight:4},geometry:{type:'Point',coordinates:[.01,0]}}
 ]}});
map.addLayer({id:'points',type:'circle',source:'points',paint:{'circle-radius':10}});
map.jumpTo({center:[0,0],zoom:0});await map.sqs.flush();
const source=await map.getSource('points');
const cluster=(await map.querySourceFeatures('points')).find(f=>f.properties.cluster);
if(cluster){
 const id=cluster.properties.cluster_id;
 const page=await source.getClusterLeaves(id,10,0);
 const children=await source.getClusterChildren(id);
 const zoom=await source.getClusterExpansionZoom(id);
 map.jumpTo({center:cluster.geometry.coordinates.slice(0,2),zoom});await map.sqs.flush();
}
await source.setClusterOptions({clusterRadius:60});
const options=await source.getClusterOptions();

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>SqsMap point clustering</title><style>html,body{height:100%;margin:0;font-family:system-ui}#map{height:100%}.tools{position:absolute;top:12px;left:12px;background:white;padding:12px;border-radius:8px;max-width:330px}button{padding:6px;margin:2px}pre{white-space:pre-wrap}#credits{position:absolute;bottom:0;right:0;background:#fffd;padding:4px;font-size:12px}</style></head><body><div id="map"></div><section class="tools"><strong>Point clustering</strong><p>Click a blue cluster to expand. Red points are original features.</p><div><button id="overview" disabled>Overview</button><button id="expand" disabled>Expand</button><button id="members" disabled>Member page</button><button id="toggle" disabled>Toggle clustering</button></div><pre id="log" role="status">Loading</pre></section><div id="credits"></div><script type="module">
// Serve next to a matched standalone SqsMap SDK's dist/ and wasm/ directories.
import {MapView} from './dist/index.js';
const log=document.querySelector('#log'),buttons=[...document.querySelectorAll('button')];let map,source,enabled=true;const subscriptions=[];
async function run(action){buttons.forEach(b=>b.disabled=true);try{await action();}catch(error){log.textContent=String(error);}finally{if(map)buttons.forEach(b=>b.disabled=false);}}
async function group(){return(await map.querySourceFeatures('points')).find(f=>f.properties.cluster===true);}
async function expand(feature){if(!feature){log.textContent='No cluster at this zoom';return;}const zoom=await source.getClusterExpansionZoom(feature.properties.cluster_id);map.jumpTo({center:feature.geometry.coordinates.slice(0,2),zoom});await map.flush();log.textContent='Expanded to zoom '+zoom;}
try{
 map=await MapView.create(document.querySelector('#map'),{worker:false});if(!map.capabilities.clusterScalarProperties)throw Error('Matched clustering SDK/WASM required');
 subscriptions.push(map.on('sqs.attributionschange',event=>document.querySelector('#credits').textContent=event.attributions.text));
 map.jumpTo({center:[.025,0],zoom:0});
 map.addSource('points',{type:'geojson',cluster:true,clusterMaxZoom:8,attribution:'Example data © SqsMap',clusterProperties:{total:[['+',['accumulated'],['get','total']],['get','weight']],labels:['concat',['get','name']],allActive:['all',['get','active']],anyActive:['any',['get','active']]},data:{type:'FeatureCollection',features:Array.from({length:6},(_,i)=>({type:'Feature',id:'p'+i,properties:{weight:i+1,name:'p'+i,active:i!==1},geometry:{type:'Point',coordinates:[i*.01,0]}}))}});
 map.addLayer({id:'points',type:'circle',source:'points',paint:{'circle-radius':['case',['has','point_count'],12,3],'circle-color':['case',['has','point_count'],'#0000ff','#ff0000']}});await map.flush();source=await map.getSource('points');
 document.querySelector('#credits').textContent=(await map.getAttributions()).text;
 subscriptions.push(map.on('click','points',event=>run(async()=>{const f=event.features[0];if(f?.properties.cluster)await expand(f);else if(f)log.textContent=JSON.stringify(f.properties);})));
 document.querySelector('#overview').onclick=()=>run(async()=>{map.jumpTo({center:[.025,0],zoom:0});await map.flush();log.textContent='Overview';});
 document.querySelector('#expand').onclick=()=>run(async()=>expand(await group()));
 document.querySelector('#members').onclick=()=>run(async()=>{const f=await group();if(!f){log.textContent='No cluster at this zoom';return;}const members=await source.getClusterLeaves(f.properties.cluster_id,2,0);log.textContent=JSON.stringify({count:f.properties.point_count,total:f.properties.total,labels:f.properties.labels,allActive:f.properties.allActive,anyActive:f.properties.anyActive,firstPage:members.map(m=>({id:m.id,weight:m.properties.weight}))},null,2);});
 document.querySelector('#toggle').onclick=()=>run(async()=>{await source.setClusterOptions({cluster:!enabled});enabled=!enabled;log.textContent='Clustering '+(enabled?'enabled':'disabled');});
 buttons.forEach(b=>b.disabled=false);log.textContent='Ready';
}catch(error){log.textContent=String(error);}
window.addEventListener('pagehide',()=>{subscriptions.forEach(off=>off());map?.destroy();},{once:true});
</script></body></html>