🌱 Leaflet.canvasmarker.js 使用方法
使用次工具类前,需要安装依赖 rbush
npm install rbush
# or
yarn add rbush
引入方法
import { canvasMarkerLayer } from '@/hook/leaflet.canvasmarker';
// CanvasMarkerLayer 继承 L.Layer
const layer: CanvasMarkerLayer = canvasMarkerLayer(options);
options 的可选参数:
参数 | 描述 | 默认值 |
---|---|---|
zIndex | 图层 DOM 元素的堆叠顺序 | null |
collisionFlg | 是否开启碰撞检测功能,默认不开启 | false |
moveReset | 在 move 时是否刷新地图,默认开启 | false |
opacity | 图层透明度 | 1 |
markerRender | 外部传入的标记渲染方法,方法内使用 canvas 绘画的api | null |
isImg | 是否为图片标记吗,默认不是 | false |
关键使用方法 (method):
- onAdd: 重要方法
注意事项:在添加元素前一定先调用次方法,此方法需传入 map 对象,否则会出现错误
/**
* 继承 L.Layer 必须实现的方法
* 图层 Dom 节点创建添加到地图容器
*/
onAdd(map: L.Map) {
// segment code ...
}
- addLayers:添加元素 (传入元素数组)
/**
* 添加标注数组,在一次性添加许多标注时使用此函数会比循环调用 marker 函数效率更高
* @param {Array.<L/Marker>} layers 标注数组
* @param {boolean=true} redraw 是否重新绘制(默认为true)
* @return {Object} this
*/
addLayers(layers: (L|Marker)[], redraw: boolean = true){
// segment code ...
}
- addLayer:添加元素 (传入单个元素)
/**
* 添加标注
* @param {L/Marker} layer 标注
* @param {boolean=true} redraw 是否重新绘制(默认为true)
* @return {Object} this
*/
addLayer(layer: L|Marker, redraw: boolean = true) {
// segment code ...
}
图片标记例子 (example):
import { canvasMarkerLayer } from '@/hook/leaflet.canvasmarker'; // 引入
// 初始化实例
const pointLayerGroup = canvasMarkerLayer({
isImg: false
});
...
// 添加至地图
pointLayerGroup.addTo(map);
...
// 实例化标记点
const MarkerIcon = L.icon({
iconUrl: 'src/assets/logo.png',
iconSize: [16, 16],
iconAnchor: [-8, -8]
});
const markerItem = L.marker([markerLatLng[1], markerLatLng[0]], {
icon: MarkerIcon
});
...
// 将标记点添加到 canvas 层中
pointLayerGroup.addLayer(markerItem);
canvas 绘制标记例子 (example):
import { canvasMarkerLayer } from '@/hook/leaflet.canvasmarker'; // 引入
// 标记渲染方法
const normalMarker = (ctx: any, x: number, y: number, b: number) => {
// 绘制点
ctx.beginPath(); // 开始绘制
ctx.arc(x, y, b / 2, 0, 2 * Math.PI); // 画一个圆形
ctx.fillStyle = 'rgba(55, 163, 84, 0.9)'; // 设置 fill 的颜色
ctx.fill(); // 填充颜色
ctx.lineWidth = 2; // 设置边框宽度为 2,默认黑色
ctx.stroke(); // 使用边框
ctx.closePath(); // 结束绘制
};
// 初始化实例
const pointLayerGroup = canvasMarkerLayer({ // markerRender 不传使用默认渲染方法
markerRender: normalMarker
});
...
// 添加至地图
pointLayerGroup.addTo(map);
...
// 实例化标记点
const MarkerIcon = L.icon({
iconUrl: '',
iconSize: [16, 16],
iconAnchor: [-8, -8]
});
const markerItem = L.marker([markerLatLng[1], markerLatLng[0]], {
icon: MarkerIcon
});
...
// 将标记点添加到 canvas 层中
pointLayerGroup.addLayer(markerItem);
本文作者:iNSlog
本文链接:https://www.cnblogs.com/inslog/p/17592530.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步