通过使用字体真棒自定义反应传单标记图标

Question

这更像是一个理论问题，而不是一个问题。

如何使用字体真棒图标作为反应传单地图标记图标？

我想有这样一个图标选择器控件来分配(自定义(我在地图上获得的每个标记图标。顺便说一下，我正在使用Map and Marker的JSX组件。

有可能做到这一点吗？

有人有关于这个的样本笔吗？我真的用谷歌搜索过它，但找不到任何插件，但找不到一个仅适用于 Leaflet 1.0 的字体真棒插件。

所以任何想法都值得赞赏。

提前谢谢。

Answer 1

由于某些原因，代码未格式化。查看代码沙盒上的代码

以下是使用字体真棒图标作为标记的方法。

1. 将字体很棒的 CDN 添加到您的index.html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

2. 使用divIcon和react-dom/server中的renderToStaticMarkup来生成标记的图标。 并将这divIcon作为icon道具传递给Marker。

   import React, { Component } from 'react';
   import ReactDOM from 'react-dom';
   import { renderToStaticMarkup } from 'react-dom/server';
   import { divIcon } from 'leaflet';
   import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
   import './styles.css';
   class App extends Component {
   state = {
   lat: 51.505,
   lng: -0.091,
   zoom: 13,
   };
   render() {
   const position = [this.state.lat, this.state.lng];
   const iconMarkup = renderToStaticMarkup(<i className=" fa fa-map-marker-alt fa-3x" />);
   const customMarkerIcon = divIcon({
   html: iconMarkup,
   });
   return (
   <Map center={position} zoom={this.state.zoom}>
   <TileLayer
   attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
   url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
   />
   <Marker position={position} icon={customMarkerIcon}>
   <Popup>
   A pretty CSS3 popup. <br /> Easily customizable.
   </Popup>
   </Marker>
   </Map>
   );
   }
   }
   const rootElement = document.getElementById('root');
   ReactDOM.render(<App />, rootElement);
   

3. 通过将以下类添加到 css 文件来覆盖divIcon 默认样式

   .leaflet-div-icon {
   background: transparent;
   border: none;
   }  
   

   • 这是一个相同的工作示例：
     https://codesandbox.io/s/4ry180jl34

Answer 2

对于那些已经使用Fontawesome(FontAwesomeIcon(的React组件的人来说，有一个解决方案不需要再次通过CDN导入。它使用与 Murli 答案相同的原理，但不是添加<i className=" fa fa-map-marker-alt fa-3x" />，而是可以将 FontAwesomeIcon 组件转换为 html 并将其传递到divIcon 的 html 属性中。它看起来像这样(改编了接受答案的示例(：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import Leaflet from 'leaflet'
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import './styles.css';
// FontAwesome requirements
import { faUserAstronaut } from '@fortawesome/free-solid-svg-icons'
library.add(faUserAstronaut)
class App extends Component {
state = {
lat: 51.505,
lng: -0.091,
zoom: 13,
};
render() {
const position = [this.state.lat, this.state.lng];
const iconHTML = ReactDOMServer.renderToString(<FontAwesomeIcon icon='user-astronaut' />)
const customMarkerIcon = new Leaflet.DivIcon({
html: iconHTML,
});
return (
<Map center={position} zoom={this.state.zoom}>
<TileLayer
attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
/>
<Marker position={position} icon={customMarkerIcon}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</Map>
);
}
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

Answer 3

创建divIcon并将其插入icon属性中：

// marker-icons.js
import L from 'leaflet';
const factory = new L.divIcon({
className: '',
iconAnchor: [12, 25],
labelAnchor: [-6, 0],
popupAnchor: [0, -15],
iconSize: [25, 41],
html: `<span class="fa fa-industry"></span>`
});
export default { factory };

在组件文件中使用图标：

// component.js
import { factory } from './marker-icons';
<MapContainer center={[12.23432, 87.234]} zoom={6} scrollWheelZoom={false}>
<TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>
<Marker position={45.4534, 23.43]} icon={factory}>
<Popup>Help text</Popup>
</Marker>
</MapContainer>