leaflet基本使用
宓季同
目录
创建地图(map)
let map= L.map('map', {
minZoom: 4,
maxZoom: 17,
zoom: 14,
center: [37.632111, 114.91680237],
attributionControl: false,
});- options选项
- maxZoom：地图最大的缩放等级
- minZoom：地图最小的缩放等级
- zoom：地图默认的缩放等级
- center：地图默认的中心点位置[纬度，经度]
- attributionControl：是否将 attribution 版权控件添加到地图中
- zoomControl：是否将zoom缩放控件添加到地图中
- crs：地图使用的坐标系，默认使用的是EPSG3857坐标系
- layers：添加到地图的图层
- closePopupOnClick：用户点击图层时打开的弹框是否自动关闭
- dragging：地图是否可以进行拖动，滑动
添加图层(tileLayer)
let tileLayer = L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/.../',{
maxZoom: 17,
minZoom: 4,
}).addTo(map);
创建标记(marker)
let marker = L.marker([纬度，经度], { icon: 图标 })- icon:将创建的标记改为一个图标
- title:鼠标移动到标记上时显示的标记
- opacity:标记的不透明度
注意： icon不定义就会使用leaflet自带的图标
图标(icon/divIcon)
icon图标：提供一个图片或图像代替标记
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]
});
option选项
- iconUrl:图标图像的地址（URL）
- iconSize:图标图像的尺寸，单位为像素（number）
- className：设置一个class自定义图标的CSS属性
- popupAnchor：弹出的窗口的坐标，相对于图标的描点而言，将在这里打开弹框 （[0,0]）
- iconAnchor：图标相对其左上角的坐标，默认情况下，图标的左上角是标记的位置（[0,0]）
divIcon图标：提供一个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:自定义HTML代码，放入div元素内
divIcon继承icon的option选项
弹框(bindPopup)
marker.bindPopup("我是popup",options).openPopup();
options选项
- maxWidth（最大宽度）：弹出框的最大宽度。
- minWidth（最小宽度）：弹出框的最小宽度。
- maxHeight（最大高度）：设置后，如果内容超过弹出窗口的给定高度则产生一个可以滚动的容器。
- autoPan（自动平移）：如果你不想地图自动平移来适应打开的弹出框，就设置其为false。
- closeButton（关闭按钮）：设置弹出窗口中是否出现关闭按钮。
- offset（补偿值）：弹出窗口位置的补偿值。在同一图层中打开弹出窗口时对于控制锚点比较有用。
- autoPanPadding（自动平移填补）：在地图视图自动平移产生后弹出窗口和地图视图之间的边缘。
- zoomAnimation：决定是否在所在级别上弹出窗口。如果你在弹出窗口中有flash内容的最好将其设置为不可用。
- closeOnClick：默认为true，如果不想用户点击地图时弹框自动关闭，就请设置为false
- className：设置一个class自定义弹出窗口的CSS属性
方法
- addTo：将弹出窗口添加到地图上。
- openOn：将弹出窗口添加到地图上并将之前的一个关闭。与map.oenPopup(popup)方法相同。
- setLatLng：设置弹出窗口打开的地理上的点位。
- setContent：设置弹出窗口的HTML内容。
工具提示(bindTooltip)
使用示例
marker.bindTooltip("my tooltip text"，options).openTooltip();options选项
- direction：打开tooltip的方向，可以为left，right，bottom，top，center，auto
- permanent：是永久打开tooltip还是只在鼠标移动时打开
- sticky：如果为true，tooltip将跟随鼠标移动，而不是固定在特征中心
- opacity：tooltip的透明度
窗格(pane)
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); 常用方法和事件
将给定的图层添加到地图中
map.addLayer(this.tileLayer);遍历所有图层然后删除
map.eachLayer(function (layer) {
layer.remove();
})
// eachLayer()方法：遍历地图上所有图层删除地图上单个图层
map.removeLayer(layer)设置地图的中心点和层级
map.setView([lat: 30.890944, lng: 120.606944],10);获取地图当前缩放级别
map.getZoom();获取当前地图中心点
map.getCenter();设置地图的最小或最大缩放级别
map.setMinZoom(10);
map.setMaxZoom(16);判断地图上是否已存在某个图层
map.hasLayer(this.tileLayer);
类似资料：