Openlayer 3 圖層列表控件(自定義)

時間 2019-11-12

標籤 openlayer 列表控件自定義简体版

原文原文鏈接

<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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。