Повторно добавьте значок (символ) после изменения стиля карты - PullRequest
Новая
       7

Повторно добавьте значок (символ) после изменения стиля карты

1 голос
/ 24 февраля 2020

Кто-нибудь знает, как можно повторно добавить значок (символ) после изменения стиля карты?

Ситуация следующая: я создал карту с двумя видами: вид на улицу и вид со спутника. На вид с улицы я также добавил значок (символ), который показывает место, где кто-то живет. Когда я переключаюсь между двумя видами, значок исчезает и больше не возвращается. Как я могу перезагрузить иконку снова?

В основном я хочу объединить следующие два примера:

Изменить стиль карты
https://docs.mapbox.com/mapbox-gl-js/example/setstyle/

и

При нажатии отобразить всплывающее окно
https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/


Как это можно сделать?

Ответы [ 3 ]

1 голос
/ 26 февраля 2020

Большое спасибо за ваш ответ !!

Я посмотрел ваш код и сравнил его с моим кодом, и единственное, что мне пришлось изменить, это map.on('load', ...) до map.on('style.load', ... ), и это трюк!

Вот полный код:

HTML

<div id='openstreetmap' style='height: 420px'>
<div id="mapbox-menu">
    <input id="streets-v11" type="radio" name="rtoggle" value="streets" checked="checked" />
    <label for="streets">Kaart</label>
    <input id="satellite-v9" type="radio" name="rtoggle" value="satellite" />
    <label for="satellite">Satelliet</label>
</div>
</div>

JavaScript

        // Set an access token.
            mapboxgl.accessToken = '';

            // Create a map object.
            var map = new mapboxgl.Map({
                container: 'openstreetmap',
                style: 'mapbox://styles/mapbox/streets-v11',
                center: [5.880299, 51.834706],
                zoom: 15
            });
// Set the controls.
            map.addControl(new mapboxgl.NavigationControl({showCompass: false}), 'top-right');

            // Create and add a list of places.
            map.on('style.load', function() {

                map.addSource('places', {
                    'type': 'geojson',
                    'data': {
                        'type': 'FeatureCollection',
                        'features': [
                            {
                                'type': 'Feature',
                                'properties': {
                                    'description':
                                        '<strong>Header</strong><p>text</p>',
                                    'icon': 'music'
                                },
                                'geometry': {
                                    'type': 'Point',
                                    'coordinates': [5.880299, 51.834706]
                                }
                            }
                        ]
                    }
                });

                // Add a layer showing the places.
                map.addLayer({
                    'id': 'places',
                    'type': 'symbol',
                    'source': 'places',
                    'layout': {
                        'icon-image': '{icon}-15',
                        'icon-size': 1.25,
                        'icon-allow-overlap': true
                    }
                });

                // Show a popup.
                map.on('click', 'places', function(e) {

                    var coordinates = e.features[0].geometry.coordinates.slice();
                    var description = e.features[0].properties.description;

                    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                        coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
                    }

                    new mapboxgl.Popup()
                        .setLngLat(coordinates)
                        .setHTML(description)
                        .addTo(map);

                });

                // Change the cursor to a pointer.
                map.on('mouseenter', 'places', function() {
                    map.getCanvas().style.cursor = 'pointer';
                });

                // Reset the cursor.
                map.on('mouseleave', 'places', function() {
                    map.getCanvas().style.cursor = '';
                });
            });


            // Switch between street view and satellite view.
            var layerList = document.getElementById('mapbox-menu');
            var inputs = layerList.getElementsByTagName('input');

            function switchLayer(layer) {
                var layerId = layer.target.id;
                map.setStyle('mapbox://styles/mapbox/' + layerId);
            }

            for (var i = 0; i < inputs.length; i++) {
                inputs[i].onclick = switchLayer;
            }

        </script>

Единственная (маленькая) проблема в том, что кнопка закрытия больше не работает. Есть идеи по этому поводу?

0 голосов
/ 26 февраля 2020

Еще раз спасибо !!

Я переместил следующие три блока из функции map.on('style.load', ...): 

map.on('click', 'places', ...)
map.on('mouseenter', 'places', ...)
map.on('mouseleave', 'places', ...)

И это все! Спасибо за помощь!

0 голосов
/ 25 февраля 2020

Mapbox-GL- JS не различает guish между слоями, которые являются частью базовой карты, и слоями, которые вы добавили. Поэтому, если вы хотите «сохранить» дополнительные слои, вам просто нужно добавить их снова.

Напишите функцию для добавления дополнительных слоев. Затем, всякий раз, когда вы меняете базовую карту, просто вызывайте эту функцию снова.

...