时间戳

首页 > 解决方案 > React Js 中的 Power Visualization Map 示例代码

javascript - React Js 中的 Power Visualization Map 示例代码

问题描述

我是使用 React js 在地图上可视化数据的新手。

有人有一个（完整的）React js 示例代码，用于在 Power View 中使用地图可视化数据吗？

互联网上有一些示例，但它们是用纯 Javascript（不是 React js 框架）编写的，其中一些不提供代码（仅作为即用型仪表板）。

以下是地图上功率视图的一些示例：

https://carto.com//blog/demo/carto-now-available-for-deck-gl/

https://i.ytimg.com/vi/NRMEdscD6OE/maxresdefault.jpg

https://user-images.githubusercontent.com/7150848/45184557-73d16d00-b251-11e8-8e61-82cc53f00bb8.png

标签： javascriptreactjs

解决方案

我在这里找到了示例演示https://deck.gl/examples/hexagon-layer/

演示

以及此处的相应代码https://github.com/visgl/deck.gl/tree/8.4-release/examples/website/3d-heatmap

包.json：

{
  "name": "3d-heatmap",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "start-local": "webpack-dev-server --env.local --progress --hot --open",
    "start": "webpack-dev-server --progress --hot --open"
  },
  "dependencies": {
    "d3-request": "^1.0.5",
    "deck.gl": "^8.4.0",
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
    "react-map-gl": "^5.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.1"
  }
}

索引.html：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>deck.gl Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {margin: 0; font-family: sans-serif; width: 100vw; height: 100vh; overflow: hidden;}
  </style>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
  App.renderToDOM(document.getElementById('app'));
</script>
</html>

应用程序.js：

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';

// 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 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]
];

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,
      coverage,
      data,
      elevationRange: [0, 3000],
      elevationScale: data && data.length ? 50 : 0,
      extruded: true,
      getPosition: d => d,
      pickable: true,
      radius,
      upperPercentile,
      material,

      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);
    }
  });
}

推荐阅读