前言
openlayers4 官网的 api 文档介绍地址 openlayers4 api，里面详细的介绍 openlayers4 各个类的介绍，还有就是在线例子：openlayers4 官网在线例子，这个也是学习 openlayers4 的好素材。
openlayers4 入门开发系列的地图服务基于 Geoserver 发布的，关于 Geoserver 方面操作的博客，可以参考以下几篇文章：
内容概览
1.基于 openlayers4 实现地图批量叠加 zip 压缩 SHP 图层
2.源代码 demo 下载
本篇的重点内容是直接加载压缩文件 zip 形式 shp，可以批量加载点、线、面 shp 图层，效果图如下：
压缩的 shp 截图如下：
实现的核心代码
//叠加压缩SHP图层，批量加载显示
$("#zipshp").click(function () {
shp("js/main/shpJS/gishome.zip").then(function (data) {
if (data && data.length > 0) {
var layers = map.getLayers().getArray();
var remolayers = [];
for(var i =0;i<layers.length;i++){
var layer = layers[i];
if(layer.get("id") && layer.get("id").indexOf("zipshp") != -1){
remolayers.push(layer);
}
}
for(var j=0;j<remolayers.length;j++){
map.removeLayer(remolayers[j]);
}
var image = new ol.style.Circle({
radius: 5,
fill: null,
stroke: new ol.style.Stroke({color: 'red', width: 1})
});
……
更多的详情见：GIS之家小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波
