React Leaflet - How to render custom image using Circle Markers

问题

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.

回答1:

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

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.

来源：https://stackoverflow.com/questions/62743905/react-leaflet-how-to-render-custom-image-using-circle-markers

标签

reactjs

leaflet

react-leaflet