🌱 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);