javascript - 试图为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, 255, 255],
intensity: 0.8,
position: [-0.144528, 49.739968, 80000]
});
const pointLight2 = new PointLight({
color: [255, 255, 255],
intensity: 0.8,
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],
[254, 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);
}
});
}
我是 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/
推荐阅读
- jenkins - Jenkinsfile copyartifact 在使用带有通配符的过滤条件时找不到工件
- firebase - 我可以使用 firestoreConnect 跨子集合进行查询吗?
- design-patterns - 自定义小部件的回调中没有上下文
- sql - 如何永久更新数据库的记录?
- symfony-4.2 - 如何在 Symfony4.2 中修复“超过 30 秒的最大执行时间”
- java - Java Spring Thymeleaf 下拉菜单被禁用并出现
- excel - Vlookup 返回的事件编号在单个单元格中与 ROW () 分组
- node.js - 为什么部署的无服务器函数未显示在 AWS 控制台的 lambda 函数列表中?
- c++ - 如何在 Visual Studio 中仅禁用系统文件(msvc、windows kits)的智能感知?
- java - 我的 Rent 数组中的 LocalDate 要求我将其转换为字符串