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

时间：2021-07-15 13:58:42

前言

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

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

内容概览

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

GIS之家一直打算写一个 openlayers 入门开发系列文章（openlayers 目前版本用 4.x），只是一直没抽出时间来整理；本文是 openlayers 入门开发系列的第一篇：地图展示篇，后续会持续更新一系列入门开发文章。
整个系列的系统主界面会随着功能增加而对应改变，大体布局如下：
openlayers4 入门开发系列之地图展示篇（附源码下载）

地图展示篇运用到了 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之家小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

相关文章