0

我正在将代码库升级到 React，但无法理解为什么传单和传单-dvf 不起作用 -ChoroplethDataLayer显示没有。

所以实际的组件代码如下：

import React, {Component} from 'react' // v15.6.1
import { render, findDOMNode} from 'react-dom' // v15.6.1
import 'leaflet' // v1.2.0
// leaflet.css is added in HTML, because of problems with webpack and *.png paths

import 'leaflet-dvf' // v0.3.1
import 'leaflet-dvf/dist/css/dvf.css' // v0.3.1
import './countryData.js'
import { provider } from 'leaflet-providers' //v1.1.17

class Map extends Component {
    componentDidMount() {
        this.drawMap()
    }

    drawMap() {
        // Initialize map on component rendered <div>
        let map = L.map(findDOMNode(this)).setView([this.props.lat, this.props.lng], this.props.zoom);

        // Show legend box
        let legendControl = new L.Control.Legend();
        legendControl.addTo(map);

        // Add the Stamen toner tiles as a base layer
        let tileLayer = L.tileLayer.provider('Stamen.TonerLite', {
            minZoom: 2,
            zIndex: 1
        })
        tileLayer.addTo(map);


        // Options and data are calculated (the same as in old code base - working)
        let options = this.props.options;
        let data = this.props.datum;

        // Show Chropleth map in overlayPane
        var baseLayer = new L.ChoroplethDataLayer(data, options);
        baseLayer.addTo(map);

    }

    render() {
        const mapStyle = {
            height: this.props.height, // 500px
            width: this.props.width, // 500px
        }

        return (
            <div style={mapStyle}></div>
        )
    }
}

您可以在下图中看到：第一的

Legend正确显示，但没有显示Choropleth图层，但是它是生成的，您可以在这张图片中看到它leaflet-overlay-pane

第二

如果我使用 class 从 DOM div 中删除leflet-shadow-pane，leaflet-tile-pane并从中删除leaflet-paneclass leaflet-overtlay-pane，如下图所示：

在此处输入图像描述

然后我可以看到该Choropleth层已生成并且可见，如本例所示：

在此处输入图像描述

所以我有以下问题：

1）如何使Choropleth可见且尺寸合适？（baseLayer.bringToFront() 和 zIndex 没有帮助）

2）如何正确导入leaflet和leaflet-dvf打包（它们都在“L”命名空间中）？（现在我正在做import "leaflet"和import "leaflet-dvf"）

3) 如何正确构建和导入contryData.js用于查找和渲染国家/城市/等的文件。该文件位于github 的 leaflet-dvf/src/data 中？（现在我复制了这个文件并在顶部添加了import "leaflet"）。ES6/React 中的最佳实践是什么？

4）是否可以使用react-leaflet并leaflet-dvf提供完整的示例？

4

0 回答 0