创建自定义GeoJSON组件的好方法是什么 [英] What is the good way to create custom GeoJSON component

问题描述

我需要帮助以从React-Leaflet创建GeoJSON自定义组件

I Need help to create GeoJSON custom component from React-Leaflet

使用React和React-Leaflet编写(均为最新版本)该代码在Map组件中写入时有效，但我想将其导入/导出以拆分代码

Write with React and React-Leaflet (last version both) The code works when write in the Map component, but I want to import/export it to split code

import React from 'react';
import { withLeaflet, GeoJSON } from 'react-leaflet'
import L from 'leaflet'


class CustomGesJSON extends GeoJSON {

    getStyle(feature) {
        // some code
    }

    pointToLayer(feature, latlng) {
        // some code
    }

    onEachFeature(feature, layer) {
        // some code
    }

    createLeafletElement(opts) {
        const CustomGesJSON = L.geoJSON.extend({

            onAdd: (map) => {
                this.getStyle = this.getStyle.bind(this);
                this.pointToLayer = this.pointToLayer.bind(this);
                this.onEachFeature = this.onEachFeature.bind(this);

                return this ;
            }
        });
        return new CustomGesJSON({ data: this.props.data });
    }


} 

function testlog(txt) {
    // some code
}

export default withLeaflet(CustomGesJSON);

我收到一条错误消息"GeoJSON不是构造函数"

I've got a error message "GeoJSON is not a constructor"

函数和方法(此处未显示)有效，我只需要帮助即可进行适当的继承欢迎使用其他解决方案

Function and method (not show here) works, I just need help to make a proper inheritance Other solution are welcome to

感谢您的帮助

推荐答案

"react-leaflet"导出的"GeoJSON"对象可能不是ES6类，而是Leaflet L.GeoJSON类".

It is probable the "GeoJSON" object exported by "react-leaflet" is not an ES6 class, but the Leaflet L.GeoJSON "class".

您可以使用Leaflet自己的ES6之前的类继承方案，如传单类理论教程:

You can use Leaflet own pre-ES6 class inheritance scheme, as described in the Leaflet class theory tutorial:

const MyCustomClass = GeoJSON.extend({
  options: {
    onEachFeature: myCustomDefaultFunction
    // etc.
  }
});
export default MyCustomClass;

这篇关于创建自定义GeoJSON组件的好方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！