javascript – OpenLayers 3中的层切换

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – OpenLayers 3中的层切换，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2379字，纯文字阅读大概需要4分钟。

内容图文

我有一个问题,我需要在我的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> 

这就是我到目前为止在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

}

为了更改显示的地图,我需要做什么？我已经调查了https://github.com/walkermatt/ol3-layerswitcherdescription]1但是我不能将它完全合并到我的项目中,因为我需要一个可切换边栏内的下拉列表.我尝试编辑他的代码,因此它会在我的侧边栏中添加生成的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是我想要更改样式时用必要的字符串属性调用的函数. mapis my ol.Map变量.

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

内容总结

以上是互联网集市为您收集整理的javascript – OpenLayers 3中的层切换全部内容，希望文章能够帮你解决javascript – OpenLayers 3中的层切换所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端