javascript - OpenLayers 3 中的图层切换

Question

我有一个问题，我需要在我的网络应用程序中更改 map 层(显示的 map 图 block )。

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

这是我目前在 JavaScript 中的内容

$(document).ready(function() {    
  map = new ol.Map({
    logo:'false',
    target: 'map',
    layers: [
        new ol.layer.Group({
            'title': 'Base maps',
            layers: [
                new ol.layer.Tile({
                    title: 'Water color',
                    type: 'base',
                    visible: false,
                    source: new ol.source.Stamen({
                        layer: 'watercolor'
                    })
                }),
                new ol.layer.Tile({
                    title: 'OSM',
                    type: 'base',
                    visible: true,
                    source: new ol.source.OSM()
                }),
                new ol.layer.Tile({
                    title: 'MapQuest Satellite',
                    type: 'base',
                    visible: false,
                    source: new ol.source.MapQuest({layer: 'sat'})
                }),

                 new ol.layer.Tile({
                    title: 'MapQuest OSM',
                    type: 'base',
                    visible: false,
                    source: new ol.source.MapQuest({layer: 'osm'})
                 }),
                  new ol.layer.Tile({
                      title: 'Bing Maps aerial',
                      type: 'base',
                      visible: false,
                      source: new ol.source.BingMaps({
                          imagerySet: 'AerialWithLabels',
                          key: '123'
                      })
                  }),
                     new ol.layer.Tile({
                         title: 'Bing Maps road',
                         type: 'base',
                         visible: false,
                         source: new ol.source.BingMaps({
                             imagerySet: 'Road',
                             key: '123'
                         })
                     })
            ]
        }),
    ],

    view: new ol.View({
        center: ol.proj.transform([17.813988, 43.342019], 'EPSG:4326', 'EPSG:3857'),
        zoom: 3
    })
});

function changeMap() {
  //grab the selected ID
 //change the map according to the selected ID

要更改显示的 map ，我需要做什么？我调查了https://github.com/walkermatt/ol3-layerswitcherdescription] 1但我不能将它完全合并到我的项目中，因为我需要一个可切换侧边栏内的下拉列表。我尝试编辑他的代码，以便将生成的 HTML 添加到我的侧边栏中，但它不起作用。

是否有更简单的方法来更改显示的 map ？

Answer 1

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

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 结构。但我只有 2 个不同的图层组。