Leaflet.LabelTextCollision使用教程

Leaflet.LabelTextCollision是一个用于处理地图上标签文本碰撞的插件，它能够自动调整标签的位置，防止它们遮挡其他标签。以下是使用该插件的基本步骤：

1. **安装**：首先，在你的项目中安装Leaflet.LabelTextCollision，可以使用npm或者直接通过CDN引入。例如，如果你使用npm：

npm install leaflet.label-textcollision

2. **导入库**：在你的JavaScript文件中，引入Leaflet和LabelTextCollision模块：

import L from 'leaflet';
import 'leaflet-label-textcollision/dist/leaflet.label.textcollision.min.css';
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

3. **创建带碰撞检测的标记**：在创建Marker或Popup时，传入`LabelTextCollision`选项：

const marker = new L.marker([51.505, -0.09], {
    labelOptions: {
        text: "这是个大标签",
        collisionRadius: 40, // 自定义碰撞半径
        textCollision: true,
    }
});

4. **启用事件监听**：当标签位置发生变化时，你可以选择监听事件并作出相应处理：

marker.on('labeltextcollisionend', function() {
    console.log('标签位置已调整');
});