Question

我正在使用deck.gl GeoJsonLayer在地图上显示区域。通过事件，我能够选择这些区域。我正在苦苦挣扎的是在单击功能部件后更改其颜色。

这是渲染层函数（改编自here）

_renderLayers(props) {
  const { geofeats } = props;

return [
  new GeoJsonLayer({
    id: 'geojson',
    data: geofeats,
    opacity: 0.8,
    stroked: true,
    filled: true,
    extruded: true,
    wireframe: true,
    getElevation: f => 10000, 
    getFillColor: f =>
    {
        if(f.properties.selected)
        {
            return  [200, 200, 100];
        } else return  [200, 100, 150];

    },
    getLineColor: [255, 255, 255],
    pickable: true,
    onHover: this._onHover, 
    onClick: this._onClick
  })
];
}

问题是，当我通过setState（）更新要素集中的要素选择状态时，即使状态更改在数据中表示，渲染也不会更新。

这是我中继“ geofeats”对象的方式：

  render() {
  const {features} = this.state;

  const {mapStyle = 'mapbox://styles/mapbox/light-v9'} = this.props;

return (
  <DeckGL
    layers={this._renderLayers({geofeats: features})}
    effects={this._effects}
    initialViewState={INITIAL_VIEW_STATE}
    controller={true}
  >
    <StaticMap
      reuseMaps
      mapStyle={mapStyle}
      preventStyleDiffing={true}
      mapboxApiAccessToken={MAPBOX_TOKEN}
    />

    {this._renderTooltip}
  </DeckGL>
);
}

我通过setState而不是通过props进行了尝试-但结果是相同的。该要素集合将移交给GeoJsonLayer，但从未更新。

有人可以告诉我，我在做什么错吗？

更新：错误再现的要点示例：https://gist.github.com/jaronimoe/efdbb58b3f52c2aac63362a921802cfe

Answer 1

您的问题有两个方面。

首先，您永远不会为每个功能分配唯一的ID，这最终意味着将鼠标悬停在一个项目上时，会将每个功能都分配给选定的功能。这是因为在setFeatureSelected中，您正在比较undefined == undefined又名（currentID == selectedId）。就像旁注一样，您应该默认为三等分

第二，您需要告诉GeoJsonLayer如何更新颜色。这些是您需要进行的更改：

function setFeatureSelected(features, selfeat) {
  let selectedID = selfeat.properties.id;
  for (let i = 0; i < features.features.length; i++) {
    let currentID = features.features[i].properties.id;

    if (selectedID === currentID) {
      features.features[i].properties.selected = true;
    } else {
      // Make sure to update the others to be false, so that way only one is ever selected
      features.features[i].properties.selected = false;
    }
  }

  return features;
}

然后，您要更新initFeatureSelected以实际注入ID。现在，我只使用数组中的索引，但是如果您愿意，可以使用更明确的内容

function initFeatureSelected(features) {
  for (let i = 0; i < features.features.length; i++) {
    features.features[i].properties.selected = false;

    // Track each feature individually with a unique ID.
    features.features[i].properties.id = i;
  }

  return features;
}

您需要的最后一部分是告诉GeoJsonLayer您有新值来重新计算getFillColor函数。这是通过updateTriggers完成的，您可以在其中传递确定颜色是否应该更改的事物的值。在您的情况下，哪个是您选择的功能ID

new GeoJsonLayer({
  id: 'geojson',
  data,
  opacity: 0.8,
  stroked: false,
  filled: true,
  extruded: true,
  wireframe: true,
  getElevation: 50, //Math.sqrt(f.properties.valuePerSqm) * 10,
  getFillColor: d => d.properties.selected ? [100, 105, 155] : [55, 205, 155], //COLOR_SCALE(f.properties.growth),
  getLineColor: [255, 255, 255],
  updateTriggers: {
    getFillColor: [
      this.state.hoveredObject
        ? this.state.hoveredObject.properties.id
        : null
    ]
  },
  pickable: true,
  onHover: this._onHover
})

deck.gl GeoJsonLayer：点击时更新要素颜色

1 个答案: