openlayers4 入门开发系列之图层控制（附源码下载）

前言

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

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

• geoserver 安装部署步骤
• geoserver 发布地图服务 WMS
• geoserver 发布地图服务 WMTS
• geoserver 集成以及部署 arcgis server 瓦片数据

内容概览

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

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

image

image

部分核心代码

• 页面引用 ztree 插件

• 图层管理器界面布局

DCI.Catalog = {
    Html: "
"
    + "
"
    + "
"
}

• 图层配置

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

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