尝试为 deckgl 六边形层创建控制面板半径、上百分位数...

问题描述

我使用deck.gl 中的六边形图层示例作为我的基础，并试图找到一种方法来包含类似于他们的在线网站https://deck.gl/examples/hexagon-layer/

import React from 'react';
import {render} from 'react-dom';
import {StaticMap} from 'react-map-gl';
import {AmbientLight,PointLight,LightingEffect} from '@deck.gl/core';
import {HexagonLayer} from '@deck.gl/aggregation-layers';
import DeckGL from '@deck.gl/react';
import {Controller} from 'deck.gl';

// Source data CSV
const DATA_URL =
  'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv'; // eslint-disable-line

const ambientLight = new AmbientLight({
  color: [255,255,255],intensity: 1.0
});

const pointLight1 = new PointLight({
  color: [255,intensity: 0.8,position: [-0.144528,49.739968,80000]
});

const pointLight2 = new PointLight({
  color: [255,position: [-3.807751,54.104682,8000]
});

const lightingEffect = new LightingEffect({ambientLight,pointLight1,pointLight2});

const OPTIONS = ['radius','coverage','upperpercentile'];

const material = {
  ambient: 0.64,diffuse: 0.6,shininess: 32,specularColor: [51,51,51]
};

const INITIAL_VIEW_STATE = {
  longitude: -1.415727,latitude: 52.232395,zoom: 6.6,minZoom: 5,maxZoom: 15,pitch: 40.5,bearing: -27
};

const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json';

export const colorRange = [
  [1,152,189],[73,227,206],[216,254,181],[254,237,177],173,84],[209,55,78]
];

OPTIONS.forEach(key => {
  document.getElementById(key).oninput = renderLayer;
});

renderLayer();

function renderLayer () {
  const options = {};
  OPTIONS.forEach(key => {
    const value = +document.getElementById(key).value;
    document.getElementById(key + '-value').innerHTML = value;
    options[key] = value;
  });
function getTooltip({object}) {
  if (!object) {
    return null;
  }
  const lat = object.position[1];
  const lng = object.position[0];
  const count = object.points.length;

  return `\
    latitude: ${Number.isFinite(lat) ? lat.toFixed(6) : ''}
    longitude: ${Number.isFinite(lng) ? lng.toFixed(6) : ''}
    ${count} Accidents`;
}

/* eslint-disable react/no-deprecated */
export default function App({
  data,mapStyle = MAP_STYLE,radius = 1000,upperpercentile = 100,coverage = 1
}) {
  const layers = [
    new HexagonLayer({
      id: 'heatmap',colorRange,data,elevationRange: [0,3000],elevationScale: data && data.length ? 50 : 0,extruded: true,getPosition: d => d,pickable: true,material,coverage,radius,upperpercentile,transitions: {
        elevationScale: 3000
      }
    })
  ];

  return (
    <DeckGL
      layers={layers}
      effects={[lightingEffect]}
      initialViewState={INITIAL_VIEW_STATE}
      controller={true}
      getTooltip={getTooltip}
    >
      <StaticMap reuseMaps mapStyle={mapStyle} preventStyleDiffing={true}/>
    </DeckGL>
  );
}

export function renderTodoM(container) {
  render(<App />,container);

  require('d3-request').csv(DATA_URL,(error,response) => {
    if (!error) {
      const data = response.map(d => [Number(d.lng),Number(d.lat)]);
      render(<App data={data} />,container);
    }
  });
}

This is what the happens if i run the example code without the control panel

This is the what loads when i run the current code (example with my additions

我是 JavaScript 新手， 非常感谢您的帮助！

解决方法

我认为您忘记将 mapboxApiAccessToken 添加到 StaticMap 组件中，因为 react-map-gl 是 React js 的 Mapbox 地图库。

const MAPBOX_TOKEN = '...'

// some code here

return(
    // some code here
    <StaticMap 
        reuseMaps 
        mapStyle={mapStyle} 
        preventStyleDiffing={true}
        mapboxApiAccessToken={MAPBOX_TOKEN}
    />
    // some code here
)

您可以从这里获取 Mapbox 令牌的价值 https://account.mapbox.com/access-tokens/