数据可视化与图形工具

7.1 热力图

const heat = new sdk.HeatMap(map,{radius:25,opacity:[0,0.8]});
heat.setDataSet({data:[{lng:100.02228,lat:21.67623,count:10}],max:20});

radius 为像素核大小；opacity 为透明度区间；gradient 为数值分段到 CSS 颜色的映射；zooms 限定显示级别。数据字段为 lng、lat、count，max 为归一化上限。支持 addDataPoint、setOptions、show/hide/destroy。

7.2 点聚合

const cluster = new sdk.MarkerCluster(map,[
  {lnglat:[100.02228,21.67623],shopId:'a'},
  {lnglat:[100.02230,21.67625],shopId:'b'}
],{gridSize:60,maxZoom:20,minClusterSize:2,zoomOnClick:true});

参数	含义
gridSize	网格像素尺寸
maxZoom	到达后逐点显示
minClusterSize	最少聚合点数
averageCenter	是否使用平均位置
zoomOnClick	点击时是否缩放
renderClusterMarker / renderMarker	回调 `{marker,count,clusterData}` 定制标记

更新 setData 或 addData，读取 getCount/getClustersCount，结束 destroy。算法为网格聚合，不承诺与高德生成相同分组。

7.3 瓦片与海量点

// 仅演示地址模板：替换成业务有权使用的 XYZ 瓦片服务。
const tiles = new sdk.TileLayer({map,
  tileUrl:'https://YOUR_TILE_SERVER/{z}/{x}/{y}.png',
  tileSize:256,opacity:0.7,zooms:[10,20]
});
const mass = new sdk.MassMarks([
  {lnglat:[100.02228,21.67623],id:'shop-1'}
],{map,opacity:0.9});
mass.on('click',event => console.log(event.data));
// mass.setData(nextData); mass.destroy(); tiles.destroy();

tileSize 支持 256/512，opacity 为 0–1；MassMarks 可通过 style 配置图标 URL、尺寸和锚点。第三方瓦片的授权、坐标和数据质量由提供方决定。海量点不是 POI 搜索服务；数量性能应在目标浏览器验证。

7.4 绘制、编辑

const mouse = new sdk.MouseTool(map);
mouse.on('draw',event => console.log(event.obj));
mouse.polyline({strokeColor:'#1268e5',strokeWeight:5});
// 单击加点、双击结束。mouse.close(false) 退出并保留完成图形。
const editor = new sdk.PolylineEditor(map,line);
editor.open();
// editor.close(); editor.destroy(); mouse.destroy();

MouseTool 支持 marker、polyline、polygon、circle、rectangle；本版 JS 的 finish 是内部方法，业务不能像 Android 一样调用 finish。编辑器支持顶点拖动、中点插入、右键删除以及 addNode/removeNode；PolygonEditor 对面使用同样调用方式。