leaflet經常使用功能

簡介

純JavaScript,在地圖上進行操做(座標點,路徑,曲線等)的一個庫,只提供操做地圖API,實際加載某個地圖,由開發者決定

建立地圖對象

1) 頁面建立div,設置div屬性撐滿整個屏幕,設置div中id屬性
2) 使用leafletAPI初始化地圖對象

// mapDiv爲id名字,setView參數1: 地圖中心座標位置  參數2: 地圖加載級別(數字越大,地圖加載越近) 
const map = L.map('mapDiv').setView([33.6528734492,104.7626939500], 5)

3) 爲地圖加載瓦片圖層

經常使用API

tileLayer

做用: 在頁面加載瓦片地圖圖片

const corner1 = L.latLng(50.4838600000, 77.1125230000) // 地圖左上角
  const corner2 = L.latLng(22.5557360000, 138.0866980000) // 地圖右上角
  const bounds = L.latLngBounds(corner1, corner2) // 根據2個經緯度來肯定一個矩形 
  const attr = ' Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>' 
  L.tileLayer(url, {
    maxZoom: 10, // 放大最大到10
    minZoom: 1, // 縮小最小到1
    bounds: bounds, // 將地圖設置成一個矩形
    attribution: attr // 地圖右下角放置一些受權信息
  }).addTo(map)
  map.setMaxBounds(bounds) // 設置經緯度範圍,鼠標拖動的時候,不在設置範圍內,會進行回彈

marker

做用: 根據給定經緯度,在地圖上加載一個標記
1) 加載默認標記

// title: 鼠標移動到標記上,會顯示該信息 opacity: 設置標記透明度
// zIndexOffset: 設置標記重疊關係,場景: 在標記上插入圖片,可設置該屬性,讓標記在圖片的上層
L.marker([39.9094390677,116.3699341216], {title: 'this is title', opacity: '0.8', zIndexOffset: 9999}).addTo(map)

2) 加載自定義icon(通常是圖片)

// iconUrl: 圖片url地址 iconSize: 圖片尺寸
 const myIcon = L.icon({
    iconUrl: 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png',
    iconSize: [80, 30]
  });
  L.marker([40, 108], {icon: myIcon, alt: 'this is google'}).addTo(map);

popup

做用: 在地圖上顯示文字

/*
* closeButton: 是否有關閉按鈕
* autoClose: 當使用openOn的時候,用該屬性來肯定是否關閉上一個
* closeOnClick: 鼠標點擊,是否會關閉該popup
* className: 自定義class的名字,若是須要調整popup的位置,可經過設置class樣式來完成
* openOn(): 將彈出窗口添加到地圖並關閉上一個
* addTo(): 將該popup添加到地圖上
* */
L.popup({closeButton: true, autoClose: true, closeOnClick: false, className: 'my-popup'})
  .setLatLng([38, 98])
  .setContent('<p>Hello world!<br />This is a nice popup.</p>')
  .addTo(map);

L.popup({closeButton: true, autoClose: true, closeOnClick: false})
  .setLatLng([37, 98])
  .setContent('<p>Hello world!')
  .addTo(map);

polyline

做用: 將經緯度經過鏈接起來,在地圖上造成一根線,若是要作從出發到結束動畫效果,可以使用第三方庫Leaflet.Polyline.SnakeAnim
參考地址: https://github.com/zettvs/Lea...

// css代碼
/*stroke-dasharray: 爲svg設置虛線,數字越大,虛線段越長,
  設置2個參數,參數1: 虛線的長度  參數2: 虛線和虛線之間的間隔, 若是隻設置一個參數,說明兩個值同樣大小
  stroke: 設置svg的顏色
*/
.testSvg {
    animation: animate 0.5s linear infinite;
    stroke-dasharray: 10;
    stroke: blue;
}
// js代碼
const polyline2 = L.polyline(latlngs, {weight: 6, className: 'testSvg', opacity: 0.5})
    .addTo(leafletMap);
leafletMap.fitBounds(polyline2.getBounds());

  const polyline1 = L.polyline(latlngs, {color: '#fff', weight: 6, opacity: 0.5})
.addTo(leafletMap);
leafletMap.fitBounds(polyline1.getBounds());

circle

做用: 給定經緯度位置上造成一個圓圈

/*
* radius: 圓直徑
* weight: 圓最外層圈的厚度大小
* color: 圓最外層圈的顏色
* fillColor: 圓裏面的顏色
* */
L.circle([38, 98], {radius: 111200, weight: 1, color: 'red', fillColor: 'blue'}).addTo(map)

geojson

做用: 相似json格式,用來表示地理數據,若是須要在地圖上對某個區域進行顏色或者背景的覆蓋,請使用該技術
參考地址: http://geojson.io/#map=2/20.0...
https://zh.wikipedia.org/wiki...

使用方式:

// color: 覆蓋顏色 weight: 覆蓋深淺度 fillColor: 外圈顏色 fillOpacity:外圈透明度
L.geoJSON(geoJson數據, {
      style: function () {
        return {
          color: '#263238',
          weight: 0.8,
          fillColor: '#002132',
          fillOpacity: 0.5
        };
      }
    })