本文銜接上一篇文章：不睡覺的怪叔叔：OpenLayers教程二：實現(xiàn)簡單的地圖顯示?zhuanlan.zhihu.com

經(jīng)過上一篇文章對OpenLayers的簡單了解以后，現(xiàn)在讓我們來實現(xiàn)一個簡單的地圖顯示Demo。

一、下載OpenLayers

然后點擊Get the Code：

進(jìn)入頁面下載包含源碼包、示例和API文檔的壓縮文件(我現(xiàn)在下載的是當(dāng)前最新版5.3.0)：

下載完后對其解壓，然后自己新建一個文件夾，將解壓文件復(fù)制到這個文件夾中(我這里復(fù)制到E盤下新建的openlayers文件夾中)：

可以發(fā)現(xiàn)解壓文件中包含了幾個文件，但是目前我們只會用到build和css中的內(nèi)容。

其中build文件夾中包含了ol.js文件，它是OpenLayers的核心開發(fā)庫，集成了OpenLayers的所有功能；css文件夾中包含了ol.css文件，它是樣式庫，包含了OpenLayers的所有默認(rèn)樣式信息。

二、構(gòu)建簡單的地圖應(yīng)用

上面說到了ol.js和ol.css這兩個文件，而構(gòu)建基于OpenLayers的web應(yīng)用正是需要在代碼中引入這兩個文件。

首先在剛才新建的openlayers文件夾的根目錄中新建一個first文件夾用來放置我們的第一個OpenLayers應(yīng)用：

然后，在first文件夾中新建一個HTML文件simple_map.html:

simple_map.html:

Simple Map

可以看到，代碼里引入了ol.js和ol.css這兩個文件！

因為OpenLayers中的地圖需要一個div元素作為容器用來放置繪制地圖的canvas DOM元素與其他DOM元素，所以我們在simple_map.html中也加入一個div元素。

現(xiàn)在已經(jīng)把基礎(chǔ)代碼寫完了，接下來開始寫最核心的邏輯代碼：

simple_map.html:

Simple Map

let map = new ol.Map({

target: 'map', // 關(guān)聯(lián)到對應(yīng)的div容器 layers: [

new ol.layer.Tile({ // 瓦片圖層 source: new ol.source.OSM() // OpenStreetMap數(shù)據(jù)源 })

],

view: new ol.View({ // 地圖視圖 projection: 'EPSG:3857',

center: [0, 0],

zoom: 0

})

});

先讓我們用瀏覽器打開simple_map.html文件：

地圖顯示出來了！

你可以用鼠標(biāo)滾輪來放大和縮小地圖，以及使用左鍵按住地圖隨意拖動。

那么上面的邏輯代碼，也就是JavaScript那部分的代碼是什么意思呢？

其實很簡單：

首先，調(diào)用了ol.Map類生成了一個地圖容器對象，通過target參數(shù)關(guān)聯(lián)到div容器(id為"map"的div元素)。

然后通過layers參數(shù)設(shè)置需要加載的瓦片圖層(ol.layer.Tile)，這個瓦片圖層中包含了一個數(shù)據(jù)源(ol.source.OSM)，這個數(shù)據(jù)源是OpenStreetMap(一個開放數(shù)據(jù)源的免費地圖)的地圖數(shù)據(jù)，也就是ol.source.OSM這個類封裝了加載OSM地圖數(shù)據(jù)的詳細(xì)實現(xiàn)。

最后通過view參數(shù)設(shè)置地圖視圖(ol.View)，地圖視圖中也設(shè)置了相應(yīng)的空間參考系統(tǒng)(projection)、地圖視圖中心點(center)，地圖視圖縮放級別(zoom)。

怎么樣，是不是很簡單？

什么？很難？。。。。

沒有關(guān)系，后面還會詳細(xì)講解它的原理的。。。

三、OpenLayers的DOM元素組織結(jié)構(gòu)

那么地圖容器(ol.Map類)是如何將設(shè)置的圖層數(shù)據(jù)渲染呈現(xiàn)到Web客戶端的呢？

我們來看上面那個示例的DOM元素組織結(jié)構(gòu)。

使用瀏覽器打開simple_map.html，并打開控制臺的Elements選項卡，逐一點開DOM元素層次：

我們可以發(fā)現(xiàn)好幾層DOM元素層。

首先OpenLayers會在我們自定義的div元素(即id為map的div元素)中創(chuàng)建一個Viewport容器，地圖中的所有內(nèi)容都放置在Viewport中呈現(xiàn)。

在Viewport容器中分別創(chuàng)建了如下三個關(guān)鍵的元素層，分別渲染呈現(xiàn)地圖容器中的內(nèi)容：地圖渲染層 —— 這是一個canvas元素，地圖基于canvas 2D方式渲染

內(nèi)容疊加層 —— 用于放置疊置層(ol.Overlay，后面會詳細(xì)介紹)內(nèi)容，如在地圖上添加彈窗、圖片等等

地圖控件層 —— 用于放置控件，默認(rèn)情況下會放置ol.control.Zoom(用于控制地圖放大、縮小)、ol.control.Rotate(用于控制地圖旋轉(zhuǎn))、ol.control.Attribution(用于控制地圖右下角標(biāo)記)這三個控件。

總結(jié)

以上是生活随笔為你收集整理的openlayers地图旋转_OpenLayers教程二：实现简单的地图显示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。