javascript - 使用deck.gl根据滑块输入更改图层属性
问题描述
我正在关注deck.gl github存储库中提供的示例,该示例显示来自geojson的多边形。
从那以后,我改变了地图的初始焦点并提供了我自己的 geojson 来可视化,我用这些示例替换的数据有一个时间组件,我想通过操作范围输入来可视化它。
示例 GeoJSON 结构
{
"type": "FeatureCollection",
"name": "RandomData",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature",
"properties": { "id": 1,"hr00": 10000, "hr01": 12000, "hr02": 12000, "hr03": 30000, "hr04": 40000, "hr05": 10500, "hr06": 50000}, "geometry": { "type": "Polygon", "coordinates": [ [ [ 103.73992, 1.15903 ], [ 103.74048, 1.15935 ], [ 103.74104, 1.15903 ], [ 103.74104, 1.15837 ], [ 103.74048, 1.15805 ], [ 103.73992, 1.15837 ], [ 103.73992, 1.15903 ] ] ] } } ] }
我没有为每个时间点重复每个几何图形,而是将数据的时间方面转移到属性上。这使得文件大小可以在完整数据集上进行管理(~50mb 与 ~500mb)。
为了可视化单个时间点,我知道我可以将属性提供给getElevation
和getFillColor
。
_renderLayers() {
const {data = DATA_URL} = this.props;
return [
new GeoJsonLayer({
id: 'geojson',
data,
opacity: 0.8,
stroked: false,
filled: true,
extruded: true,
wireframe: true,
fp64: true,
getElevation: f => f.properties.hr00,
getFillColor: f => COLOR_SCALE(f.properties.hr00),
getLineColor: [255, 255, 255],
lightSettings: LIGHT_SETTINGS,
pickable: true,
onHover: this._onHover,
transitions: {
duration: 300
}
})
];
}
所以我继续使用range.slider,将代码添加到 my app.js
,添加了以下代码段。我相信我也可能把它放在错误的位置,它应该存在于render()
吗?
import ionRangeSlider from 'ion-rangeslider';
// Code for slider input
$("#slider").ionRangeSlider({
min: 0,
max: 24,
from: 12,
step: 1,
grid: true,
grid_num: 1,
grid_snap: true
});
$(".js-range-slider").ionRangeSlider();
添加到我的index.html
<input type="text" id="slider" class="js-range-slider" name="my_range" value=""/>
那么如何让滑块更改我的 geojson 的哪个属性被提供给getElevation
和getFillColor
?
我的 JavaScript/JQuery 缺失,我无法找到任何关于如何根据输入更改数据属性的明确示例,非常感谢任何帮助。
这是一个代码框链接 - 但是似乎不喜欢它。
在本地使用npm install
并且npm start
应该让它按预期运行。
解决方案
首先,您需要告诉依赖访问者滑块将要更改的值。这可以通过使用来完成updateTriggers
:
_renderLayers() {
const { data = DATA_URL } = this.props;
return [
new GeoJsonLayer({
// ...
getElevation: f => f.properties[this.state.geoJsonValue],
getFillColor: f => COLOR_SCALE(f.properties[this.state.geoJsonValue]),
updateTriggers: {
getElevation: [this.state.geoJsonValue],
getFillColor: [this.state.geoJsonValue]
}
// ...
})
];
}
要使用范围滑块实际更改此值,您需要onChange
在初始化期间添加回调:
constructor(props) {
super(props);
this.state = { hoveredObject: null, geoJsonValue: "hr01" };
this.sliderRef = React.createRef();
this._handleChange = this._handleChange.bind(this);
// ...
}
componentDidMount() {
// Code for slider input
$(this.sliderRef.current).ionRangeSlider({
// ...
onChange: this._handleChange
});
}
_handleChange(data) {
this.setState({
geoJsonValue: `hr0${data.from}`
});
}
render() {
...
<DeckGL ...>
...
</DeckGL>
<div id="sliderstyle">
<input
ref={this.sliderRef}
id="slider"
className="js-range-slider"
name="my_range"
/>
</div>
...
}
基本上就是这样。这是完整的代码
推荐阅读
- ios - 碰撞后如何阻止分数上升超过一分?
- javascript - JavaScript setTimeout 未按预期工作
- ios - 邮件应用程序和gmail应用程序的通用链接问题
- c# - 访问泛型方法中的字段
- javascript - "const something = () => ({..." 箭头函数模式
- json - 将 s3 中的 json 文件导入 postgres RDS
- python - 使用 BigQuery Client() 类时出现错误 TypeError: Object of type set is not JSON serializable
- angular - Angular,检查我是否在 prodmode
- c++ - 如何为结构内的嵌套结构和联合分配内存?
- javascript - 'string | 类型的参数 number' 不可分配给“string”类型的参数。类型“数字”不可分配给类型“字符串”