iT邦幫忙

2018 iT 邦幫忙鐵人賽
2
Modern Web

30天學習30套前端技術(2018年)系列 第 36

[十分鐘學習] Leaflet - 全民地圖改造王

  • 分享至 

  • xImage
  •  

example1

Leaflet是一套對行動裝置友善的互動地圖並且開源的JavaScript函式庫,總大小只有38KB,卻有著大多數開發人員想要需求。簡單、專業、實用並且跨平台可以有效率的在桌上型和行動裝置上,並且有大量的插件可以擴充,有著華麗卻簡單使用的API,跟易學且閱讀性高的原始碼。

GitHub Star: 20,000
Javascripting Overall: 97%
瀏覽器: ChromeFirefoxIE7+
RWD: 不支援
License: BSD 2-clause "Simplified" License


《安裝》

  • CDN

      <!-- Leaflet v1.3.1 -->
      <link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet" />
      <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
    
  • npm

      $ npm install leaflet
    

《範例》

  • 建立地圖,並繪製圓形區塊跟多邊形區塊

      <script>
      	var mymap = L.map( "mapid" ).setView( [ 51.505, -0.09 ], 13 ); // 建立地圖設定視角
    
      	// 讀取地圖圖層[註1]
      	L.tileLayer( "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw", {
      		maxZoom: 18, // 最大縮放比例
      		attribution: "Map data © <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors, " +
      		"<a href='http://creativecommons.org/licenses/by-sa/2.0/''>CC-BY-SA</a>, " +
      		"Imagery © <a href='http://mapbox.com'>Mapbox</a>", // 文字區塊
      		id: "mapbox.comic" // 地圖風格ID
      	}).addTo( mymap );
    
      	// 建立圓形區塊[註2]
      	var circle = L.circle( [ 51.508, -0.11 ], {
      		color: "red", // 顏色
      		fillColor: "#f03", // 填滿區塊的顏色
      		fillOpacity: 0.5, // 填滿區塊的透明度
      		radius: 500 // 尺寸
      	}).addTo( mymap );
    
      	// 建立多邊形區塊
      	var polygon = L.polygon( [
      		[ 51.509, -0.08 ], 
      		[ 51.503, -0.06 ],
      		[ 51.51, -0.047 ]
      	] ).addTo( mymap );
      </script>
    

    註解

    [註1]

    參數 描述

    maxZoom|最大縮放比例
    attribution|文字區塊
    id|地圖風格ID,選項請參考Mapbox API Documentation

    [註2]

    參數 描述

    color|顏色
    fillColor|填滿區塊的顏色
    fillOpacity|填滿區塊的透明度
    radius|尺寸

    函式列表

    函式 描述

    setView( 【中心點】, 【縮放比例】)|建立地圖設定視角
    tileLayer( 【地圖API】, 【設定】)|讀取地圖圖層
    circle( 【中心點】, 【設定】 )|建立圓形區塊
    polygon( 【座標】, 【設定】 )|建立多邊形區塊


《延伸》

  1. Leaflet - a JavaScript library for interactive maps
  2. Leaflet/Leaflet: JavaScript library for mobile-friendly interactive maps

上一篇
[十分鐘學習] Videos.js - HTML5影片播放器
下一篇
[十分鐘學習] Sortable - HTML物件乾坤大挪移
系列文
30天學習30套前端技術(2018年)61
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言