我正在按照deck.gl Github存储库上提供的示例来显示来自geojson的多边形。
之后,我改变了地图的初始焦点并提供了自己的geojson进行可视化。我用替换示例的数据具有时间组件,我想通过操作范围输入来可视化它。
所以我继续使用range.slider,并在
之后,我改变了地图的初始焦点并提供了自己的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,并在
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=""/>
那么我怎样才能使滑块更改供应给getElevation
和getFillColor
的我的geojson的属性呢?
我的JavaScript / JQuery知识不足,我无法找到任何明确的示例来根据输入更改数据属性,任何帮助都将不胜感激。
这是一个codesandbox链接 - 但似乎不太喜欢它。在本地使用npm install
和npm start
应该可以按预期运行。
GeoJsonLayer
中使用的地理JSON属性。我会查看网站并尝试在醒来时上传一个示例。 - zacdav