leaflet傳單入門


備註

宣傳單標誌

Leaflet是一個用於創建交互式地圖的開源JavaScript庫。

版本

發布日期
1.0.3 2017年1月23日
1.0.2 2016年11月21日
1.0.1 2016年9月30日
1.0 2016年9月27日
0.7 2013-11-18
0.6 2013年6月26日
0.5 2013年1月17日
0.4 2012-07-30
0.3 2012-02-13
0.2 2011-06-17
0.1 2011-05-16

使用HTML和JavaScript實現Leaflet.js

要使用Leaflet,請將其樣式表和JavaScript文件加載到您的頁面:

<link rel="stylesheet" href="/css/leaflet.css" />
<script src="/js/leaflet.js"></script>
 

這些資源可以從各種位置下載,如Leaflet的主頁Leaflet Github存儲庫 ,或者您可以直接使用CDN,

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" ></script>
 

你的地圖需要一個容器。對於開發人員來說,通常使用id為“map”的div 。確保給地圖div 一個高度,否則地圖可能不會顯示。

<div id="map" style="height: 200px;"></div>
 

通過使用Leaflet.map(mapContainerId) 方法創建地圖對象來初始化地圖。在下面的示例中,緯度和經度被設置為默認值,默認縮放級別為13。

var map = L.map('map').setView([42.35, -71.08], 13);
 

這將創建我們的空地圖,我們現在應該提供一個切片圖層作為我們的基本地圖。瓦片層是一種服務,它以瓦片形式提供地圖圖像,小圖像以特定順序由x,y和z參數訪問(見下文)。

切片圖層網址可能如下所示,其中{s}{z}{x}{y} 是Leaflet在操作期間自動更改的佔位符:

"http://{s}.domain.com/foo/{z}/{x}/{y}.png"
 

我們現在可以添加我們的tilelayer,以及歸因信息和最大可能縮放級別,並將其添加到地圖中:

L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
  attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
  maxZoom: 17,
  minZoom: 5
}).addTo(map);
 

注意:在包含leaflet.js 和map container div 元素之後,需要進行Map初始化和加載tile圖層。

宣傳單快速入門

<!DOCTYPE html>
<html>

  <head>
    <title>My Leaflet Map</title>
    <link rel="stylesheet" href="//unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
    <style type="text/css">
      #map { 
        height: 500px; 
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script src="//unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>    
    <script>
      var map = L.map('map').setView([51.505, -0.09], 13);

      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);
      
      L.marker([51.5, -0.09]).addTo(map)
          .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
          .openPopup();
    </script>
  </body>

</html>