openlayers4 入門開發系列之地圖展示篇（附源碼下載）

前言

openlayers4 官網的 api 文檔介紹地址 openlayers4 api，里面詳細的介紹 openlayers4 各個類的介紹，還有就是在線例子：openlayers4 官網在線例子，這個也是學習 openlayers4 的好素材。

openlayers4 入門開發系列的地圖服務基於 Geoserver 發布的，關於 Geoserver 方面操作的博客，可以參考以下幾篇文章：

• geoserver 安裝部署步驟
• geoserver 發布地圖服務 WMS
• geoserver 發布地圖服務 WMTS
• geoserver 集成以及部署 arcgis server 瓦片數據

內容概覽

1.基於 openlayers4 實現地圖展示效果
2.源代碼 demo 下載

GIS之家一直打算寫一個 openlayers 入門開發系列文章（openlayers 目前版本用 4.x），只是一直沒抽出時間來整理；本文是 openlayers 入門開發系列的第一篇：地圖展示篇，后續會持續更新一系列入門開發文章。
整個系列的系統主界面會隨着功能增加而對應改變，大體布局如下：

地圖展示篇運用到了 openlayers 的核心類

• ol.Map
  這是 openLayers 的核心組件，對於要渲染的地圖，需要一個視圖、一個或多個圖層和目標容器；
  關於 Map 詳情看官方的 api 說明，里面具有有哪些函數、屬性以及事件等等。
  官方默認的 Map 創建代碼如下：

var map = new ol.Map({
view: new ol.View({
center: [0, 0],
zoom: 1

}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map'
});

 

• ol.View
  View 對象表示地圖的簡單 2D 視圖，用來改變地圖的中心、分辨率和旋轉的對象。初始化View對象有很多參數屬性，比如 center，zoom，extent，extent 等等，這些設置跟地圖加載展示息息相關，詳情看官方的 api 說明。
• ol.source.TileWMS
  這是圖層類，用於 WMS 服務器的瓦片數據的層源，詳情看官方的 api 說明。

地圖展示篇核心代碼實現過程，加載 geoserver 部署的瓦片數據

• 地圖配置文件 Config.js，配置地圖服務信息

更多的詳情見：GIS之家小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波