OpenLayers教程七：自己实现图层切换控件

最新推荐文章于 2025-07-13 16:25:38 发布

不睡觉的怪叔叔

最新推荐文章于 2025-07-13 16:25:38 发布

阅读量7.2k

点赞数 14

CC 4.0 BY-SA版权

分类专栏：开源GIS

本文链接：https://blog.youkuaiyun.com/qq_35732147/article/details/94383578

OpenLayers并没有封装图层切换的控件，所以我们需要自己来实现图层控件。

自定义图层切换控件的原理很简单：显示某个图层时，将其他图层隐藏。

完整代码：

layerSwitch.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图层切换控件</title>
    <link rel="stylesheet" href="../v5.3.0/css/ol.css" />
    <script src="../v5.3.0/build/ol.js"></script>
</head>
<body>
    <div id="controls">
        <input type="checkbox" id="osm" checked />OpenStreetMap
        <input type="checkbox" id="bingmap" />Bing Map
        <input type="checkbox" id="stamen" />Stamen Map
    </div>
    <div id="map"></div>

    <script>
        le