如何解决尝试为 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/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。