php - 如何显示 ol-3 层切换器

Question

我正在开发 GIS，但无法显示图层切换器。在这种情况下，我使用了 Open Layers 3。

map = new ol.Map({
        controls: ol.control.defaults({
          attribution: false
        }).extend([mousePositionControl,zoomslider]),
        target: document.getElementById('map'),
        layers: [
    new ol.layer.Group({
        'title': 'BaseMaps',
        layers: [
        new ol.layer.Tile({
            title: 'RoadMaps',
            source: new ol.source.OSM({
                url: 'http://mt{0-3}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
                attributions: [
                new ol.Attribution({ html: '© Google' }),
                new ol.Attribution({ html: '<a href="https://developers.google.com/maps/terms">Terms of Use.</a>' })
                ]
            })
        }),
        new ol.layer.Tile({
            title: 'Satelite',
            type: 'base',
            visible: false,
            source: new ol.source.OSM({
                url: 'http://mt{0-3}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',
                attributions: [
                new ol.Attribution({ html: '© Google' }),
                new ol.Attribution({ html: '<a href="https://developers.google.com/maps/terms">Terms of Use.</a>' })
                ]
            })
        }),
            new ol.layer.Tile({
            title: 'OSM',
            type: 'base',
            visible: true,
            source: new ol.source.OSM()
        })
        ]
        peta_highlight,
        layers['layer_kategori'],
    })
        ],

        view: new ol.View({
            projection: "EPSG:3857",
        })              
    });

    layerSwitcher = new ol.control.LayerSwitcher({
    tipLabel: 'Légende' // Optional label for button
    });
    map.addControl(layerSwitcher);

此时我的代码仍然无法正常工作，这三张地图无法在我的网站上显示。

标签： phpgoogle-mapsgismapboxopenlayers-3

Answer 1

假设您已正确包含图层切换器库，那么导致问题的不是图层切换器，而是您定义地图的方式中的一堆错误。

前面少了一个逗号peta_higlight，layers['layer_kategori'],没有任何意义。

ol.View要求您添加中心和分辨率/缩放。

以下代码应该为您解决这些问题

map = new ol.Map({
    controls: ol.control.defaults({
        attribution: false
    }).extend([new ol.control.MousePosition, new ol.control.ZoomSlider]),
    target: document.getElementById("map"),
    layers: [new ol.layer.Group({
        title: "BaseMaps",
        layers: [
            new ol.layer.Tile({
                title: "RoadMaps",
                source: new ol.source.OSM({
                    url: "http://mt{0-3}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}",
                    attributions: [new ol.Attribution({
                        html: "© Google"
                    }), new ol.Attribution({
                        html: '<a href="https://developers.google.com/maps/terms">Terms of Use.</a>'
                    })]
                })
            }),
            new ol.layer.Tile({
                title: "Satelite",
                type: "base",
                visible: false,
                source: new ol.source.OSM({
                    url: "http://mt{0-3}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}",
                    attributions: [new ol.Attribution({
                        html: "© Google"
                    }), new ol.Attribution({
                        html: '<a href="https://developers.google.com/maps/terms">Terms of Use.</a>'
                    })]
                })
            }),
            new ol.layer.Tile({
                title: "OSM",
                type: "base",
                visible: true,
                source: new ol.source.OSM()
            }), peta_highlight
        ]
    })],
    view: new ol.View({
        center: [0, 0],
        zoom: 5,
        projection: 'EPSG:3857'
    })
});

layerSwitcher = new ol.control.LayerSwitcher({
    tipLabel: 'Légende' // Optional label for button
});
map.addControl(layerSwitcher);