Импорт нескольких пользовательских маркеров в Leaflet - PullRequest
Новая
       8

Импорт нескольких пользовательских маркеров в Leaflet

0 голосов
/ 26 августа 2018

Я использую Leaflet, чтобы представить некоторые точки на карте.Однако я хочу разместить разные маркеры в зависимости от некоторых параметров.Вопрос заключается в следующем: можно ли импортировать в React весь каталог моих пользовательских маркеров (файлы .png)?В настоящее время это выглядит так: 

import icon from 'leaflet/dist/images/marker-icon.png';

А затем 

render() {
  const position = [54.40, 18.60];
  let DefaultIcon = L.icon({
  iconUrl: icon,
  shadowUrl: iconShadow,
  iconSize: [24, 36],
  iconAnchor: [12, 36],
  popupAnchor: [0, -25]
});

Так что для одного маркера есть один импорт вверху.

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

1 Ответ

0 голосов
/ 27 ноября 2018

В этом отношении можно использовать функцию веб-пакета под названием динамическое требование , например, с выражением : 

const icon = L.icon({
     iconUrl: require(`../public/custom-icons/${item.iconName}`),
});

изображения значков будут динамически загружаться с /public/custom-icons/ папка и входит в комплект

Пример 

const MapExample = () => {
  const data = [
    { position: { lat: -33.8478796, lng: 150.7918932 }, title: "Sydney", "iconName" : "leaf-red.png" },
    { position: { lat: -31.954654, lng: 115.8399823 }, title: "Perth ", "iconName" : "leaf-green.png" }
  ];

  return (
    <Map center={{ lat: -24.9929159, lng: 115.2297986 }} zoom={4}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
      {data.map((item, idx) => {
        const icon = L.icon({
          iconUrl: require(`../public/custom-icons/${item.iconName}`),
          iconSize: [24, 36],
          iconAnchor: [12, 36],
          popupAnchor: [0, -25]
        });

        return (
          <Marker key={idx} icon={icon} position={item.position}>
            <Popup>{item.title}</Popup>
          </Marker>
        );
      })}
    </Map>
  );
};

Вот демо

...