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

前言

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

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

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

內容概覽

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

本篇的重點內容是利用 openlayers4 來加載不同類型地圖服務，實現了地圖切換功能，效果圖如下：

地圖切換篇運用到了 openlayers4 的核心類

• ol.layer.Tile
  ol.layer.Tile
  openlayers4 加載瓦片地圖類，關於 Tile 詳情看官方的 api 說明，里面具有有哪些函數、屬性以及事件等等
• ol.source.XYZ
  ol.source.XYZ
  openlayers4 的 ol.layer.Tile 加載瓦片 XYZ 目錄訪問數據源，關於 ol.source.XYZ 詳情看官方的 api 說明，里面具有有哪些函數、屬性以及事件等等
• ol.source.TileArcGISRest
  ol.source.TileArcGISRest
  openlayers4加載 ArcGIS Rest services 地圖服務數據源，關於 ol.source.TileArcGISRest 詳情看官方的 api 說明，里面具有有哪些函數、屬性以及事件等等
• ol.source.ImageArcGISRest
  ol.source.ImageArcGISRest
  openlayers4 加載 ArcGIS Rest services 地圖服務數據源，關於 o.source.ImageArcGISRest 詳情看官方的api說明，里面具有有哪些函數、屬性以及事件等等
• ol.source.TileWMS
  ol.source.TileWMS
  openlayers4 加載 WMS 瓦片服務地圖數據源，關於 ol.source.TileWMS 詳情看官方的 api 說明，里面具有有哪些函數、屬性以及事件等等
• ol.source.OSM
  ol.source.OSM
  openlayers4 加載 OSM 在線地圖數據源，關於 ol.source.OSM 詳情看官方的 api 說明，里面具有有哪些函數、屬性以及事件等等

地圖切換篇核心代碼實現過程

• 不同類型地圖服務配置

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

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