Как показать ol-3 Layer Switcher - PullRequest
Новая
       13

Как показать ol-3 Layer Switcher

0 голосов
/ 31 мая 2018

Я занимаюсь разработкой ГИС, и мне сложно показать Layer Switcher.В этом случае я использовал 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);

На данный момент мой код все еще не работает, и три карты не могут отображаться на моем сайте.

1 Ответ

0 голосов
/ 01 июня 2018

При условии, что вы правильно включили библиотеку переключателя слоев, проблема не в переключателе слоев, а в куче ошибок при определении карты.

Перед peta_higlight и * пропущена запятая1004 * не имеет никакого смысла.

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);
...