創(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í)打開(kāi)的彈框是否自動(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)而言，將在這里打開(kāi)彈框 （[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: `<div style="width:30px;height:30px;background:red;border- 
         radius:30px;text-align:center;line-height:30px;color:#ffffff">
         北京</div>`,
   className: 'icon',   // 圖標(biāo)父節(jié)點(diǎn)的class屬性
   popupAnchor: [8, 2], // 彈出框（popup）的坐標(biāo)，相對(duì)于圖標(biāo)描點(diǎn)而言，將從該點(diǎn)打開(kāi)
});

  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)容超過(guò)彈出窗口的給定高度則產(chǎn)生一個(gè)可以滾動(dòng)的容器。
• autoPan（自動(dòng)平移）：如果你不想地圖自動(dòng)平移來(lái)適應(yīng)打開(kāi)的彈出框，就設(shè)置其為false。
• closeButton（關(guān)閉按鈕）：設(shè)置彈出窗口中是否出現(xiàn)關(guān)閉按鈕。
• offset（補(bǔ)償值）：彈出窗口位置的補(bǔ)償值。在同一圖層中打開(kāi)彈出窗口時(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è)置為false
• className：設(shè)置一個(gè)class自定義彈出窗口的CSS屬性

方法 

• addTo：將彈出窗口添加到地圖上。
• openOn：將彈出窗口添加到地圖上并將之前的一個(gè)關(guān)閉。與map.oenPopup(popup)方法相同。
• setLatLng：設(shè)置彈出窗口打開(kāi)的地理上的點(diǎn)位。
• setContent：設(shè)置彈出窗口的HTML內(nèi)容。

工具提示(bindTooltip)

使用示例

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

options選項(xiàng)

• direction：打開(kāi)tooltip的方向，可以為left，right，bottom，top，center，auto
• permanent：是永久打開(kāi)tooltip還是只在鼠標(biāo)移動(dòng)時(shí)打開(kāi)
• 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);  

常用方法和事件

將給定的圖層添加到地圖中

map.addLayer(this.tileLayer);

遍歷所有圖層然后刪除

map.eachLayer(function (layer) {
    layer.remove();
})
// eachLayer()方法：遍歷地圖上所有圖層

刪除地圖上單個(gè)圖層

map.removeLayer(layer)

設(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);

到此這篇關(guān)于leaflet基本使用的文章就介紹到這了,更多相關(guān)leaflet使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論