Leaflet 筆記（一）入門介紹

今天要介紹的是Leaflet——an open-source javaScript library for mobile-friendly interactive maps，一個用於兼容移動端交互地圖的開源JS庫。

Leaflet 是一個很容易上手的語言庫，即使是初學者的JavaScript開發人員也很容易，它的官網 http://leafletjs.com/ 做得很棒，內容詳實，初學者可以在 Tutorials中查看基礎示例，快速上手；Docs中有詳實的API，使用起來很方便。

Leaflet的官網截圖，界面十分美觀：

1.介紹Leaflet中兩個重要的基礎類型：LatLng和Point

Leaflet中有兩種表示坐標點的數據結構，一種是最常用的LatLng，另一種是Point。

LatLng是是描述經緯度的坐標類，代表具有一定緯度和經度的地理點。

LatLng有三個屬性: lat 緯度（以度為單位）,lng 經度（以度為單位）,和 alt 海拔高度（米）（可選）

它的生成函數如下使用，第一個參數是維度，第二個是經度：

 

var latlng = L.latLng(50.5, 30.5);

Point是描述在屏幕上的位置的點，以像素為單位，有兩個屬性x和y

它的生成函數如下使用：

 

var point = L.point(200, 300);

 

兩者之間的轉換函數（注意大小寫）是

latLngToPoint(<LatLng> latlng,<Number> zoom)   和     pointToLatLng(<Point> point,<Number> zoom)

這兩個函數會根據當前地圖的縮放程度（zoom）轉換地理點與像素點，返回值分別是Point和latLng。

2.介紹Polygon的使用方式：

Polygon是繼承自Polyline的一個類，它的生成函數是：L.polygon(<LatLng[]> latlngs, <Polyline options> options?),

使用方法一：它的參數可以是一個latLng類型的數組，polygon的生成函數就是將這些點依次連接起來，注意這里最后一個點和第一個點是不相同的。

代碼示例：

// create a red polygon from an array of LatLng points
var latlngs = [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]];
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);

 使用方法二：它的參數可以是一系列latlng數組，第一個數組表示外部形狀，其他數組表示外部形狀的孔，像甜甜圈一樣：

var latlngs = [
  [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]], // outer ring
  [[37.29, -108.58],[40.71, -108.58],[40.71, -102.50],[37.29, -102.50]] // hole
];

使用方法二：它的參數還可以是一個多維數組來表示MultiPolygon形狀，這個功能在畫許多個多邊形時非常有效，比如說畫泰森多邊形時：

var latlngs = [
  [ // first polygon
    [[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]], // outer ring
    [[37.29, -108.58],[40.71, -108.58],[40.71, -102.50],[37.29, -102.50]] // hole
  ],
  [ // second polygon
    [[41, -111.03],[45, -111.04],[45, -104.05],[41, -104.05]]
  ]
];