значок маркера не отображается в Leaflet - PullRequest
Новая
       7

значок маркера не отображается в Leaflet

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

Я собрал очень простую демонстрацию React / Leaflet, но значок маркера вообще не отображается. Полный рабочий код здесь .

Вот что у меня есть в моем методе componentDidMount: 

componentDidMount() {
this.map = L.map("map-id", {
  center: [37.98, 23.72],
  zoom: 12,
  zoomControl: true
});

const mapboxAccessToken =
  "pk.eyJ1IjoibXBlcmRpa2VhcyIsImEiOiJjazZpMjZjMW4wOXJzM2ttc2hrcTJrNG9nIn0.naHhlYnc4czWUjX0-icY7Q";
L.tileLayer(
  "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
  {
    attribution:
      'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 25,
    id: "mapbox/streets-v11",
    accessToken: mapboxAccessToken
  }
).addTo(this.map);

L.marker([37.98, 23.72])
  .addTo(this.map)
  .bindPopup("a marker")
  .openPopup();
}

По сути, всплывающее окно видно, но не значок маркера сам. То есть вот что я вижу:

enter image description here

Ответы [ 3 ]

2 голосов
/ 11 февраля 2020

Попробуйте добавить значок: 

const myIcon = L.icon({
   iconUrl: 'myIcon.png',
   // ...
});

L.marker([37.98, 23.72], {icon: myIcon})
  .addTo(this.map)

Возможно, у вас есть проблемы со стандартным: https://leafletjs.com/reference-1.6.0.html#icon -default

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

Просто для справки, это связано с тем, что веб-пакет пытается включить файл изображения «Значок маркера», указанный в брошюре CSS, в качестве ресурса c в другой папке и, возможно, переименовать файл (например, для отпечатков пальцев); все это мешает алгоритму Leaflet, который использует это изображение только в качестве указателя на его действительную папку CSS images, которая, следовательно, может полностью отсутствовать после этапа сборки веб-пакета.

См. подробности в https://github.com/Leaflet/Leaflet/issues/4968

Я специально создал плагин Leaflet для решения этой проблемы: https://github.com/ghybs/leaflet-defaulticon-compatibility

Извлечение всех параметров значка листовки по умолчанию из CSS, в частности URL-адреса всех значков изображений, чтобы улучшить совместимость с компоновщиками и платформами, которые изменяют URL-адреса в CSS.

К сожалению, он все равно не будет работать в CodeSandbox (или даже в StackBlitz), поскольку последний не работает обрабатывать эти активы c. Это видно, просто пытаясь использовать Leaflet Layers Control, который использует очень простое CSS фоновое изображение, которое также отсутствует в CodeSandbox.

Но все должно быть хорошо в вашей собственной среде.

демо в CodeSandbox: https://codesandbox.io/s/elegant-swirles-yzsql

и в StackBlitz (те же данные c выпуск активов): https://stackblitz.com/edit/react-vqgtxd?file=index.js

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

Вот что у меня сработало в итоге (я в пачке): 

const defaultIcon = new L.icon({
  iconUrl: require('../node_modules/leaflet/dist/images/marker-icon.png'); // your path may vary ...
  iconSize: [8, 8],
  iconAnchor: [2, 2],
  popupAnchor: [0, -2]
});

generateMarkers().forEach( c=> {
   L.marker(c, {icon: defaultIcon}).addTo(this.map).bindPopup('a marker; yeah').openPopup();
}
...