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

經過上一篇文章對OpenLayers的簡單了解以后，現在讓我們來實現一個簡單的地圖顯示Demo。

一、下載OpenLayers

然后點擊Get the Code：

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

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

可以發現解壓文件中包含了幾個文件，但是目前我們只會用到build和css中的內容。

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

二、構建簡單的地圖應用

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

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

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

simple_map.html:

Simple Map

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

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

現在已經把基礎代碼寫完了，接下來開始寫最核心的邏輯代碼：

simple_map.html:

Simple Map

let map = new ol.Map({

target: 'map', // 關聯到對應的div容器 layers: [

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

],

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

center: [0, 0],

zoom: 0

})

});

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

地圖顯示出來了！

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

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

其實很簡單：

首先，調用了ol.Map類生成了一個地圖容器對象，通過target參數關聯到div容器(id為"map"的div元素)。

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

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

怎么樣，是不是很簡單？

什么？很難？。。。。

沒有關系，后面還會詳細講解它的原理的。。。

三、OpenLayers的DOM元素組織結構

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

我們來看上面那個示例的DOM元素組織結構。

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

我們可以發現好幾層DOM元素層。

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

在Viewport容器中分別創建了如下三個關鍵的元素層，分別渲染呈現地圖容器中的內容：地圖渲染層 —— 這是一個canvas元素，地圖基于canvas 2D方式渲染

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。