目錄
創(chuàng)建地圖(map)
添加圖層(tileLayer)
創(chuàng)建標記(marker)
圖標(icon/divIcon)
彈框(bindPopup)
options選項
方法
工具提示(bindTooltip)
options選項
窗格(pane)
常用方法
創(chuàng)建地圖(map)
let map= L.map('map', {
minZoom: 4,
? maxZoom: 17,
? zoom: 14,
? center: [37.632111, 114.91680237],
? attributionControl: false,
});- options選項
- ? maxZoom：地圖最大的縮放等級
- ? minZoom：地圖最小的縮放等級
- ? zoom：地圖默認的縮放等級
- ? center：地圖默認的中心點位置[緯度，經(jīng)度]
- ? attributionControl：是否將?attribution?版權(quán)控件添加到地圖中
- ? zoomControl：是否將zoom縮放控件添加到地圖中
- ? crs：地圖使用的坐標系，默認使用的是EPSG3857坐標系
- ? layers：添加到地圖的圖層
- ??closePopupOnClick：用戶點擊圖層時打開的彈框是否自動關(guān)閉
- ? dragging：地圖是否可以進行拖動，滑動
添加圖層(tileLayer)
let tileLayer = L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/.../',{
maxZoom: 17,
minZoom: 4,
}).addTo(map);
創(chuàng)建標記(marker)
let marker = L.marker([緯度，經(jīng)度], { icon: 圖標 })- ? icon:將創(chuàng)建的標記改為一個圖標
- ? 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', // 圖標父節(jié)點的class屬性
popupAnchor: [8, 2], // 彈出框（popup）的坐標，相對于圖標描點而言，將從該點打開
});- ? html:自定義HTML代碼，放入div元素內(nèi)
divIcon繼承icon的option選項
彈框(bindPopup)
marker.bindPopup("我是popup",options).openPopup();
options選項
- maxWidth（最大寬度）：彈出框的最大寬度。
- minWidth（最小寬度）：彈出框的最小寬度。
- maxHeight（最大高度）：設置后，如果內(nèi)容超過彈出窗口的給定高度則產(chǎn)生一個可以滾動的容器。
- autoPan（自動平移）：如果你不想地圖自動平移來適應打開的彈出框，就設置其為false。
- closeButton（關(guān)閉按鈕）：設置彈出窗口中是否出現(xiàn)關(guān)閉按鈕。
- offset（補償值）：彈出窗口位置的補償值。在同一圖層中打開彈出窗口時對于控制錨點比較有用。
- autoPanPadding（自動平移填補）：在地圖視圖自動平移產(chǎn)生后彈出窗口和地圖視圖之間的邊緣。
- zoomAnimation：決定是否在所在級別上彈出窗口。如果你在彈出窗口中有flash內(nèi)容的最好將其設置為不可用。
- closeOnClick：默認為true，如果不想用戶點擊地圖時彈框自動關(guān)閉，就請設置為false
- className：設置一個class自定義彈出窗口的CSS屬性
方法
- addTo：將彈出窗口添加到地圖上。
- openOn：將彈出窗口添加到地圖上并將之前的一個關(guān)閉。與map.oenPopup(popup)方法相同。
- setLatLng：設置彈出窗口打開的地理上的點位。
- setContent：設置彈出窗口的HTML內(nèi)容。
工具提示(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'); // 創(chuàng)建窗格
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();設置地圖的最小或最大縮放級別文章來源：http://www.zghlxwxcb.cn/news/detail-763488.html
map.setMinZoom(10);
map.setMaxZoom(16);判斷地圖上是否已存在某個圖層文章來源地址http://www.zghlxwxcb.cn/news/detail-763488.html
map.hasLayer(this.tileLayer);到了這里，關(guān)于leaflet基本使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
