如何在deck.gl六角形图层上设置自定义颜色范围？

如何解决如何在deck.gl六角形图层上设置自定义颜色范围？

我想将颜色分配给预定义的范围，例如红色代表100-200，蓝色代表

解决方法

您可以做类似的事情

首先，从d3-scale包scaleThreshold导入，例如：

import { scaleThreshold } from 'd3-scale';

现在定义您的刻度颜色功能：

const colorScaleFunction = scaleThreshold()
  .domain([1,2,3,4,5,6])
  .range([
    [65,182,196],[254,178,76],[253,141,60],[252,78,42],[227,26,28],[189,38],]);

然后定义您的图层，例如GeoJson图层。 从导入开始：

import { GeoJsonLayer } from '@deck.gl/layers';

然后定义层：

const geoJsonLayer = new GeoJsonLayer({
      id: 'geojson-layer-example',data: dataExample,/* just use some data */
      getFillColor: (d) => colorScaleFunction(d.properties.someValue),pickable: true,});

现在您可以渲染它：

return (
    <DeckGL
      layers={geoJsonLayer}
      initialViewState={YOUR_INITIAL_VIEW_STATE}
      controller={true}
    >
      <StaticMap
        reuseMaps
        mapStyle={YOUR_MAP_STYLE}
        preventStyleDiffing={true}
        mapboxApiAccessToken={YOUR_MAPBOX_TOKEN}
      />
    </DeckGL>
);

仅此而已。