柚子快報(bào)激活碼778899分享：前端 leaflet基本使用
柚子快報(bào)激活碼778899分享：前端 leaflet基本使用
目錄
創(chuàng)建地圖(map)
添加圖層(tileLayer)
創(chuàng)建標(biāo)記(marker)
圖標(biāo)(icon/divIcon)
彈框(bindPopup)
options選項(xiàng)
方法
工具提示(bindTooltip)
options選項(xiàng)
窗格(pane)
常用方法
創(chuàng)建地圖(map)
let map= L.map('map', {
minZoom: 4,
? maxZoom: 17,
? zoom: 14,
? center: [37.632111, 114.91680237],
? attributionControl: false,
});
options選項(xiàng)? maxZoom：地圖最大的縮放等級(jí)? minZoom：地圖最小的縮放等級(jí)? zoom：地圖默認(rèn)的縮放等級(jí)? center：地圖默認(rèn)的中心點(diǎn)位置[緯度，經(jīng)度]? attributionControl：是否將?attribution?版權(quán)控件添加到地圖中? zoomControl：是否將zoom縮放控件添加到地圖中? crs：地圖使用的坐標(biāo)系，默認(rèn)使用的是EPSG3857坐標(biāo)系? layers：添加到地圖的圖層??closePopupOnClick：用戶點(diǎn)擊圖層時(shí)打開的彈框是否自動(dòng)關(guān)閉? dragging：地圖是否可以進(jìn)行拖動(dòng)，滑動(dòng)
添加圖層(tileLayer)
let tileLayer = L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/.../',{
maxZoom: 17,
minZoom: 4,
}).addTo(map);
創(chuàng)建標(biāo)記(marker)
let marker = L.marker([緯度，經(jīng)度], { icon: 圖標(biāo) })
? icon:將創(chuàng)建的標(biāo)記改為一個(gè)圖標(biāo)? title:鼠標(biāo)移動(dòng)到標(biāo)記上時(shí)顯示的標(biāo)記? opacity:標(biāo)記的不透明度
注意： icon不定義就會(huì)使用leaflet自帶的圖標(biāo)
圖標(biāo)(icon/divIcon)
icon圖標(biāo)：提供一個(gè)圖片或圖像代替標(biāo)記
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選項(xiàng)?
? iconUrl:圖標(biāo)圖像的地址（URL）? iconSize:圖標(biāo)圖像的尺寸，單位為像素（number）? className：設(shè)置一個(gè)class自定義圖標(biāo)的CSS屬性? popupAnchor：彈出的窗口的坐標(biāo)，相對(duì)于圖標(biāo)的描點(diǎn)而言，將在這里打開彈框 （[0,0]）? iconAnchor：圖標(biāo)相對(duì)其左上角的坐標(biāo)，默認(rèn)情況下，圖標(biāo)的左上角是標(biāo)記的位置（[0,0]）
divIcon圖標(biāo)：提供一個(gè)div元素作為圖標(biāo)代替標(biāo)記
let divIcon = L.divIcon({
html: `
北京
className: 'icon', // 圖標(biāo)父節(jié)點(diǎn)的class屬性
popupAnchor: [8, 2], // 彈出框（popup）的坐標(biāo)，相對(duì)于圖標(biāo)描點(diǎn)而言，將從該點(diǎn)打開
});
? html:自定義HTML代碼，放入div元素內(nèi)
divIcon繼承icon的option選項(xiàng)
彈框(bindPopup)
marker.bindPopup("我是popup",options).openPopup();
options選項(xiàng)
maxWidth（最大寬度）：彈出框的最大寬度。minWidth（最小寬度）：彈出框的最小寬度。maxHeight（最大高度）：設(shè)置后，如果內(nèi)容超過彈出窗口的給定高度則產(chǎn)生一個(gè)可以滾動(dòng)的容器。autoPan（自動(dòng)平移）：如果你不想地圖自動(dòng)平移來適應(yīng)打開的彈出框，就設(shè)置其為false。closeButton（關(guān)閉按鈕）：設(shè)置彈出窗口中是否出現(xiàn)關(guān)閉按鈕。offset（補(bǔ)償值）：彈出窗口位置的補(bǔ)償值。在同一圖層中打開彈出窗口時(shí)對(duì)于控制錨點(diǎn)比較有用。autoPanPadding（自動(dòng)平移填補(bǔ)）：在地圖視圖自動(dòng)平移產(chǎn)生后彈出窗口和地圖視圖之間的邊緣。zoomAnimation：決定是否在所在級(jí)別上彈出窗口。如果你在彈出窗口中有flash內(nèi)容的最好將其設(shè)置為不可用。closeOnClick：默認(rèn)為true，如果不想用戶點(diǎn)擊地圖時(shí)彈框自動(dòng)關(guān)閉，就請(qǐng)?jiān)O(shè)置為falseclassName：設(shè)置一個(gè)class自定義彈出窗口的CSS屬性
方法
addTo：將彈出窗口添加到地圖上。openOn：將彈出窗口添加到地圖上并將之前的一個(gè)關(guān)閉。與map.oenPopup(popup)方法相同。setLatLng：設(shè)置彈出窗口打開的地理上的點(diǎn)位。setContent：設(shè)置彈出窗口的HTML內(nèi)容。
工具提示(bindTooltip)
使用示例
marker.bindTooltip("my tooltip text"，options).openTooltip();
options選項(xiàng)
direction：打開tooltip的方向，可以為left，right，bottom，top，center，autopermanent：是永久打開tooltip還是只在鼠標(biāo)移動(dòng)時(shí)打開sticky：如果為true，tooltip將跟隨鼠標(biāo)移動(dòng)，而不是固定在特征中心opacity：tooltip的透明度
窗格(pane)
map.createPane('pane'); // 創(chuàng)建窗格
map.getPane('pane').style.zIndex = 999; // 設(shè)置窗格的層級(jí)
var positronLabels = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{x}/{y}/{z}.png'),{
attribution: '?OpenStreetMap, ?CartoDB',
pane: 'labels' // 綁定窗格
}).addTo(map);
常用方法和事件
創(chuàng)建圖層
const markerGroup = L.layerGroup(markerArr); // markerArr為一個(gè)marker標(biāo)記組成的數(shù)組
添加圖層
map.addLayer(this.tileLayer);
?刪除圖層
map.removeLayer(layer)
遍歷所有圖層然后刪除
map.eachLayer(function (layer) {
layer.remove();
})
// eachLayer()方法：遍歷地圖上所有圖層
設(shè)置地圖的中心點(diǎn)和層級(jí)
map.setView([lat: 30.890944, lng: 120.606944],10);
獲取地圖當(dāng)前縮放級(jí)別
map.getZoom();
?獲取當(dāng)前地圖中心點(diǎn)
map.getCenter();
設(shè)置地圖的最小或最大縮放級(jí)別
map.setMinZoom(10);
map.setMaxZoom(16);
判斷地圖上是否已存在某個(gè)圖層
map.hasLayer(this.tileLayer);
柚子快報(bào)激活碼778899分享：前端 leaflet基本使用
參考閱讀
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Wowma國際驚喜購
