我使用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]
});
因此,一个标记在顶部有一个导入。
说我想导入几个图标,那么是否必须在react组件的顶部分别导入每个.png
文件?还是有办法只导入目录,然后仅将路径放置到适当的图标文件?
答案 0 :(得分:0)
为此,可以利用称为dynamic require的webpack功能,例如,使用 expression :
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='© <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>
);
};
这里是a demo
答案 1 :(得分:0)
您可以这样做:
if ( feature.properties.name === "NONE") {
var shadow = "Project/data/images/NONE.png";
} else {
var shadow = "Project/data/images/shadow.png";
}
var flag = L.icon({
shadowUrl: shadow,
iconUrl: `Project/data/images/${feature.properties.name }.png`,