用于GeoJSON的自定义Leaflet Renderer

Question

I want to render GeoJSON differently than provided by Leaflet by default. Unfortunately changing the style() function will not suffice as I need greater control over the vector graphics being created.

What is the idiomatic way of doing this? I reckon I can reuse lots of parts of the default SVG renderer found in src/layers/vector/SVG.js . I would however like to only replace it for one GeoJSON layer / one FeatureGroup. As none of these inherit from Path , this does not seem possible.

I tried extending the SVG class in a very basic way:

import {SVG} from 'leaflet/src/layer/vector/SVG'

export default class CustomSVG extends SVG {
  _updatePoly (layer, closed) {
    console.log('Custom renderer in action')
    super._updatePoly(layer, closed)
  }
}

and then set it as the renderer while initializing Leaflet, but this fails with a TypeError: max2 is undefined (it is an unhandled promise rejection which stems from me using react-leaflet ).

What is it I'm missing?

Answer 1

I read the documentation again and I seem to have missed this bit about the GeoJSON options :

style : A Function defining the Path options for styling GeoJSON lines and polygons, called internally when data is added. The default value is to not override any defaults:

 function (geoJsonFeature) { return {} } 

The path options on the other hand take a renderer, which I can use to override the rendering of this particular GeoJSON layer only. Hope this helps anybody else!