根据 deck.gl 的滑块输入更改图层属性

Question

我正在关注显示来自 geojson 的多边形的 example provided on the deck.gl github repository。

从那以后，我改变了地图的初始焦点并提供了我自己的 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=""/>

那么我怎样才能让滑块改变我的 geojson 的属性被提供给 getElevation 和 getFillColor？

我的 JavaScript/JQuery 不足，我无法找到任何关于如何根据输入更改数据属性的明确示例，非常感谢任何帮助。

Here is a codesandbox link - doesn't seem to like it there however. 在本地 npm install 和 npm start 应该按预期运行。

Answer 1

首先，您需要将滑块要更改的值告知相关访问者。这可以通过使用 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>

  ...
}

基本上就是这样。这是 full code

根据 deck.gl 的滑块输入更改图层属性

change layer property based on slider input with deck.gl

javascript

reactjs

deck.gl

根据 deck.gl 的滑块输入更改图层 属性

change layer property based on slider input with deck.gl

javascript

reactjs

deck.gl

根据 deck.gl 的滑块输入更改图层属性