javascript - 如何使用 Deck.gl 显示多个 PathLayer
问题描述
我对 React Js 和 DeckGL 不太熟悉。我正在尝试在交互式地图上显示 PathLayer 类的几个对象。单个对象显示没有问题,但是当有多个时,它不起作用:
const token = global.REACT_APP_TOKEN;
const initialViewState = {
longitude: 37.6205569,
latitude: 55.746277,
zoom: 11
};
class ParkingOnMap extends Component {
state = {
features: []
};
async componentDidMount() {
const body = await (await fetch(global.path + `/featuresOnlyIDAndCoordinates`)).json();
this.setState({features: body});
}
render() {
const {features} = this.state;
const data = [{
name: "random-name",
color: [245, 49, 49],//[101, 147, 245],
path: [[37.639533, 55.7841708], [37.639533, 55.7842522], [37.6398898, 55.7843533], [37.6399059, 55.7846172]],
//path: features.map(c => {return (c.coordinates)})
}];
console.log(data.map(c => {return c.path}));
console.log(features);
// below, add whatever layers you need to overlay on your map
const layer = [
new PathLayer({
id: 'path-layer',
data,
//data: coordinates,
getPath: data => data.path,
getWidth: data => 4,
getColor: data => data.color,
widthMinPixels: 4
})
];
return (
<div className="App">
<AppNavbar/>
<Button onClick={this.setUserLocation}>My Location</Button>
<div className="map">
{<React.Fragment>
<DeckGL
initialViewState={initialViewState}
controller={true}
layers={layer}
>
<StaticMap
mapStyle="mapbox://styles/mapbox/streets-v11"
mapboxApiAccessToken={token}
/>
</DeckGL>
</React.Fragment>}
</div>
</div>
)
}
}
export default withRouter (ParkingOnMap);
这是一个带有一组坐标的工作示例:
path: [[37.639533, 55.7841708], [37.639533, 55.7842522], [37.6398898, 55.7843533], [37.6399059, 55.7846172]]
这部分不起作用:
path: features.map(c => {return (c.coordinates)})
在第二种情况下,数据表示一个 json 对象数组,例如:
[{"id":"3020148","coordinates":[[37.5948822,55.7154477],[37.595188,55.7157046]]},{"id":"3020149","coordinates":[[37.5954187,55.7158979],[37.5963521,55.7166594]]}, ....etc.
我不知道如何遍历 DeckGL 渲染中的所有对象。文档说这很容易。
解决方案
路径数据需要一个数组。如果你想查看许多路径。更改您的数据
之前
路径:[[37.639533, 55.7841708], [37.639533, 55.7842522], [37.6398898, 55.7843533], [37.6399059, 55.7846172]]
后路径:[37.639533, 55.7841708, 37.639533, 55.7842522, 37.6398898, 55.7843533, 37.6399059, 55.7846172]
推荐阅读
- python - 符号检测脚本中的缩进问题python
- java - Java 列表
到地图 > 键是 E 的某些属性,值是具有该属性的 E
- django-rest-framework - 带有 Knox 代币的 DRF 的 Djoser
- python - MySQL:为 mysql 表中的每个父级创建子级
- html - 缩小屏幕尺寸时导航栏没有响应
- javascript - 反应路由器:链接更改网址但不加载组件
- java - 如何查看哪个布局膨胀失败?
- assembly - 组装:自定义操作系统键盘支持的引导加载程序
- python - 在 Pandas DataFrame 中使用条件语句派生具有特定值的新列
- java - 如何用三个复合主键和一个外键编写 JPA Hibernate 实体?