![bb0678aba789b759f295637173ac231d.png](https://img-blog.csdnimg.cn/img_convert/bb0678aba789b759f295637173ac231d.png)
前言
openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子,这个也是学习 openlayers4 的好素材。
openlayers4 入门开发系列的地图服务基于 Geoserver 发布的,关于 Geoserver 方面操作的博客,可以参考以下几篇文章:
geoserver 安装部署步骤
geoserver 发布地图服务 WMS
geoserver 发布地图服务 WMTS
geoserver 集成以及部署 arcgis server 瓦片数据
内容概览
1.基于 openlayers4 实现地图批量叠加 zip 压缩 SHP 图层
2.源代码 demo 下载
本篇的重点内容是直接加载压缩文件 zip 形式 shp,可以批量加载点、线、面 shp 图层,效果图如下:
![0e82862c8401390c547521cad316e9ff.png](https://img-blog.csdnimg.cn/img_convert/0e82862c8401390c547521cad316e9ff.png)
压缩的 shp 截图如下:
![dc83e779ce3e93eb5b29bcd0ad4907b3.png](https://img-blog.csdnimg.cn/img_convert/dc83e779ce3e93eb5b29bcd0ad4907b3.png)
实现的核心代码
//叠加压缩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})
});
更多的详情见:
openlayers4 入门开发系列之批量叠加 zip 压缩 SHP 图层篇(附源码下载) - 小专栏xiaozhuanlan.com![2387d03d53fbb807826d3fe3502f2e64.png](https://img-blog.csdnimg.cn/img_convert/2387d03d53fbb807826d3fe3502f2e64.png)
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
GIS之家店铺:GIS之家
GIS之家源码咨询:GIS之家webgis入门开发系列demo源代码咨询