leaflet地图搭建常用语法

leaflet常用语法

1. 初始化地图对象：在 JavaScript 文件中，使用 Leaflet 创建地图对象并将其添加到地图容器中。上述代码中，L.map(‘map’) 创建了一个地图对象，并通过 setView() 方法设置了地图的中心位置和缩放级别

var map = L.map('map').setView([51.505, -0.09], 13);

2. 添加地图图层：通过 Leaflet 提供的不同图层（例如瓦片图层、标记图层等）来自定义地图。

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
}).addTo(map);

3. 添加标记：可以使用 L.marker() 创建一个标记，并将其添加到地图上的特定位置

var marker = L.marker([51.5, -0.09],
{icon: myIcon,title: '设备信息',
alt: '设备信息',opacity:1}).addTo(map);

4. 图层处理：L.FeatureGroup具有添加、移除、清空、绑定事件等。以下是一些常见的 L.FeatureGroup 的使用方法：

//创建 L.FeatureGroup
var featureGroup = L.featureGroup();
//添加要素到 L.FeatureGroup：
var marker = L.marker([51.5, -0.09]);
var polygon = L.polygon([...]);

featureGroup.addLayer(marker);
featureGroup.addLayer(polygon);
//将 L.FeatureGroup 添加到地图：
featureGroup.addTo(map);
//从 L.FeatureGroup 移除要素：
featureGroup.removeLayer(marker);
featureGroup.removeLayer(polygon);
//清空 L.FeatureGroup 中的所有要素：
featureGroup.clearLayers();
//绑定事件处理程序：
featureGroup.on('click', function(event) {
  var clickedLayer = event.layer;
  // 处理点击事件
});

5. 边界画图。

let southWest = map.getBounds().getSouthWest()
let northEastPoint = map.getBounds().getNorthEast()
var imageUrl = 'https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    imageBounds = [southWest , northEastPoint];//[左上角,右下角]
L.imageOverlay(imageUrl, imageBounds).addTo(map);

`