Openlayer 3 图层列表控件(自定义)

最新推荐文章于 2024-11-24 20:14:12 发布

weixin_30338481

最新推荐文章于 2024-11-24 20:14:12 发布

阅读量265

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mina-huojian66/p/6003905.html

本文介绍了一种在OpenLayers地图中实现图层控制的方法。通过JavaScript动态创建HTML元素，为地图上的每个图层添加了一个复选框，允许用户自由切换图层的显示状态。文章详细展示了如何使用OpenLayers API获取地图的所有图层，并根据图层的可见性设置相应的复选框状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
<div id="map"></div>
<div id="layerControl" class="layerControl">
    <ul id="layerTree" class="layerTree"></ul>
</div>
<script>
    var layer=new Array();//图层数组
    var layerName=new Array();//图层名称数组
    var layerVisibility=new Array();//图层可见数组
    function loadLayersControl(map,id){
        var treeContent=document.getElementById(id);
        var layers=map.getLayers();//获取地图中的所有图层
        for(var i=0;i<layers.getLength();i++){
                layer[i]=layers.item(i);
            layerName[i]=layer[i].get('name');
            layerVisibility[i]=layer[i].getVisible();//获取每个图层的名称及是否可见
            var elementLi=document.createElement("li");
            treeContent.appendChild(elementLi);
            var elementInput=document.createElement("input");
            elementInput.type="checkbox";
            elementInput.name="layers";
            elementLi.appendChild(elementInput);
            var elementLabel=document.createElement("label");
            elementLabel.className="layer";
            setInnerText(elementLabel,layerName[i]);
            elementLi.appendChild(elementLabel);
            //<ul><li><input type="checkbox" name="layers"/><label class="layer"></label></li></ul>
            if(layerVisibility[i]){
                elementInput.checked=true;
            }
            addChangeEvent(elementInput,layer[i]);
        }
    }
    function  addChangeEvent(element,layer){
        element.onclick=function(){
            if(element.checked){
                layer.setVisible(true);
            }else{
                layer.setVisible(false);
            }
        }
    }
    function setInnerText(element,text){
        if(typeof element.textContent=="string"){
            element.textContent=text;
        }else{
            element.innerText=text;//FireFox不支持innerText方法,兼容
        }
    }
    var map=new ol.Map({
        target:'map',
        layer:[],
        view:new ol.View({
            center:[0,0],
            zoom:2
        })
    })
    var OSM=new ol.layer.Tile({
        source:new ol.source.OSM(),
        name:'世界地图'
    });
    var BingMap=new ol.layer.Tile({
        source: new ol.source.BingMaps({
            key:  “*************************************”,
            imagerySet: 'Aerial'
        }),
        name:'卫星地图'
    });
    map.addLayer(OSM);
    map.addLayer(BingMap);
    loadLayersControl(map,"layerTree");
</script>
</body>