前言
??為什么第一個 GIS 前端開發(fā)框架選擇 Leaflet。
??Leaflet 是一款輕量級，用于移動友好交互式地圖的JavaScript庫。輕量級的意思就是代碼總大小比較小。Leaflet利用HTML5和CSS3在現(xiàn)代瀏覽器上的優(yōu)勢，同時也可以在舊瀏覽器上訪問。它可以通過大量插件進行擴展，具有漂亮的、易于使用的、文檔豐富的API，使用上也比較簡單。
1. 開發(fā)前的準備
1.1 leaflet 的整體架構
??Leaflet 采用面向對象的程序設計方法，將抽象事物具體化為類，提供核心類Map作為地圖容器，基于 Map 與Layer 擴展的各個功能類實現(xiàn)地圖數(shù)據(jù)、覆蓋物的可視化，配合事件機制實現(xiàn)地圖交互等功能。Leaflet 的體系架構如圖所示。
??Leaflet 把整個地圖看成一個容器，在地圖容器（Map）中裝載地圖數(shù)據(jù)圖層、地圖覆蓋物圖層等，通過圖層疊加方式渲染顯示地圖數(shù)據(jù)；除此之外容器中還有一些特別的層和控件（如地圖控件等)，以及綁定在 Map 和 Layer 等可視化功能類的一系列事件，實現(xiàn)地圖管理與交互功能。底層為Leaflet支持的數(shù)據(jù)源，包括各類格式的瓦片數(shù)據(jù)、矢量數(shù)據(jù)及覆蓋物數(shù)據(jù)，由 Layer 擴展的相關圖層負責渲染顯示。
2.2 Leaflet 的 API
??以下是 Leaflet 的 官方文檔，這里只涉及到其核心的 API，并沒有相關插件的使用方式。
??英文的閱讀起來并不是十分的友好，但是我在前文中也提到了，Leaflet 的生態(tài)社區(qū)做得很好，尤其是最近幾年已經(jīng)推出了官方中文文檔，在這里可以更好的學習 Leaflet的相關知識。
??由于我個人能力有限，并可能完全介紹到所有的 API 的功能，我自己也是屬于邊學邊進步的過程中，本章中難免有一些錯誤之處，希望大家如果發(fā)現(xiàn)請及時指正。
2. 配置開發(fā)環(huán)境
2.1 引入方式
??Leaflet 提供了四種常用的引入方式，分別是使用 Leaflet 的托管版本、使用下載版的 Leaflet 、使用 JavaScript 包管理器和從源代碼中構建 Leaflet。
??使用 Leaflet 的托管版本
??最新的 Leaflet 穩(wěn)定版已在多個 CDN 上提供。使用時，直接將其放在 HTML 代碼的開頭即可：
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
??使用下載版的 Leaflet
??進入之前提到的官網(wǎng)，找到可以自行下載到本地文件的 Leaflet ，當然這里推薦下載第一版本。目前我在編寫時最新穩(wěn)定的版本為1.9.3。
??在從上述鏈接下載到本地的文件中，將看到以下文件：
-
leaflet.js- 這是壓縮后的 Leaflet JavaScript 代碼。 -
leaflet-src.js- 這是可讀的，最小的 Leaflet JavaScript，有時對調試很有幫助。(該文件完整的哈希值為sha256-V8Wsw6bWrfTsX9YUzIjKtnIoiUhBdulszoxf177/XjU=) -
leaflet.css- 這是 Leaflet 的樣式文件。 -
images- 這是一個文件夾，其中包含 leaflet.css 引用的圖像。 它必須與 leaflet.css 位于同一目錄中。
??將下載的文件解壓到您網(wǎng)站的目錄中，并將其添加到 HTML 代碼的開頭:
<link rel="stylesheet" href="/path/to/leaflet.css" />
<script src="/path/to/leaflet.js"></script>
??使用JavaScript包管理器
??如果使用 npm 軟件包管理器，則可以通過運行以下命令安裝 Leaflet：
npm install leaflet
??作為一名新手這里推薦使用第一種和第二種方式進行引用，至于最后一種方式則是按照下圖所示的方法進行引用。
2.2 目錄結構
??目前并有涉及到后端的一些數(shù)據(jù)的交互，所以目錄的結構就按照前端開發(fā)的習慣進行構建。
-
libs：用來存放一些程序所使用的框架，Leaflet 就存放于此目錄下。
-
public：存放靜態(tài)的一些資源諸如圖片、圖標、視頻等。
-
js：通過編寫符合 Leaflet 的規(guī)則所形成的js文件。
??大致的目錄結構如下，當然你也可以按照你個人的喜好進行構建，只要符合你的習慣即可。
2.3 編輯器的選擇
??前端的編輯器有許多種，選擇哪一種完全是出于個人的使用習慣，好用的編輯器有很多如 VS Code、WebStrom等等，這里我選擇的是使用VS Code作為編輯器編寫前端的代碼。個人感覺用起來很方便主要是提供了豐富的插件。
2.4 Leaflet 入門 demo
??經(jīng)過以上的鋪墊終于可以開始制作第一個入門級別的demo，本次demo的目標很簡單就是要實現(xiàn)將地圖顯示在網(wǎng)頁中。這里選擇使用國內(nèi)一個較新的地圖——星圖地球，這個地圖背靠中國科學院空天信息創(chuàng)新研究院，所以地圖的質量還是很可以的。
??第一步：在目錄結構的主文件下新建一個 HTML 文件命名為 index.html 通過2.1中的第二種方式將 Leaflet引入到網(wǎng)頁中。
<!-- 引入 Leaflet 樣式 -->
<link rel="stylesheet" href="libs/leaflet/leaflet.css" />
<!-- 引入 Leaflet 腳本 -->
<script src="libs/leaflet//leaflet.js"></script>
??第二步：在 body 中創(chuàng)建一個 div 作為地圖的容器。需要注意的是，div 元素的 id 可以自定義；確保 div 元素有一個高度，即必須為地圖容器設置高度值，否則 Leaflet 不會對地圖容器高度進行處理。
<div id="map" style="height: 600px;"></div>
??第三步：在script標簽添加語句，加載設置地圖。編寫 JavaScript代碼，創(chuàng)建并初始化地圖對象，加載星圖地球的影像地圖?；谏弦徊襟E新建的 div，創(chuàng)建一個地圖容器對象與之綁定，并設置地圖中心點與縮放級別，代碼如下：
const map = L.map('map').setView([32.40, 119.40], 18);//我所在城市的經(jīng)緯度
??需要注意的是，默認情況下（因為我們在創(chuàng)建地圖實例時沒有傳遞任何選項），地圖上的所有鼠標和觸摸交互都處于啟用狀態(tài)，并且具有縮放和屬性控制；setView()方法用于設置地圖中心點與縮放級別，地圖中心點參數(shù)為[y，x]。
??第四步：添加一個L.TileLayer圖層對象來創(chuàng)建瓦片圖層，通過URL參數(shù)設置服務請求地址及可選參數(shù)等。最后，通過addTo()方法將瓦片圖層添加到地圖容器中，代碼如下：
//加載星圖地球影像圖層
const imgLayer = L.tileLayer('https://tiles1.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=29fbc555c8331c640b6c804dce954c4ad2bbf97a96a1c72b510344f4d87ae7e2', {
maxZoom: 18
}).addTo(map);
//加載星圖地球影像注記圖層
const annoLayer = L.tileLayer('https://tiles1.geovisearth.com/base/v1/cia/{z}/{x}/{y}?format=png&tmsIds=w&token=29fbc555c8331c640b6c804dce954c4ad2bbf97a96a1c72b510344f4d87ae7e2',{
maxZoom: 18
}).addTo(map);
??需要注意的是，L.TileLayer 是一個通用的瓦片圖層，可以加載瓦片地圖，還可以通過擴展加載矢量地圖。必選參數(shù)項 URL 為關鍵參數(shù)，用于設置地圖數(shù)據(jù)服務地址。我所用的星圖地球就是需要注冊然后申請KEY才可以正常使用。（請求示例https://tiles1.geovisearth.com/base/v1/cia/{z}/{x}/{y}?format=png&tmsIds=w&token=用戶的token）
文章來源：http://www.zghlxwxcb.cn/news/detail-822764.html
??這樣就可以快速地構建出一個網(wǎng)頁地圖了，至于我的代碼中為何將不采用 var 關鍵字而使用 const 關鍵字申明變量，這是因為在ES6之后有了更好的 let 去替代，而我這里的變量不涉及到后續(xù)的修改故申明為常量，是我個人使用習慣的問題，將變量都申明為常量后續(xù)如果需要修改時再將其修改為用 let 申明的變量，大可以使用 var 或者 let 去申明（最好用 let)。關于變量的內(nèi)容我也會在 JavaScript 學習中做出相應的解釋。最后我都會將寫過的demo上傳到我的Gitee中。文章來源地址http://www.zghlxwxcb.cn/news/detail-822764.html
到了這里，關于一.Leaflet入門的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
