Question

我正在尝试将React，Mapbox和d3放在一起。 React用于DOM操作，Mapbox用于地图渲染，d3用于在地图上绘制。当我到达可以在地图上绘制线条的阶段时，我想在用户决定缩放或在地图上移动时重新绘制线条。我很困惑，因为我不知道确切地如何实现此事件侦听器。到目前为止，这是我的代码：

import React, { Component } from 'react';
import MapboxGl from 'mapbox-gl/dist/mapbox-gl.js';
import MapPoints from './MapPoints.jsx';
import { geoMercator, geoPath, geoTransform, geoProjection } from 'd3-geo';
import './App.css';
import 'mapbox-gl/dist/mapbox-gl.css';

export default class Map extends Component {
    constructor(props) {
        super(props);
        this.d3Draw = [];
        this.box_measures = {
            bottom: 244,
            height: 220,
            left: 0,
            right: 1321,
            top: 24,
            width: 1321,
            x: 0,
            y: 24
        };
    }
    componentDidMount() {
        MapboxGl.accessToken =
            'pk.eyJ1Ijoiam9zZWNvdG8iLCJhIjoiY2l2OGZxZWNuMDAxODJ6cGdhcGFuN2IyaCJ9.7szLs0lc_2EjX6g21HI_Kg';

        this.map = new MapboxGl.Map({
            container: this.mapContainer,
            style: 'mapbox://styles/mapbox/streets-v9'
        });

        this.map.jumpTo({ center: [13.29, 52.51], zoom: 10 });
        this.map.addControl(new MapboxGl.NavigationControl());
        this.box_measures = document.getElementsByClassName('mapboxgl-canvas')[0].getBoundingClientRect();
    }

    componentWillUnmount() {
        this.map.remove();
    }

    componentDidUpdate() {
        this.d3Draw = this.props.dataPoints.map(x =>
            this.map.project(new MapboxGl.LngLat(x.geometry.coordinates[0], x.geometry.coordinates[1]))
        );
    }

    render() {
        const style = {
            position: 'absolute',
            top: 100,
            bottom: 0,
            width: '80%'
        };

        return (
            <div>
                <div className="map" style={style} ref={el => (this.mapContainer = el)} />
                <MapPoints drawPoints={this.d3Draw} measures={this.box_measures} />
            </div>
        );
    }
}

我们将非常感谢您的帮助！

调整地图大小时重新渲染点（地图框+ react + d3）

0 个答案: