Я работаю с набором данных с более чем 2000
координатами маркера.
По соображениям производительности я решил добавить эти маркеры на холст, используя опору preferCanvas
, и она отлично работает с CircleMarker
, который является единственным маркером в категории векторных слоев.
Но можно ли изменить форму CircleMarker
?
Вот фрагмент кода:
const HeatMap = ({ markers }) => {
return (
<Map
center={[50.3785, 14.9706]}
zoom={1}
preferCanvas={true}
style={{ height: "400px", marginTop: "30px", marginBottom: "30px" }}
>
<TileLayer url={map_url} />
{ markers.map((i) => (
<CircleMarker
key={i.id}
center={[i.lat, i.lon]}
stroke={false}
radius={4}
fillOpacity={0.8}
>
<Tooltip>{i.details}</Tooltip>
</CircleMarker>
))}
</Map>
);
};
UPDATE:
Итак, я решил создать Custom Компонент-маркер, расширяющий react-leaflet
компонент Path
, например CircleMarker
:
import {
CircleMarker as LeafletCircleMarker,
Canvas as LeafletCanvas,
} from "leaflet";
import { withLeaflet, Path } from "react-leaflet";
const myRenderer = (layer) => LeafletCanvas({ padding: 0.5 });
class CustomMarker extends Path {
createLeafletElement(props) {
const enhancedProps = {
...props,
renderer: myRenderer
};
const el = new LeafletCircleMarker(
props.center,
this.getOptions(enhancedProps)
);
this.contextValue = { ...props.leaflet, popupContainer: el };
debugger;
return el;
}
updateLeafletElement(fromProps, toProps) {
if (toProps.center !== fromProps.center) {
this.leafletElement.setLatLng(toProps.center);
}
if (toProps.radius !== fromProps.radius) {
this.leafletElement.setRadius(toProps.radius);
}
}
}
export default withLeaflet(CustomMarker);
, и я подумал, что сначала я должен использовать базовый c Leaflet
рендерер, например Canvas
, но я получаю Uncaught Error: The provided object is not a Layer.
Кто-нибудь еще что-то подобное реализовал?