javascript - 在Leaflet中导入多个自定义标记(Multiple custom markers import in Leaflet)

Question

I use Leaflet to present some points on map.

(我使用Leaflet在地图上显示一些点。)

However, I want to place different marker depending on some parameters.

(但是，我想根据某些参数放置不同的标记。)

The question is: is it possible to import in React whole directory of my custom markers (.png files)?

(问题是：是否可以在React的自定义标记的整个目录（.png文件）中导入？)

Currently it looks like this:

(当前看起来像这样：)

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

And then

(然后)

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

So for one marker there's one import at the top.

(因此，对于一个标记，在顶部有一个导入。)

Say I want to import few icons, so do I have to import every single .png file separately at the top of my react component?

(假设我要导入几个图标，那么是否必须在react组件顶部分别导入每个.png文件？)

Or is there a way to just import a directory and then place only path to appropriate icon file?

(还是有一种方法可以只导入目录，然后仅将路径放置到适当的图标文件？)

  ask by icelandico translate from so

Answer 1

For that matter a webpack feature called dynamic require could be utilized, for example with expression :

(为此，可以使用称为动态需求的webpack功能，例如，带有expression ：)

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

icons images dynamically get loaded from /public/custom-icons/ folder and included in bundle

(图标图像从/public/custom-icons/文件夹动态加载并包含在捆绑包中)

Example

(例)

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>
  );
};

Here is a demo

(这是一个演示)