實戰(zhàn)：基于不同地圖庫的地圖服務(wù)加載展示demo

本章將介紹使用不同的地圖JS庫去實現(xiàn)地圖服務(wù)加載，demo預(yù)覽效果會默認(rèn)使用上一篇文章中介紹的node.js環(huán)境，學(xué)習(xí)的同學(xué)自己學(xué)以致用，下邊不會重復(fù)的介紹demo部署預(yù)覽效果的內(nèi)容。

ArcGIS API for JavaScript Demo

本Demo基于ArcGIS API for JavaScript 4.10 版本。

創(chuàng)建一個文件夾arcgisdemo，然后新建一個index.html文件，引入arcgis js api。(可以下載本地api包引用，也可以引用在線的CDN js文件)

然后導(dǎo)入esri/Map、esri/views/MapView 模塊，創(chuàng)建地圖

全部的index.html代碼

改變加載的地圖服務(wù)類型。更換basemap為hybrid 就為下圖效果

OpenLayers Demo

本demo基于 openlayers 4.6.5。

openlayers最新版已經(jīng)支持前端主流的模塊化，可以使用ES6 Module的方式進(jìn)行模塊導(dǎo)入使用。如導(dǎo)入Map模塊的話：import Map from 'ol/Map';，如官方給的demo例子：

本專欄主要針對基礎(chǔ)薄弱的同學(xué)，所以現(xiàn)在介紹的是偏原生的方式實現(xiàn)的demo。

創(chuàng)建index.html文件，引入openlayers腳本文件和樣式文件（可以在線CDN或者本地源碼文件引入，demo演示為了方便，使用在線CDN）：

然后使用 ol.Map 創(chuàng)建地圖，其中接收三個主要參數(shù):target、layers、view，target是html DOM節(jié)點ID，layers是要加載的圖層，數(shù)組，支持多圖層。view定義地圖視圖的中心點和縮放大小等。

所有的index.html代碼為：

openlayers demo

更多demo實現(xiàn)可以看官方的demo列表，都有源碼可以學(xué)習(xí)openlayers examples

Leaflet.js Demo

本demo基于Leaflet 1.3.4 版本。1.3.4 api文檔

新建leafletdemo/index.html文件，引入api文件

新建div，然后創(chuàng)建map對象

使用 tileLayer 來創(chuàng)建切片圖層

在通過 Polyline 來創(chuàng)建矢量圖層（折線）

整個demo代碼為：

本章小結(jié)

本章主要介紹幾個常用地圖JS庫的簡單地圖展示Demo實現(xiàn)，目的是對比了解不同JS庫實現(xiàn)方式的異同，初學(xué)者可以認(rèn)識到不同的API實現(xiàn)方式，了解各自的特點，只有多寫demo，才能熟悉對于API，學(xué)習(xí)的時候，可以從簡單的Demo迭代功能點的方式去學(xué)習(xí)，比如：地圖展示、地圖縮放控制、鷹眼區(qū)域、測量工具（距離測量，面積測量）、地圖坐標(biāo)定位、地圖坐標(biāo)獲取、 Marker氣泡展示、矢量地圖要素展示和查詢等等。這樣一系列功能迭代起來，就是一個復(fù)雜的Demo了，就會了解熟悉更多的API?？傊?，學(xué)一個新東西，都要多寫代碼多動手、然后思考和總結(jié)。

源碼地址：gis616（備注源碼）

（持續(xù)更新中......）