React-map-gl + deck.gl 实现HeatMap图层添加

最新推荐文章于 2024-08-16 07:49:01 发布

炉火纯青-旺

最新推荐文章于 2024-08-16 07:49:01 发布

阅读量863

点赞数

分类专栏： deck.gl 文章标签： reactjs

本文链接：https://blog.csdn.net/qq_34870529/article/details/104600242

版权

deck.gl 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

import React, {
    PureComponent
} from 'react';
import {
    render
} from 'react-dom';
import {
    StaticMap
} from 'react-map-gl';
import DeckGL from '@deck.gl/react';
import {
    HeatmapLayer
} from '@deck.gl/aggregation-layers';

// Set your mapbox token here
const MAPBOX_TOKEN = "pk.eyJ1IjoibHh0aWFudGlhbiIsImEiOiJjaXd2ZjlkYnQwMTZvMnRtYWZnM2lpbHFvIn0.ef3rFZTr9psmLWahrqap2A"; // eslint-disable-line
const url = window.config.url;
const DATA_URL = url + 'static/data/json/locations.json';

const INITIAL_VIEW_STATE = {
    longitude: -73.75,
    latitude: 40.73,
    zoom: 9,
    maxZoom: 16,
    pitch: 0,
    bearing: 0
};

export default class App extends PureComponent {
    _renderLayers() {
        const {
            data = DATA_URL, intensity = 1, threshold = 0.03, radiusPixels = 30
        } = this.props;

        return [
            new HeatmapLayer({
                data,
                id: 'heatmp-layer',
                pickable: false,
                getPosition: d => [d[0], d[1]],
                getWeight: d => d[2],
                radiusPixels,
                intensity,
                threshold
            })
        ];
    }

    render() {
        const {
            mapStyle = 'mapbox://styles/mapbox/dark-v9'
        } = this.props;

        return ( 
            <div>
                <DeckGL 
                    initialViewState = {INITIAL_VIEW_STATE}
                    controller = {true}
                    layers = {this._renderLayers()} 
                >
                    <StaticMap 
                        reuseMaps 
                        mapStyle = { mapStyle }
                        preventStyleDiffing = {true}   
                        mapboxApiAccessToken = {MAPBOX_TOKEN}
                    /> 
                </DeckGL> 
            </div>
        );
    }
}

效果展示：