openlayers4 入门开发系列之地图切换篇（附源码下载）

前言

openlayers4 官网的 api 文档介绍地址 openlayers4 api，里面详细的介绍 openlayers4 各个类的介绍，还有就是在线例子：openlayers4 官网在线例子，这个也是学习 openlayers4 的好素材。

openlayers4 入门开发系列的地图服务基于 Geoserver 发布的，关于 Geoserver 方面操作的博客，可以参考以下几篇文章：

• geoserver 安装部署步骤
• geoserver 发布地图服务 WMS
• geoserver 发布地图服务 WMTS
• geoserver 集成以及部署 arcgis server 瓦片数据

内容概览

1.基于 openlayers4 实现地图切换效果
2.源代码 demo 下载

本篇的重点内容是利用 openlayers4 来加载不同类型地图服务，实现了地图切换功能，效果图如下：

image

地图切换篇运用到了 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之家小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

GIS之家作品：GIS之家
GIS之家源码咨询：咨询模式