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:地圖默認(rèn)的縮放等級
- 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)擊圖層時打開的彈框是否自動關(guān)閉
- dragging:地圖是否可以進(jìn)行拖動,滑動
添加圖層(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)記改為一個圖標(biāo)
- title:鼠標(biāo)移動到標(biāo)記上時顯示的標(biāo)記
- opacity:標(biāo)記的不透明度
注意: icon不定義就會使用leaflet自帶的圖標(biāo)
圖標(biāo)(icon/divIcon)
icon圖標(biāo):提供一個圖片或圖像代替標(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選項
- iconUrl:圖標(biāo)圖像的地址(URL)
- iconSize:圖標(biāo)圖像的尺寸,單位為像素(number)
- className:設(shè)置一個class自定義圖標(biāo)的CSS屬性
- popupAnchor:彈出的窗口的坐標(biāo),相對于圖標(biāo)的描點(diǎn)而言,將在這里打開彈框 ([0,0])
- iconAnchor:圖標(biāo)相對其左上角的坐標(biāo),默認(rèn)情況下,圖標(biāo)的左上角是標(biāo)記的位置([0,0])
divIcon圖標(biāo):提供一個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),相對于圖標(biāo)描點(diǎn)而言,將從該點(diǎn)打開 });
html:自定義HTML代碼,放入div元素內(nèi)
divIcon繼承icon的option選項
彈框(bindPopup)
marker.bindPopup("我是popup",options).openPopup();
options選項
- maxWidth(最大寬度):彈出框的最大寬度。
- minWidth(最小寬度):彈出框的最小寬度。
- maxHeight(最大高度):設(shè)置后,如果內(nèi)容超過彈出窗口的給定高度則產(chǎn)生一個可以滾動的容器。
- autoPan(自動平移):如果你不想地圖自動平移來適應(yīng)打開的彈出框,就設(shè)置其為false。
- closeButton(關(guān)閉按鈕):設(shè)置彈出窗口中是否出現(xiàn)關(guān)閉按鈕。
- offset(補(bǔ)償值):彈出窗口位置的補(bǔ)償值。在同一圖層中打開彈出窗口時對于控制錨點(diǎn)比較有用。
- autoPanPadding(自動平移填補(bǔ)):在地圖視圖自動平移產(chǎn)生后彈出窗口和地圖視圖之間的邊緣。
- zoomAnimation:決定是否在所在級別上彈出窗口。如果你在彈出窗口中有flash內(nèi)容的最好將其設(shè)置為不可用。
- closeOnClick:默認(rèn)為true,如果不想用戶點(diǎn)擊地圖時彈框自動關(guān)閉,就請設(shè)置為false
- className:設(shè)置一個class自定義彈出窗口的CSS屬性
方法
- addTo:將彈出窗口添加到地圖上。
- openOn:將彈出窗口添加到地圖上并將之前的一個關(guān)閉。與map.oenPopup(popup)方法相同。
- setLatLng:設(shè)置彈出窗口打開的地理上的點(diǎn)位。
- setContent:設(shè)置彈出窗口的HTML內(nèi)容。
工具提示(bindTooltip)
使用示例
marker.bindTooltip("my tooltip text",options).openTooltip();
options選項
- direction:打開tooltip的方向,可以為left,right,bottom,top,center,auto
- permanent:是永久打開tooltip還是只在鼠標(biāo)移動時打開
- sticky:如果為true,tooltip將跟隨鼠標(biāo)移動,而不是固定在特征中心
- opacity:tooltip的透明度
窗格(pane)
map.createPane('pane'); // 創(chuàng)建窗格 map.getPane('pane').style.zIndex = 999; // 設(shè)置窗格的層級 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)
設(shè)置地圖的中心點(diǎn)和層級
map.setView([lat: 30.890944, lng: 120.606944],10);
獲取地圖當(dāng)前縮放級別
map.getZoom();
獲取當(dāng)前地圖中心點(diǎn)
map.getCenter();
設(shè)置地圖的最小或最大縮放級別
map.setMinZoom(10); map.setMaxZoom(16);
判斷地圖上是否已存在某個圖層
map.hasLayer(this.tileLayer);
到此這篇關(guān)于leaflet基本使用的文章就介紹到這了,更多相關(guān)leaflet使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript判斷輸入是否為數(shù)字類型的方法總結(jié)
這篇文章主要介紹了JavaScript判斷輸入是否為數(shù)字類型的方法總結(jié)的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09JS如何將數(shù)字類型轉(zhuǎn)化為沒3個一個逗號的金錢格式
本文為大家介紹下如何將數(shù)字類型轉(zhuǎn)化為沒3個一個逗號的金錢格式,下面是具體的實(shí)現(xiàn)2014-01-01js點(diǎn)擊出現(xiàn)懸浮窗效果不使用JQuery插件
JQuery有很多這樣的插件,但本文的這個是跟著自己的想法寫的,也不知道他人是如何實(shí)現(xiàn)的,感興趣的朋友可以了解下2014-01-01JS將json字符串轉(zhuǎn)換為JsonObject的多種實(shí)現(xiàn)方法
在Web前端開發(fā)中,JSON(JavaScript Object Notation)作為數(shù)據(jù)交換格式被廣泛使用,它輕量級且易于人類閱讀和編寫,同時也易于機(jī)器解析和生成,當(dāng)從服務(wù)器接收數(shù)據(jù)時,我們需要將其轉(zhuǎn)換為JSON對象以便于操作,本文將深入探討如何利用JavaScript實(shí)現(xiàn)這一轉(zhuǎn)換過程2025-02-02