Appearance
交互与工具
测量(Measure)
ts
import { Measure } from 'geoverse';
const measure = new Measure({
target: map,
kind: 'length', // 'length' 测距 | 'area' 测面
callback: ({ target }) => console.log(target.result), // "1.2 km"
});
measure.start();
// measure.resetKind('area'); measure.clearResult(); measure.destroy();绘制中实时显示分段长度,结果支持拖拽修改、点 ❌ 删除。
绘制(DrawTool)
ts
import { DrawTool } from 'geoverse';
const draw = new DrawTool({
target: map,
kind: 'polygon', // point | polyline | polygon | circle | square | rectangle
config: { infoDiv: true }, // 绘制时显示面积/周长
callback: ({ target }) => console.log(target.coordinates), // WGS-84 经纬度
});要素编辑(FeatureEditor)
ts
import { FeatureEditor } from 'geoverse';
const editor = new FeatureEditor({ target: map, data: [feature] });
editor.on('adjust', (evt) => console.log('编辑中', evt));
editor.start(); // 显示顶点节点,可拖拽
editor.stop(); // 恢复原样式并派发 end 事件轨迹回放(PathSimplifier)
ts
import { PathSimplifier } from 'geoverse';
const track = new PathSimplifier({
mapObj: map,
path: [{ longitude: 118.1, latitude: 24.4, gnssTime: '12:00' } /* ... */],
tracePointsModePlay: 'animation', // animation 平滑 | skip 逐点
showTracePoint: true,
});
track.on('move', (evt) => console.log(evt.data)); // 进度(索引/坐标/里程)
track.start();
// track.pause(); track.resume(); track.setSpeedUp(2); track.destroy();大数据量轨迹在缩放时自动用 simplify-js 抽稀渲染节点。
文字避让(NameLayer)experimental
四方向碰撞避让的文字标签图层。当前避让算法在密集场景仍有已知瑕疵,API 可能调整:
ts
import { NameLayer } from 'geoverse';
const labels = new NameLayer({
map,
pointsArr: [{ position: [118.18, 24.49], text: '厦门' }],
zoom: 10, // 低于该层级不显示
});
map.addLayer(labels);轨迹抽稀(纯算法)
ts
import { compressLine } from 'geoverse';
const result = compressLine(points, { thinTarget: 75, smoothTarget: 20 });