欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

leaflet基本使用示例教程

 更新時間:2023年12月21日 10:24:34   作者:焦焦焦焦焦  
這篇文章主要介紹了leaflet基本使用示例教程,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

創(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:地圖默認的中心點位置[緯度,經度]
  •   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);   

創(chuàng)建標記(marker)

let marker = L.marker([緯度,經度], { 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元素內

divIcon繼承icon的option選項

彈框(bindPopup)

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

options選項

  • maxWidth(最大寬度):彈出框的最大寬度。
  • minWidth(最小寬度):彈出框的最小寬度。
  • maxHeight(最大高度):設置后,如果內容超過彈出窗口的給定高度則產生一個可以滾動的容器。
  • autoPan(自動平移):如果你不想地圖自動平移來適應打開的彈出框,就設置其為false。
  • closeButton(關閉按鈕):設置彈出窗口中是否出現(xiàn)關閉按鈕。
  • 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'); // 創(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();

設置地圖的最小或最大縮放級別

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

判斷地圖上是否已存在某個圖層

map.hasLayer(this.tileLayer);

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

相關文章

最新評論