前言

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

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

内容概览

1.基于 openlayers4 实现地图图层控制
2.源代码 demo 下载

本篇的重点内容是利用 openlayers4 实现地图图层控制功能,效果图如下:

部分核心代码

  • 页面引用 ztree 插件
<!-- Ztree控件css以及js -->
<link href="${pageContext.request.contextPath}/js/plugins/ztree/zTreeStyle/img/zTreeStyle.css" rel="stylesheet" />
<script src="${pageContext.request.contextPath}/js/plugins/ztree/jquery.ztree.min.js"></script>
图层管理器界面布局
DCI.Catalog = {
Html: "<div></div>"
+ "<div style=' height:5px;'></div>"
+ "<div id='CatalogTree'style='height:98%;'><ul id='ztreeThemeServerOfCatalog' class='ztree'><ul></div>"
}
  • 图层配置
"layers": [
{"layer_id":"anjiHXMap","server":"geoserver","level":0,"name":"anjiHXMap","visible":true,"format":"image/png","tile_grid":"grid_GDImage","url":"/gwc/service/wms"},
{"layer_id":"anjiGNMap","server":"geoserver","level":0,"name":"anjiGNMap","visible":true,"format":"image/png","tile_grid":"grid_GDImage","url":"/gwc/service/wms"},
],
"maps":[
{
"map_id":"map_1",
"description":"地图",
"layer_groups":[
{
"group_id":"tdtmap_img",
"layers":[
{"id":"map_1","pid":"root","title":"安吉县","tip":"安吉县"},
//{"id":"g-1","pid":"map_1","title":"影像图","tip":"影像图","visible":true,"inswitcher":false,"layers":["GISSERVER_AnJiMapImg"]},
{"id":"g-1","pid":"map_1","title":"影像图","tip":"影像图","visible":true,"inswitcher":false,"layers":["tmap_img_w","tmap_cia_w"]},
{"id":"g-10","pid":"map_1","title":"功能区划","tip":"功能区划","visible":true,"layers":["anjiGNMap"]},
{"id":"g-11","pid":"map_1","title":"红线数据","tip":"红线数据","visible":true,"layers":["anjiHXMap"]}
]
},
{
"group_id":"tdtmap_vec",
"layers":[
{"id":"map_1","pid":"root","title":"安吉县","tip":"安吉县"},
//{"id":"g-1","pid":"map_1","title":"街道图","tip":"街道图","visible":true,"inswitcher":false,"layers":["GISSERVER_AnJiMapVec"]},
{"id":"g-1","pid":"map_1","title":"街道图","tip":"街道图","visible":true,"inswitcher":false,"layers":["tmap_vec_c","tmap_cva_w"]},
{"id":"g-10","pid":"map_1","title":"功能区划","tip":"功能区划","visible":true,"layers":["anjiGNMap"]},
{"id":"g-11","pid":"map_1","title":"红线数据","tip":"红线数据","visible":true,"layers":["anjiHXMap"]}
]
}
],
"olview":"id_view_1"
}
]
  • 图层管理器初始化 js

更多的详情见GIS之家小专栏

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

openlayers4 入门开发系列之图层控制(附源码下载)的更多相关文章

  1. leaflet-webpack 入门开发系列五地图卷帘(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  2. leaflet-webpack 入门开发系列六矢量瓦片(附源码下载)

    前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...

  3. arcgis api 4.x for js 结合 react 入门开发系列"esri-loader"篇(附源码下载)

    基于上篇的介绍,虽然有比较esri-loader.@arcgis/webpack-plugin,还是觉得有必要需要讲述一下“esri-loader”的开发模式,待大家体验后也会有更直观的感受.本篇文章 ...

  4. arcgis api 4.x for js 结合 react 入门开发系列初探篇(附源码下载)

    你还在使用 JQuery 或者 Dojo 框架开发 arcgis api 4.x for js 吗?想试试模块化开发吗?随着前端技术的发展,arcgis api 4.x for js 也有了结合 re ...

  5. cesium结合geoserver利用WFS服务实现图层编辑(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  6. cesium结合geoserver利用WFS服务实现图层删除(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  7. arcgis api 3.x for js 入门开发系列七图层控制(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  8. arcgis api for js入门开发系列七图层控制(含源代码)

    上一篇实现了demo的地图分屏对比模块,本篇新增图层控制模块,截图如下(源代码见文章底部): 图层控制模块实现的思路如下: 1.在地图配置文件map.config.js里面配置图层目录树节点信息,作为 ...

  9. cesium结合geoserver利用WFS服务实现图层新增(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

随机推荐

  1. 数据结构和算法总结(一):广度优先搜索BFS和深度优先搜索DFS

    前言 这几天复习图论算法,觉得BFS和DFS挺重要的,而且应用比较多,故记录一下. 广度优先搜索 有一个有向图如图a 图a 广度优先搜索的策略是: 从起始点开始遍历其邻接的节点,由此向外不断扩散. 1 ...

  2. Zookeeper学习

    http://www.cnblogs.com/caosiyang/archive/2012/11/09/2763190.html   http://www.cnblogs.com/haippy/tag ...

  3. Linux时间子系统之(一):时间的基本概念

    专题文档汇总目录 Notes:Linux时间基准点:Linux时间和broken-down time(struct tm):不同精度的时间表示time_t.timeval.timespec. 原文地址 ...

  4. How to untar a TAR file using Apache Commons

    import org.apache.commons.compress.archivers.tar.TarArchiveEntry; import org.apache.commons.compress ...

  5. jmeter添加断言

    先创建一个线程组,再创建一个http请求. 为了方便观察,我们添加两个监听器,察看结果树和断言结果. 添加断言:响应断言,响应断言也是比较常用的一个断言 设置响应断言:正常情况下响应代码是200.选择 ...

  6. Java通过JDBC 进行MySQL数据库操作

    转自: http://blog.csdn.net/tobetheender/article/details/52772157 Java通过JDBC 进行MySQL数据库操作 原创 2016年10月10 ...

  7. classpath和filepath

    ******************************** java中的相对路径和绝对路径 ******************************** 相对路径(其实就是编译后的路径) - ...

  8. tcp.go

    )     _, err := io.ReadFull(clientConn, buf)     if err != nil {         p.ctx.nsqd.logf("ERROR ...

  9. nsq源码阅读笔记之nsqd(三)——diskQueue

    diskQueue是backendQueue接口的一个实现.backendQueue的作用是在实现在内存go channel缓冲区满的情况下对消息的处理的对象. 除了diskQueue外还有dummy ...

  10. k8s编排最佳实践

    编排文件技巧 使用资源时指定最新稳定版的API version 编排文件应该纳入版本控制,这样可以在必要的时候快速回滚,同样也有利于资源恢复和重建 使用YAML格式而不是JSON格式,尽管两种格式的文 ...