Javascript 使用deck.gl根据滑块输入更改图层特性

我正在跟踪一个从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
        }
      })
    ];
  }

所以我继续使用，将代码添加到我的

app.js

，添加了以下代码片段。如果

render（）

中存在此项，我相信我可能也将其放置在了错误的位置

添加到我的

index.html

<input type="text" id="slider" class="js-range-slider" name="my_range" value=""/>

---

那么，如何让滑块更改geojson的哪个属性被提供给

getElevation

和

getFillColor

我的JavaScript/JQuery缺乏，我无法找到任何关于如何基于输入更改数据属性的清晰示例，非常感谢您的帮助

---

在本地使用

npm install

和

npm start

应该使其按预期运行。

首先，您需要告诉从属访问器滑块将要更改的值。这可以通过以下方式实现：

要使用范围滑块实际更改此值，您需要在初始化期间添加

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>

  ...
}

构造函数（道具）{
超级（道具）；
this.state={hoveredObject:null，geoJsonValue:“hr01”}；
this.sliderRef=React.createRef（）；
this.\u handleChange=this.\u handleChange.bind（this）；
// ...
}
componentDidMount（）{
//滑块输入代码
$（this.sliderRef.current）.IonRangeSloider({
// ...
改变：这个
});
}
_handleChange（数据）{
这是我的国家({
geoJsonValue:`hr0${data.from}`
});
}
render（）{
...
...
...
}

---

基本上就是这样。这是

你能举个例子吗？你到底希望滑块能改变什么<代码>hr00。。。hr06？滑块的范围为0-24，它将确定要在

GeoJsonLayer

中使用的geojson的属性。当我醒来时，我会查看网站并尝试上传一个示例。这很好，我想知道您是否可以执行类似

hr0${data.from}

的操作，但直到现在才看到示例。然而，

However

\u handleChange（）=data=>{…}`在使用您提供的更改运行

npm start

时，给了我一个“意外令牌（87:18）”错误。已更新。只需

.bind

将其绑定到

构造函数中，而不是使用箭头func@streletss如果我想以编程方式更改visible属性，这会类似吗？谢谢@弗洛里恩沃尔多退房
_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]
      }
      // ...
    })
  ];
}

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>

  ...
}