React Leaflet-如何使用圆形标记渲染自定义图像 [英] React Leaflet - How to render custom image using Circle Markers

问题描述

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

I am trying to generate a custom image for my CircleMarkers. I am not sure how to do it. I am using CircleMarkers here because I have almost 20K+ markers and need them for performance. I can't quite figure out how to pass a custom image to the CircleMarker. Any help on this is much appreciated.

推荐答案

无法直接执行此操作.leaflet.js或react-leaflet库的API不会响应您的请求.您可以通过在CircleMarker中放置一个额外的标记子组件并删除其不透明度来实现此目的，如果您不希望看到该圆圈.您可以使用外部网址或本地文件(例如png，svg等)设置标记图标.然后，您就可以执行所需的操作.如果您需要一个示例，请看一下:

There is no way to do this directly. APIs of leaflet.js or react-leaflet libraries do not respond to your request. You can do this by placing an extra marker child component in CircleMarker and removing its opacity if you don't want the circle to be seen. You can set your marker icon with an external url or a local file such as png, svg etc. Then you will be able to do what you want. If you need an example please have a look at that:

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

您也可以在其他文件中定义它.但是请不要忘记导出它！如果您有类似这些选项是什么?"之类的问题，您也可以尝试从此处.最后，您将获得一个自定义标记图标.只需将一个道具传递到您的Marker组件，如下所示.

You can define this in a different file as well. But please do not forget to export it! If you have a question like "What are these options?" You can also try to understand from here. And finally you have a custom marker icon. Just pass a prop to your Marker component like below.

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

我希望这会有所帮助.如果您有任何问题，请告诉我，我们将尝试解决.

I hope that will be useful. Please let me know if you have a problem and we will try to fix it.

这篇关于React Leaflet-如何使用圆形标记渲染自定义图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！