Leaflet地图开发基础：配置、图层与交互组件详解

首先，通过调用L.map方法并指定容器ID来初始化地图实例。

let map= L.map('map', {
  minZoom: 4,
  maxZoom: 17,
  zoom: 14,
  center: [37.632111, 114.91680237],
  attributionControl: false,
});

• 在初始化地图时，可通过options对象配置多项参数以控制地图行为。
• maxZoom属性用于设定地图允许的最大缩放级别数值。
• minZoom属性用于设定地图允许的最小缩放级别数值。
• zoom属性用于设定地图加载时的默认缩放级别。
• center属性用于设定地图初始显示的中心地理坐标，格式通常为[纬度, 经度]。
• attributionControl属性控制是否在地图右下角显示版权信息控件。
• zoomControl属性控制是否在地图上显示缩放滑块或按钮控件。
• crs属性用于指定地图使用的坐标系，Leaflet默认采用EPSG3857坐标系。
• layers属性用于在地图初始化时直接添加初始图层。
• closePopupOnClick属性控制用户点击地图其他区域时，当前打开的弹窗是否自动关闭。
• dragging属性控制用户是否可以通过鼠标拖拽来移动地图视图。

使用L.tileLayer方法可以添加瓦片图层，通常用于加载底图数据。

let tileLayer = L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/.../',{
    maxZoom: 17,
    minZoom: 4,
}).addTo(map);   

通过L.marker方法可以在指定经纬度位置创建地图标记点。

let marker = L.marker([纬度，经度], { icon: 图标 })

• 在创建标记时，可通过icon参数传入自定义图标对象以替换默认标记。
• title属性用于设定鼠标悬停在标记上时显示的文本提示。
• opacity属性用于设定标记图标的透明度，取值范围通常为0到1。

注意：若未显式定义icon参数，Leaflet将自动使用其内置的默认蓝色水滴图标。

Leaflet支持两种主要的图标类型：标准图片图标(icon)和自定义DOM元素图标(divIcon)。

icon类型允许开发者提供一张图片URL来替代默认的标记形状。

var myIcon = L.icon({
    iconUrl: 'my-icon.png',
    iconSize: [38, 95],
    iconAnchor: [22, 94],
    popupAnchor: [-3, -76],
    shadowUrl: 'my-icon-shadow.png',
    shadowSize: [68, 95],
    shadowAnchor: [22, 94]
});

配置icon图标时，可设置以下关键选项参数。

• iconUrl属性用于指定图标图片的网络地址（URL）。
• iconSize属性用于指定图标图片的尺寸，单位为像素，格式为[宽度, 高度]。
• className属性用于为图标容器添加自定义CSS类名，以便进行样式定制。
• popupAnchor属性用于定义弹窗打开位置相对于图标锚点的偏移坐标，默认为[0,0]。
• iconAnchor属性用于定义图标本身的锚点坐标，即标记指向地图的具体位置，默认为图标左上角[0,0]。

divIcon类型允许开发者将一个完整的HTML div元素作为标记图标显示在地图上。

let divIcon = L.divIcon({
   html: `<div style="width:30px;height:30px;background:red;border- 
         radius:30px;text-align:center;line-height:30px;color:#ffffff">
         北京</div>`,
   className: 'icon',   // 图标父节点的class属性
   popupAnchor: [8, 2], // 弹出框（popup）的坐标，相对于图标描点而言，将从该点打开
});

html属性用于定义放入div元素内部的自定义HTML代码内容。

divIcon对象继承并兼容标准icon的所有可选配置选项。

使用bindPopup方法可以为地图元素绑定点击后弹出的信息窗口。

marker.bindPopup("我是popup",options).openPopup();

配置弹窗时，可通过options对象调整弹窗的显示行为和样式。

• maxWidth属性用于设定弹出框内容的最大宽度限制。
• minWidth属性用于设定弹出框内容的最小宽度限制。
• maxHeight属性用于设定弹出框的最大高度，若内容超出此高度，容器将显示滚动条。
• autoPan属性控制打开弹窗时地图是否自动平移以确保护弹窗完全可见，设为false可禁用此行为。
• closeButton属性控制弹窗内部是否显示关闭按钮。
• offset属性用于设定弹窗位置相对于锚点的像素偏移补偿值。
• autoPanPadding属性用于设定地图自动平移后，弹窗边缘与地图视图边界之间的最小间距。
• zoomAnimation属性控制弹窗打开时是否使用缩放动画，若包含Flash等插件建议关闭。
• closeOnClick属性默认为true，若需禁止点击地图关闭弹窗，请将其设置为false。
• className属性用于为弹窗容器添加自定义CSS类名，用于样式覆盖。

绑定弹窗后，可使用以下方法控制其显示状态和内容。

• addTo方法用于将弹窗实例添加到地图对象中。
• openOn方法用于在地图上打开当前弹窗，同时自动关闭地图上已存在的其他弹窗，效果等同于map.openPopup(popup)。
• setLatLng方法用于动态设置弹窗打开所对应的地理坐标点。
• setContent方法用于动态更新弹窗内显示的HTML内容。

使用bindTooltip方法可以为地图元素绑定鼠标悬停时显示的工具提示框。

以下是工具提示功能的具体使用示例及配置说明。

marker.bindTooltip("my tooltip text"，options).openTooltip();

配置工具提示时，可通过options对象调整其显示方向和行为。

• direction属性用于设定提示框出现的方向，可选值包括left、right、bottom、top、center或auto。
• permanent属性若设为true，则提示框永久显示，否则仅在鼠标悬停时显示。
• sticky属性若设为true，提示框将跟随鼠标移动，而非固定在特征中心。
• opacity属性用于设定工具提示框的透明度。

窗格(pane)机制允许开发者将不同图层渲染到不同的DOM容器中，以控制层级显示顺序。

map.createPane('pane'); // 创建窗格
map.getPane('pane').style.zIndex = 999;  // 设置窗格的层级
var positronLabels = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{x}/{y}/{z}.png'),{
        attribution: '©OpenStreetMap, ©CartoDB',
        pane: 'labels'   // 绑定窗格
}).addTo(map);  

Leaflet地图对象提供了以下常用方法用于图层管理和视图控制。

addLayer方法用于将指定的图层对象添加到当前地图中。

map.addLayer(this.tileLayer);

eachLayer方法用于遍历地图上的所有图层，常用于批量处理或清理。

map.eachLayer(function (layer) {
    layer.remove();
})
// eachLayer()方法：遍历地图上所有图层

removeLayer方法用于从地图上移除指定的单个图层实例。

map.removeLayer(layer)

setView方法用于同时设置地图的中心点坐标和缩放级别。

map.setView([lat: 30.890944, lng: 120.606944],10);

getZoom方法用于获取地图当前的缩放级别数值。

map.getZoom();

getCenter方法用于获取地图当前视图的中心点坐标。

map.getCenter();

setMinZoom和setMaxZoom方法分别用于动态设置地图的最小或最大缩放限制。

map.setMinZoom(10);
map.setMaxZoom(16);

hasLayer方法用于判断指定图层是否已存在于当前地图中。

map.hasLayer(this.tileLayer);

本文介绍了Leaflet的基本使用流程，更多高级功能请参考官方文档或后续相关文章。