首页 / 浏览问题 / WebGIS / 问题详情
web开发(OpenLayers)在地图上添加图层切换控件失败
9EXP 2021年12月06日

使用产品:iClient for OpenLayers

我在JS代码里同时在​​​​​​地图控件上同时添加了比例尺和图层切换按钮,但实现的页面里只有比例尺无图层切换,该怎么修改呢?​

2 个回答

你好,我这边直接在官网的示例(https://iclient.supermap.io/examples/openlayers/editor.html#controler_layerswitcher)里面加的这两个控件是没问题的可以正常显示。你在浏览器中f12检查一下布局,是不是存在不合理布局遮盖导致控件看不见。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_controlerLayerSwitcher"></title>
<script type="text/javascript" src="../js/include-web.js"></script>
<script type="text/javascript" include="layerswitcher" src="../../dist/ol/include-ol.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<script type="text/javascript">
    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var map,
        China = host + '/iserver/services/map-china400/rest/maps/China',
        ChinaDark = host + '/iserver/services/map-china400/rest/maps/ChinaDark';
    map = new ol.Map({
        layers: [
            new ol.layer.Group({
                'title': resources.text_switchLayer,
                layers: [
                    new ol.layer.Tile({
                        title: 'China',
                        type: 'base',
                        visible: true,
                        source: new ol.source.TileSuperMapRest({
                            url: China
                        }),
                    }),
                    new ol.layer.Tile({
                        title: 'ChinaDark',
                        type: 'base',
                        visible: false,
                        source: new ol.source.TileSuperMapRest({
                            url: ChinaDark
                        }),

                    })
                ]
            }),
        ],
        target: 'map',
        controls: ol.control.defaults({attributionOptions: {collapsed: false}}),
        view: new ol.View({
            center: [100, 38],
            projection: 'EPSG:3857',
            zoom: 3,
            multiWorld: true
        }),
    });
    var layerSwitcher = new ol.control.LayerSwitcher({});
    map.addControl(layerSwitcher);
     var scaleControl = new ol.control.ScaleLine();
    map.addControl(scaleControl);
</script>
</body>
</html>

3,755EXP 2021年12月06日

F12看了一下是在报错,不是遮盖的问题

你好,你的写法错误了,我们自己封装的control下面的控件是没有layerswitcher的,你要用ol源生的control下面的layerswitcher。

map.addControl(new ol.control.LayerSwitcher({}));

还是出不来(其实之前就两种都试了),还发现另一个问题添加layerswitcher的代码如果放在添加scaleline的代码前面,会让scaleline也显示不出来。不过layerswitcher是一直不行

这个是我前面的引用

https://stackoverflow.com/questions/63480187/how-to-add-layerswitcher-in-openlayer-6-4-3
我在网上找到了和我一样报错的问题。但我把所有的http改成https仍未解决
9EXP 2021年12月06日
...