我在这个头上挠头已经太久了。我有最简单的React App,该应用程序将一些数据作为道具传递给WhateverMap(之所以如此,是因为我一直在尝试许多不同的Map库)。
但是,当我尝试使用ScatterplotLayer在Deck.GL上绘制数据点时,我根本看不到它们在渲染的地图上。
根据React Developer Tools的说法,ScatterplotLayer组件确实收到了我的数据点。
我希望在柏林火车轨道的特定部分看到一些标记。
import React, { Component } from 'react';
import Header from './Header';
import WhateverMap from './Map';
import Table from './Table';
class App extends Component {
state = {
// Trip along the Ringbahn
data: [
{'timestamp': Date.now()-10000, 'coordinates': [52.536131,13.447444], 'temperature': 19},
{'timestamp': Date.now()-9000, 'coordinates': [52.538221,13.44376], 'temperature': 20},
{'timestamp': Date.now()-8000, 'coordinates': [52.540247,13.43899], 'temperature': 21},
{'timestamp': Date.now()-7000, 'coordinates': [52.541751,13.43513], 'temperature': 22},
{'timestamp': Date.now()-6000, 'coordinates': [52.54264,13.433692], 'temperature': 23},
{'timestamp': Date.now()-5000, 'coordinates': [52.543007,13.431339], 'temperature': 24},
{'timestamp': Date.now()-4000, 'coordinates': [52.543755,13.428731], 'temperature': 25},
{'timestamp': Date.now()-3000, 'coordinates': [52.544295,13.427207], 'temperature': 27}
]
};
render() {
return (
<div className="container">
<Header />
<WhateverMap data={this.state.data} />
<Table data={this.state.data} />
</div>
);
}
}
export default App;
无论地图:
import React, { PureComponent } from 'react';
import MapGL from 'react-map-gl';
import DeckGL, { ScatterplotLayer } from 'deck.gl';
const mapbox_token = ''
const mapConfig = {
center: [52.540875, 13.438545],
zoom: 13
};
class WhateverMap extends PureComponent {
constructor(props) {
super(props);
this.state = {
viewport: {
width: 960,
height: 600,
latitude: mapConfig.center[0],
longitude: mapConfig.center[1],
zoom: mapConfig.zoom,
startDragLngLat: mapConfig.center,
},
};
this.onChangeViewport = this.onChangeViewport.bind(this);
}
onChangeViewport(viewport) {
this.setState({
viewport: { ...this.state.viewport, ...viewport }
});
}
initialize(gl) {
gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE, gl.ONE_MINUS_DST_ALPHA, gl.ONE);
gl.blendEquation(gl.FUNC_ADD);
}
render() {
const { viewport } = this.state;
const { data } = this.props;
const plot_position_layer = new ScatterplotLayer({
id: 'scatterplot-layer',
data,
pickable: true,
opacity: 0.8,
radiusScale: 6,
radiusMinPixels: 1,
radiusMaxPixels: 100,
getPosition: d => d.coordinates,
})
return (
<div className="reactmapgldeckgl">
<MapGL
{...viewport}
mapboxApiAccessToken={mapbox_token}
mapStyle="mapbox://styles/mapbox/dark-v9"
onChangeViewport={this.onChangeViewport}
>
<DeckGL
{...viewport}
onWebGLInitialized={this.initialize}
layers={[plot_position_layer]}
/>
</MapGL>
</div>
);
}
}
export default WhateverMap;
最佳答案
首先,答案。您的代码似乎是正确的,但是,通过一些调整似乎可以解决该错误。
const plot_position_layer = new ScatterplotLayer({
id: 'scatterplot-layer',
data,
pickable: true,
opacity: 0.8,
radiusScale: 30, // make the dots visible or darker background
radiusMinPixels: 15, // make the dots visible or darker background
radiusMaxPixels: 100,
getPosition: d => [d.coordinates[1], d.coordinates[0]], // -> Essential Change here
getColor: d => [255, 255, 255], // make the dots visible or darker background
})
现在,本质上已经改变的是
getPosition: d => [d.coordinates[1], d.coordinates[0]]
奇怪的是,期望getPosition函数返回一个数组,该数组的第一个元素为经度而不是纬度,这就是点超出范围的原因。
看看第11行的示例here。
// Source data CSV
const DATA_URL =
'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/scatterplot/manhattan.json'; // eslint-disable-line
export const INITIAL_VIEW_STATE = {
longitude: -74, //remember, longitude starts with 74
latitude: 40.7,
zoom: 11,
maxZoom: 16,
pitch: 0,
bearing: 0
};
并且
DATA_URL
读为[
[-73.986022,40.730743,2], // the first element is longitude
[-73.984293,40.729468,1],
[-73.987752,40.732017,1],
[-73.986887,40.730105,2],
...
]
希望这可以帮助