HexagonLayer - получение агрегированных данных или их значений - PullRequest
Новая
       58

HexagonLayer - получение агрегированных данных или их значений

0 голосов
/ 18 января 2019

Я создаю приложение mapbox & deck.gl и хочу отфильтровать несколько баров во время выполнения по диапазонам значений

Я хочу показывать только бары, совокупное значение которых находится в некотором диапазоне [min,max]

Итак, мой упрощенный вопрос

Как я могу получить агрегированные данные столбца deck.gl hexagonLayer после рисования шестиугольников на карте?

Итак, тогда я могу правильно рассчитать upperPercentile и lowerPercentile, которые отвечают за графическую фильтрацию ... 

var { MapboxLayer, HexagonLayer } = deck;

//Create the Mapbox map
var map = new mapboxgl.Map({
    container: document.body,
    style: 'mapbox://styles/mapbox/dark-v9?optimize=true',
    center: [-1.4157, 52.2324],
    zoom: 6,
    pitch: 40.5
});

// Get Data for visual
var DATA_URL = 'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv';

//Create the deck.gl hexagon layer and style for the data
var OPTIONS = ['radius', 'coverage', 'upperPercentile'];
var COLOR_RANGE = [
    [1, 152, 189],
    [73, 227, 206],
    [216, 254, 181],
    [254, 237, 177],
    [254, 173, 84],
    [209, 55, 78]
];
var LIGHT_SETTINGS = {
    lightsPosition: [-0.144528, 49.739968, 8000, -3.807751, 54.104682, 8000],
    ambientRatio: 0.4,
    diffuseRatio: 0.6,
    specularRatio: 0.2,
    lightsStrength: [0.8, 0.0, 0.8, 0.0],
    numberOfLights: 2
};
var hexagonLayer;


  map.on('style.load', () => {

hexagonLayer = new MapboxLayer({
    type: HexagonLayer,
    id: 'heatmap',
    data: d3.csv(DATA_URL),
    radius: 1000,
    coverage: 1,
    upperPercentile: 100,
    colorRange: COLOR_RANGE,
    elevationRange: [0, 1000],
    elevationScale: 250,
    extruded: true,
    getPosition: d => [Number(d.lng), Number(d.lat)],
    lightSettings: LIGHT_SETTINGS,
    opacity: 1
});

// Add the deck.gl hex layer below labels in the Mapbox map
map.addLayer(hexagonLayer, 'waterway-label');




// I WANT TO GET MINIMUM AND MAXIMUM VALUES FOR BARS HERE


<html>

<head>
    <title>Road AccidentsIncidents</title>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
        <script src="https://unpkg.com/deck.gl@^6.2.0/deckgl.min.js"></script>
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js"></script>
        <link rel="stylesheet" type="text/css" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css">
        <script src="https://d3js.org/d3.v5.min.js"></script>
        <style type="text/css">
        #map { position:absolute; top:0; bottom:0; width:100%; }
        body {
            font-family: Helvetica, Arial, sans-serif;
            width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 0
        }

        #control-panel {
            position: absolute;
            background: #fff;
            top: 0;
            left: 0;
            margin: 12px;
            padding: 20px;
            font-size: 12px;
            line-height: 1.5;
            z-index: 1;
        }

        label {
            display: inline-block;
            width: 140px;
        }
        </style>
</head>

<body>
    <div id="control-panel">
        <div>
            <label>Radius</label>
            <input id="radius" type="range" min="500" max="10000" step="500" value="1000"></input>
            <span id="radius-value"></span>
        </div>
        <div>
            <label>Coverage</label>
            <input id="coverage" type="range" min="0" max="1" step="0.1" value="1"></input>
            <span id="coverage-value"></span>
        </div>
        <div>
            <label>Upper Percentile</label>
            <input id="upperPercentile" type="range" min="90" max="100" step="1" value="100"></input>
            <span id="upperPercentile-value"></span>
        </div>
    </div>
</body>
<script type="text/javascript">
mapboxgl.accessToken = 'pk.eyJ1IjoicnNiYXVtYW5uIiwiYSI6ImNqbjdsemZybzFtc3MzcnFvNXFucXQweTEifQ.2N_6Nd1rZG-I2pyA9I1xfA';

var { MapboxLayer, HexagonLayer } = deck;

//Create the Mapbox map
var map = new mapboxgl.Map({
    container: document.body,
    style: 'mapbox://styles/mapbox/dark-v9?optimize=true',
    center: [-1.4157, 52.2324],
    zoom: 6,
    pitch: 40.5
});

// Get Data for visual
var DATA_URL = 'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv';

//Create the deck.gl hexagon layer and style for the data
var OPTIONS = ['radius', 'coverage', 'upperPercentile'];
var COLOR_RANGE = [
    [1, 152, 189],
    [73, 227, 206],
    [216, 254, 181],
    [254, 237, 177],
    [254, 173, 84],
    [209, 55, 78]
];
var LIGHT_SETTINGS = {
    lightsPosition: [-0.144528, 49.739968, 8000, -3.807751, 54.104682, 8000],
    ambientRatio: 0.4,
    diffuseRatio: 0.6,
    specularRatio: 0.2,
    lightsStrength: [0.8, 0.0, 0.8, 0.0],
    numberOfLights: 2
};

var hexagonLayer;

//Add the deck.gl Custom Layer to the map once the Mapbox map loads
map.on('style.load', () => {

    hexagonLayer = new MapboxLayer({
        type: HexagonLayer,
        id: 'heatmap',
        data: d3.csv(DATA_URL),
        radius: 1000,
        coverage: 1,
        upperPercentile: 100,
        colorRange: COLOR_RANGE,
        elevationRange: [0, 1000],
        elevationScale: 250,
        extruded: true,
        getPosition: d => [Number(d.lng), Number(d.lat)],
        lightSettings: LIGHT_SETTINGS,
        opacity: 1
    });

    // Add the deck.gl hex layer below labels in the Mapbox map
    map.addLayer(hexagonLayer, 'waterway-label');
    
    
    
    
    // I WANT TO GET MINIMUM AND MAXIMUM VALUES FOR BARS HERE
    
});

// Add sliders to change the layer's settings based on user input
OPTIONS.forEach(key => {
    document.getElementById(key).onchange = (evt) => {
        var value = Number(evt.target.value);
        document.getElementById(key + '-value').innerHTML = value;
        if (hexagonLayer) {
            hexagonLayer.setProps({
                [key]: value });
        }
    };
});
</script>

</html>
...