изменить свойство слоя на основе ползунка с помощью deck.gl - PullRequest
Новая
       14

изменить свойство слоя на основе ползунка с помощью deck.gl

0 голосов
/ 07 февраля 2019

Я следую примеру , предоставленному в репозитории github deck.gl , который отображает полигоны геоджона.

С тех пор я изменил начальный фокус карты и предоставил свой собственный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 ] ] ] } } ] }

Вместо того, чтобы повторять каждую геометрию для каждого момента времени, я перенес временной аспект данных в свойства.Это позволяет управлять размером файла в полном наборе данных (~ 50 МБ против ~ 500 МБ).

Для визуализации одного момента времени я знаю, что могу предоставить свойство для 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?

В моем JavaScript / JQuery отсутствует, и мне не удалось найти какие-либо четкие примеры того, как изменитьСвойство данных, основанное на вводе, любая помощь очень ценится.

Вот ссылка кодов и ящиков - там, похоже, не нравится. Локально с npm install и npm startдолжен вести себя так, как задумано.

1 Ответ

0 голосов
/ 09 февраля 2019

Сначала вам нужно сообщить зависимым методам доступа о значении, которое будет изменено ползунком.Это можно сделать с помощью 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>

  ...
}

И это в основном все.А вот полный код

...