Маркер GeoJSON не отображается на моей карте leafletjs

Question

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

const dummyGeoJson = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {},
      geometry: {
        type: "Point",
        coordinates: [16.959285736083984, 52.40472293138462]
      }
    }
  ]
};

class EventMap extends React.Component {
  componentDidMount() {
    this.map = L.map("map", {
      center: [51.9194, 19.1451],
      zoom: 6
    });

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      maxZoom: 20
    }).addTo(this.map);
    var geoJsonLayer = L.geoJSON().addTo(this.map);
    geoJsonLayer.addData(dummyGeoJson);
  }

  render() {
    return <Wrapper width="100%" height="800px" id="map" />;
  }
}

Из того, что я прочитал в официальном учебнике по листовке, этот код должен создать новый слой geojson и создать маркер в позиции, на которую ссылается geojson, но на самом деле единственное, что отображается, это мой слой листов.

Answer 1

Добро пожаловать в ТАК!

Наиболее вероятная причина в том, что вы связываете свое приложение (обычно с веб-пакетом), но при сборке пропускаются изображения значков Leaflet по умолчанию.

Итак, ваш Маркер есть, но вы его не видите, потому что отсутствует изображение значка.

Простой способ отладки - вместо этого использовать другую иконку, как предложено в ответе kboul , или даже проще, используя CircleMarker.

Затем для решения проблемы отсутствия движка сборки для обработки изображений значков по умолчанию см. Leaflet # 4968 :

• явно импортирует / требует изображения значков Leaflet по умолчанию и изменяет параметры L.Icon.Default, чтобы использовать новые импортированные пути
• или используйте плагин листовка-defaulticon-совместимость (я автор).

Answer 2

Вам нужно использовать функцию pointToLayer в объекте параметров GeoJSON при создании слоя GeoJSON, например:

componentDidMount() {
    const map = L.map("map", {
      center: [51.9194, 19.1451],
      zoom: 6
    });

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      maxZoom: 20
    }).addTo(map);

    L.geoJSON(dummyGeoJson, {
      pointToLayer: (feature, latlng) => {
        return L.marker(latlng, { icon: customMarker });
      }
    }).addTo(map);
}

Затем можно передать переменную customMarker, чтобы определить некоторые параметры, чтобы маркер отображался в пользовательском интерфейсе

Демо