Leaflet 技术分享（二）

自定义图标

Leaflet 允许使用自定义图标来替换默认的标记图标。可以通过 L.icon() 方法来创建自定义图标，并在创建标记时传递这个图标。

const customIcon = L.icon({
    iconUrl: 'path/to/custom-icon.png',
    iconSize: [38, 95], // size of the icon
    iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
    popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});

const customMarker = L.marker([51.5, -0.09], { icon: customIcon }).addTo(map);

图层控制

Leaflet 提供了对图层的管理功能，可以通过 L.control.layers() 来添加图层切换控件。

const baseMaps = {
    "OpenStreetMap": L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),
    "Satellite": L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
};

L.control.layers(baseMaps).addTo(map);

事件处理

Leaflet 支持多种事件处理机制，比如点击、鼠标移动等。可以通过 on 方法为地图或者其他图层绑定事件。

map.on('click', function(e) {
    alert("You clicked the map at " + e.latlng);
});

进阶功能

使用 GeoJSON 显示数据

Leaflet 允许使用 GeoJSON 格式的数据来显示地理信息。可以通过 L.geoJSON() 方法将 GeoJSON 数据添加到地图中。

const geojsonFeature = {
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [102.0, 0.5]
    },
    "properties": {
        "name": "Dinagat Islands"
    }
};

L.geoJSON(geojsonFeature).addTo(map);

自定义地图覆盖物

Leaflet 支持自定义覆盖物，如图片、视频等，可以通过 L.imageOverlay() 和 L.videoOverlay() 方法来实现。

const imageUrl = 'path/to/image.png';
const imageBounds = [[40.712, -74.227], [40.774, -74.125]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);