如何更改 react-map-gl 图标？答案

【问题标题】：How can I change react-map-gl icons?如何更改 react-map-gl 图标？
【发布时间】：2019-07-17 01:24:00
【问题描述】：

我正在尝试自定义我的 Web 应用程序的地图，我正在使用 react-map-gl（Uber 开源代码）我尝试更改地图的图标引脚，但我不知道字符串代码 ICON 的含义?

从 'react' 导入 React, { PureComponent };

const ICON = M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3 c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9 C20.1,15.8,20.2,15.8,20.2,15.7z;

const pinStyle = { 光标：'指针'，填充：'#d00'，中风：“无” };

导出默认类 CityPin 扩展 PureComponent {

渲染（）{ const { size = 20, onClick } = this.props;

return (
  <svg
    height={size}
    viewBox="0 0 24 24"
    style={{ ...pinStyle, transform: `translate(${-size / 2}px,${-size}px)` }}
    onClick={onClick}
  >
    <path d={ICON} />
  </svg>
);

} }

ICON const 中的所有这些数字是什么意思？如何根据此代码更改样式？请帮忙，谢谢:)

【问题讨论】：

标签： user-interface icons react-map-gl

【解决方案1】：

ICON 常量的所有乱码都是SVG Path notation，实际上是在绘制您当前的符号。如果你想了解更多，这里是another resource。甚至有一些网站可以帮助您构建自己的 SVG 路径字符串，Option 1 Option 2，并且在网络上搜索会找到更多。

请注意，一旦获得所需的符号，您可能需要更新视图框编号以适应新事物。否则，它会在这些维度上切断符号。

为了解决这个问题，我的示例更新是：

const ICON = 'm 10 35 l 15 30 l 15 -30 A 20 20 180 1 0 10 35 z'

带有viewbox in the svg tag 的：

viewBox="-8 0 55 65"

编辑:: 您还可以使用其他答案中解释的任何图像。有一个article on using custom images at Medium 有很好的解释和更多细节。

【讨论】：

【解决方案2】：

您提到您正在使用 react-map-gl，因此您可以使用 Marker 组件来更改您的图标引脚。

您是否希望将特定图像用于您的图标，例如 .png 文件？如果是这样，将该图像添加到名为“public”的目录中。然后，在您创建标记的地图中，您可以显示此特定图像。

例如，如果您有一个名为 mapicon.png 的图像，您可以将其添加到您的公用文件夹中。然后，当您创建标记时，您可以执行以下操作。

import ReactMapGL, {Marker} from 'react-map-gl';


<Marker key={} latitude={} longitude={}>
    <img
      src="mapicon.png"
      alt="map icon"
     />
</Marker>

据我了解，该字符串只是对图标图像存储位置的引用。希望这可以帮助！

【讨论】：

【解决方案3】：

您可以使用 SVG 文件创建自定义地图标记。如果您使用的是 create-react-app，则可以将 svg 图标作为组件导入，如下所示：

import { ReactComponent as Pin } from '../../images/map-marker-icon.svg';

然后，在上面的示例代码中，您可以替换

<path d={ICON} />

使用这个组件。这是一个例子：

export default class MapPin extends PureComponent {
  render() {
      <Marker  longitude={this.props.longitude} latitude=this.props.latitude}>
        <svg 
             onClick={() => onClick()}
             viewBox="0 0 60 100"
             enable-background="new 0 0 60 100">
          <Pin/>
        </svg>
      </Marker>
    ));
  }
}

【讨论】：