Javascript OpenLayers 3中的层交换

我有一个问题，我需要更改我的web应用程序中的地图层（显示的地图分幅）

我的HTML中有这个

<div id="map"></div>

<select onchange="changeMap()">
                <option value="BingSat">Bing Sat</option>
                <option value="BingRoad">Bing Road</option>
                <option value="OSM">OSM</option>
                <option value="MapquestSat">Mapquest Sat</option>
                <option value="MapQuestRoad">MapQuest Road</option>
</select> 

}

}

要更改显示的地图，我需要做什么？我已经研究过了，但我不能将其完全纳入我的项目中，因为我需要一个可切换侧栏中的下拉列表。我试着编辑他的代码，以便在我的侧边栏中添加生成的HTML，但没有成功

---

是否有更简单的方法更改显示的地图？

您需要不同的图层组。我是这样做的：

var layersOSM = new ol.layer.Group({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ]
});

var layersMQ = new ol.layer.Group({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.MapQuest({layer: 'osm'})
        })
    ]
});

function setMapType(newType) {
    if(newType == 'OSM') {
        map.setLayerGroup(layersOSM);
    } else if (newType == 'MAPQUEST_OSM') {
        map.setLayerGroup(layersMQ);
    }
}

其中，

setMapType

是一个函数，当我想要更改样式时，我使用必要的字符串属性调用它

map

是我的ol.map变量

---

您可以将层组排列在一个数组中，并按名称访问它们，就像您对层所做的那样，而不是我使用的if/else构造。但我只有两个不同的图层组。

不是直接的答案，但可能对您或其他人有帮助：

要使用可见层的名称更改层，请使用：

var group = map.getLayerGroup();
var layers = group.getLayers();
var element = layers.item(0);
var name = element.get('name');

---

下面是一个例子，看看我的意思。

我正在使用Bootstrap进行类似的工作。这并不“简单”，但它应该符合您所寻找的内容

因此，首先在HTML中，我在右侧边栏中为基本地图添加了以下内容：

不透明度

在div下，id=basemaps是我动态添加basemap单选按钮的地方

我以与您类似的方式声明了我的底图，类型为：“base”。完成初始化地图和图层后，我调用javascript函数将图层添加到侧栏面板，并绑定单选按钮更改事件，以便基础地图更改为所选内容：

function initBaseLayersList() {
    // get all the map layers
    var layers = map.getLayers().getArray();
    // array to hold the basemap layers
    var baseLayers = new Array();

    // loop through the layers and save
    // the ones with type = 'base'
    for (var i=0; i<layers.length; i++) {
        var lyrprop = layers[i].getProperties();
        if(lyrprop.type =='base') {   
            baseLayers.push(layers[i]);
        }
    }
    /* now that the basemap layers are separated, create appropriate HTML
       for each layer's radio button which will be appended to the sidebar panel
       body div */
    $.each(baseLayers, function(index) {
        var basecontent = '';
        var lyrprop = this.getProperties();
        basecontent += '<div class="input-group" id="radio-basemap-'+index+'">';
        // first basemap in the list is selected, others are not
        if(index==0) {
            basecontent += '<span class="input-group-addon"><input type="radio" name="radio-basemap" checked="checked">'+lyrprop.title+'</span>';
        }
        else {
            basecontent += '<span class="input-group-addon"><input type="radio" name="radio-basemap">'+lyrprop.title+'</span>'; 
        }
        basecontent += '</div>';

        $('#basemaps').append($(basecontent));

    });
    /* lastly, bind the radio button group to the change event making the 
       selected basemap visible and hiding the one deselected
    */

    $('#basemaps').bind( "change", function(event) {
        var newbase = $('input[name=radio-basemap]:checked');
        var btntext = newbase[0].nextSibling.nodeValue;

        for (var i=0; i<baseLayers.length;i++) {
            var lyrprop = baseLayers[i].getProperties();
            if (lyrprop.title == btntext) {

                baseLayers[i].setVisible(true);

                var baseslider = $('#baseopslider').slider();
                var baseopacity =  baseslider.slider('getValue')/100; 
                baseLayers[i].setOpacity(baseopacity);
            }
            else {
                baseLayers[i].setVisible(false);
            }
        }

    });
}

函数initBaseLayersList（）{
//获取所有地图图层
var layers=map.getLayers（）.getArray（）；
//数组以保存底图图层
var baseLayers=新数组（）；
//循环浏览图层并保存
//类型为'base'的
对于（var i=0；i
var group = map.getLayerGroup();
var layers = group.getLayers();
var element = layers.item(0);
var name = element.get('name');

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
        <a data-toggle="collapse" href="#basemap-choice">
            <i class="fa fa-list-alt"></i>
            Basemaps
        </a>

        </h4>
    </div>
    <div id="basemap-choice" class="panel-collapse collapse in">
        <div class="panel-body" id="basemaps">

        </div>
        <div id="baseopacity">
            <label>Opacity</label>
            <input id="baseopslider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="100"/>

        </div>                
    </div>
</div>

function initBaseLayersList() {
    // get all the map layers
    var layers = map.getLayers().getArray();
    // array to hold the basemap layers
    var baseLayers = new Array();

    // loop through the layers and save
    // the ones with type = 'base'
    for (var i=0; i<layers.length; i++) {
        var lyrprop = layers[i].getProperties();
        if(lyrprop.type =='base') {   
            baseLayers.push(layers[i]);
        }
    }
    /* now that the basemap layers are separated, create appropriate HTML
       for each layer's radio button which will be appended to the sidebar panel
       body div */
    $.each(baseLayers, function(index) {
        var basecontent = '';
        var lyrprop = this.getProperties();
        basecontent += '<div class="input-group" id="radio-basemap-'+index+'">';
        // first basemap in the list is selected, others are not
        if(index==0) {
            basecontent += '<span class="input-group-addon"><input type="radio" name="radio-basemap" checked="checked">'+lyrprop.title+'</span>';
        }
        else {
            basecontent += '<span class="input-group-addon"><input type="radio" name="radio-basemap">'+lyrprop.title+'</span>'; 
        }
        basecontent += '</div>';

        $('#basemaps').append($(basecontent));

    });
    /* lastly, bind the radio button group to the change event making the 
       selected basemap visible and hiding the one deselected
    */

    $('#basemaps').bind( "change", function(event) {
        var newbase = $('input[name=radio-basemap]:checked');
        var btntext = newbase[0].nextSibling.nodeValue;

        for (var i=0; i<baseLayers.length;i++) {
            var lyrprop = baseLayers[i].getProperties();
            if (lyrprop.title == btntext) {

                baseLayers[i].setVisible(true);

                var baseslider = $('#baseopslider').slider();
                var baseopacity =  baseslider.slider('getValue')/100; 
                baseLayers[i].setOpacity(baseopacity);
            }
            else {
                baseLayers[i].setVisible(false);
            }
        }

    });
}