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

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

效果展示:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值