Как добавить эффект наведения на новый слой, созданный с помощью пользовательского геойсона - PullRequest
Новая
       112

Как добавить эффект наведения на новый слой, созданный с помощью пользовательского геойсона

2 голосов
/ 07 октября 2019

Я построил карту и добавил слой, который выделяет конкретную окрестность, я хотел бы добавить эффект наведения на слой. Как и в этом примере https://docs.mapbox.com/mapbox-gl-js/example/hover-styles

Я дошел до создания собственного слоя с геоджонсом, но в примере, которому я пытаюсь следовать, используется внешний источник данных, а я использую свой собственный. Я пытался ссылаться на свои данные, но я не думаю, что я делаю это правильно. Пожалуйста, смотрите эту ссылку с рабочей версией, показывающей слой, освещающий окрестности.

Это ссылка на то, что у меня есть до сих пор https://jsfiddle.net/jrax4pvm/1/

Вот мой JS 

mapboxgl.accessToken = 

'pk.eyJ1IjoibGVvc29ubmVrdXM5NSIsImEiOiJjazAxdHcyZWExMHBjM2lwN2psMDhheXQwIn0.KpEYrurG0lE55PLKMuYtKw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/leosonnekus95/ck11gbbaz0neb1cmrunqmijkf',
zoom: 15,
center: [174.7570008, -36.8658221]
});

map.on('load', function () {



           'id': 'Uptown',
                    'type': 'fill',
                    'source': {
                    'type': 'geojson',
                    'data': {
                    'type': 'Feature',
                    'geometry': {
                    'type': 'Polygon',
                    'coordinates': 


                    [
        [ /* Co-ordinates here..*/ ]]

       }
                    }
                    },
                    'layout': {},
                    'paint': {
                    'fill-color': '#088',
                    'fill-opacity': 0.8
                    }
                    });


    });

Я бы очень хотел сделать этот слой доступным для кликабельности и подозреваемым. Мне нужно создать комбинированную версию этих двух примеров.

https://docs.mapbox.com/mapbox-gl-js/example/geojson-polygon/ https://docs.mapbox.com/mapbox-gl-js/example/hover-styles/

и хотел бы получить руководство.

1 Ответ

0 голосов
/ 18 октября 2019

Вы захотите добавить функции map.on ('mouseenter') и map.on ('mouseleave'), которые нацеливают ваш слой на ваш код следующим образом: 

map.on('mouseenter', 'Uptown', function(e) {
  map.setPaintProperty('Uptown', 'fill-color', '#FF0000');
});

map.on('mouseleave', 'Uptown', function() {
  map.setPaintProperty('Uptown', 'fill-color', '#1F06F0'));
});

Я обновилВаш код в другом JSFiddle (https://jsfiddle.net/pjleonard37/jfd0bsha/) с этими изменениями.

Отказ от ответственности: я работаю в Mapbox

...