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 入门开发系列的第一篇：地图展示篇，后续会持续更新一系列入门开发文章。
整个系列的系统主界面会随着功能增加而对应改变，大体布局如下：

image

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

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