openlayers4 入门开发系列之批量叠加 zip 压缩 SHP 图层篇（附源码下载）

前言

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 图层，效果图如下：

image

压缩的 shp 截图如下：

image

实现的核心代码

//叠加压缩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之家小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

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