React Leaflet - 如何使用圆形标记渲染自定义图像

Question

我正在尝试为我的 CircleMarkers 生成自定义图像。我不知道该怎么做。我在这里使用 CircleMarkers，因为我有将近 20K+ 标记并且需要它们来提高性能。我不太清楚如何将自定义图像传递给 CircleMarker。非常感谢对此的任何帮助。

Answer 1

无法直接执行此操作。 leaflet.js 或 react-leaflet 库的 API 未响应您的请求。如果您不想看到圆圈，可以通过在 CircleMarker 中放置一个额外的标记子组件并移除其不透明度来实现。您可以使用外部 url 或本地文件（如 png、svg 等）设置您的标记图标。然后您就可以做您想做的事了。如果您需要示例，请查看：

import L from 'leaflet';

const duckIcon = new L.Icon({
  iconUrl: 'https://i.ya-webdesign.com/images/sample-png-image-download-3.png',
  iconRetinaUrl: 'https://i.ya-webdesign.com/images/sample-png-image-download-3.png',
  iconAnchor: new L.Point(0, 0),
  popupAnchor: new L.Point(16, 0),
  shadowUrl: null,
  shadowSize: null,
  shadowAnchor: null,
  iconSize: new L.Point(32, 32),
  className: 'leaflet-div-icon'
});

您也可以在不同的文件中定义它。但请不要忘记导出它！如果您有类似“这些选项是什么？”的问题您也可以尝试从 here。最后你有一个自定义标记图标。只需将道具传递给您的标记组件，如下所示。

<CircleMarker
  center={{ lat: markerPosition[0], lng: markerPosition[1] }}
  opacity={0}>
  <Marker position={markerPosition} icon={duckIcon}>
    <Popup/>
  </Marker>
</CircleMarker>

希望对您有所帮助。如果您遇到问题，请告诉我，我们会尽力解决。

React Leaflet - 如何使用圆形标记渲染自定义图像

React Leaflet - How to render custom image using Circle Markers

leaflet

reactjs

react-leaflet