#popup #mapbox #mapbox-gl-js
#всплывающее окно #mapbox #mapbox-gl-js
Вопрос:
После нажатия на улицу (которая должна отображать всплывающее окно со свойствами), всплывающее окно отображает «неизвестно». Что нужно сделать, чтобы во всплывающем окне отображались свойства? Если кто-нибудь знает, что нужно изменить или что может быть причиной того, что всплывающие окна не работают, я был бы очень благодарен!
<div class="container" style="background-color:#F6F3F3">
<div id='map' style='width: 100%; height: 900px;'></div>
<script>
mapboxgl.accessToken =
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/bisqpski/cjssto8kw77g11gk4rwur575q'
});
map.on('load', function() {
// Add a layer showing the state polygons.
map.addLayer({
'id': 'kazimierz-tileset',
'type': 'fill',
'source': {
"type": "Feature",
"properties": {
"Street": "Świętego Wawrzyńca",
"Probability": "13%"
},
"geometry": {
"coordinates": [
[19.944511, 50.049316],
[19.94617, 50.049681],
[19.946307, 50.049719],
[19.947699, 50.050025],
[19.948851, 50.050282],
[19.949689, 50.050456],
[19.951076, 50.05076],
[19.951401, 50.050831]
],
"type": "LineString"
}
}
});
// When a click event occurs on a feature in the states layer, open a popup
at the
// location of the click, with description HTML from its properties.
map.on('click', 'kazimierz-tileset', function(e) {
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(e.features[0].properties.name)
.addTo(map);
});
// Change the cursor to a pointer when the mouse is over the states layer.
map.on('mouseenter', 'kazimierz-tileset', function() {
map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
map.on('mouseleave', 'kazimierz-tileset', function() {
map.getCanvas().style.cursor = '';
});
});
</script>
</div> Комментарии:
1. Не связано: на вашем месте я бы удалил ваш личный код токена Mapbox из вашего вопроса.
Ответ №1:
У вас нет name в качестве свойства для ваших функций. Только улица и вероятность. Итак, вы вызываете свойство, которое не существует. Используйте street или укажите имя свойства любым удобным для вас способом.
"properties": {
"Street": "Świętego Wawrzyńca",
"Probability": "13%"
"Name": "Your Name Here"
},
Или просто используйте свойство street.
.setHTML(e.features[0].properties.Street)
Фрагмент:
<div class="container" style="background-color:#F6F3F3">
<div id='map' style='width: 100%; height: 900px;'></div>
<script>
mapboxgl.accessToken =
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/bisqpski/cjssto8kw77g11gk4rwur575q'
});
map.on('load', function() {
// Add a layer showing the state polygons.
map.addLayer({
'id': 'kazimierz-tileset',
'type': 'fill',
'source': {
"type": "Feature",
"properties": {
"Street": "Świętego Wawrzyńca",
"Probability": "13%"
},
"geometry": {
"coordinates": [
[19.944511, 50.049316],
[19.94617, 50.049681],
[19.946307, 50.049719],
[19.947699, 50.050025],
[19.948851, 50.050282],
[19.949689, 50.050456],
[19.951076, 50.05076],
[19.951401, 50.050831]
],
"type": "LineString"
}
}
});
// When a click event occurs on a feature in the states layer, open a popup
at the
// location of the click, with description HTML from its properties.
map.on('click', 'kazimierz-tileset', function(e) {
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(e.features[0].properties.Street)
.addTo(map);
});
// Change the cursor to a pointer when the mouse is over the states layer.
map.on('mouseenter', 'kazimierz-tileset', function() {
map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
map.on('mouseleave', 'kazimierz-tileset', function() {
map.getCanvas().style.cursor = '';
});
});
</script>
</div> Наконец, в вашем примере вы добавляете слой. Но у вас уже есть этот слой, добавленный с тем же именем в созданном вами стиле. Вам не нужно добавлять его снова, иначе вы получите Error: Layer with id "kazimierz-tileset" already exists on this map , поскольку оно естественным образом извлекается непосредственно из стиля. Обязательно переименуйте слой или удалите addLayer .
Комментарии:
1. Привет, большое тебе спасибо! Я понимаю свою ошибку, но еще один вопрос к вам: я хочу, чтобы в моем всплывающем окне отображались два свойства: название улицы, поэтому его: e.особенности[0].свойства. Улица и вероятность, и мой код прямо сейчас выглядит следующим образом: .setHTML(например,features[0].свойства. Улица ‘ ‘ e.характеристики[0].свойства. Вероятность). Но это не работает. Во всплывающем окне отображается название улицы, но после этого оно снова «не определено», но я его определил. Вы знаете, как это исправить?
2. Кроме того, я не совсем понимаю функцию map.addlayer. Идентификатор слоя — kazimierz-tileset-2, а его источником является набор листов с именем «Kazimierz-_tileset», в котором находятся все данные, которые необходимо включить во всплывающее окно. (имя и вероятность). Если я удалю этот слой, у меня не будет данных для рисования. Можете ли вы объяснить, как мне тогда это сделать? Извините, если я доставляю хлопоты, но мне действительно нужна ваша помощь!