创建自定义 GeoJSON 组件的好方法是什么答案

【问题标题】：What is the good way to create custom GeoJSON component创建自定义 GeoJSON 组件的好方法是什么
【发布时间】：2019-06-25 09:15:19
【问题描述】：

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

使用 React 和 React-Leaflet 编写（最后一个版本）该代码在 Map 组件中编写时有效，但我想导入/导出它以拆分代码

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 不是构造函数”

函数和方法（此处未显示）有效，我只需要帮助来进行正确的继承欢迎其他解决方案

感谢您的帮助

【问题讨论】：

标签： javascript reactjs leaflet geojson react-leaflet

【解决方案1】：

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

您可以使用 Leaflet 自己的 pre-ES6 类继承方案，如Leaflet class theory tutorial 中所述：

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

【讨论】：