Как показать ol-3 Layer Switcher
Я разрабатываю ГИС, и мне сложно показать 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);
На данный момент мой код все еще не работает, и три карты не могут отображаться на моем сайте.
Решение
Предполагая, что вы правильно включили библиотеку переключателя слоев, проблема не в переключателе слоев, а в куче ошибок в определении карты.
Там не хватает запятой 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);
Другие решения
Других решений пока нет …