mapbox-热力图实现

前端技术选型 mapbox gl.js+react+dva

1.构建mapview

并在mapbox onload 事件里面进行热力图初始化

import React from 'react';
import styles from './MapView.css';
import mapboxgl from 'mapbox-gl';

import HeatLayer from '../components/MapLayer/HeatLayer';
import earthquakes from '../assets/data/earthquakes.geojson';



export default class MapView extends React.Component{
    constructor(props) {
        super(props);
      }

    componentDidMount() {
        mapboxgl.accessToken = '申请自己的token';
        let map = new mapboxgl.Map({
          container: 'mapContainer',
          style: 'mapbox://styles/mapbox/streets-v9',
          maxZoom: 18,
          minZoom: 0,
          zoom:3,
          center:[116,39]
        });
        map.on('load', () => {
          //构造方法，传值map对象、数据对象、图层名称
          const heatlayer = new HeatLayer(map, earthquakes, 'earthquakes');
          heatlayer.addLayer();
        });

      }

    render(){
        return (<div id="mapContainer" className={styles.map}>
        </div>);
    }

};

2.封装HeatLayer类

由于data默认就是geojson格式的，所以这里没有进行数据的解析

class HeatLayer {

  constructor(map, data, layername) {
    this.map = map;
    this.data = data;
    this.layername = layername;
  }

  addData = () => {
    return {
      "id": this.layername,
      "type": "heatmap",
      "source": {
        "type": "geojson",
        "data": this.data,
      },
      "maxzoom": 9,
      "paint": {
        // Increase the heatmap weight based on frequency and property magnitude
        "heatmap-weight": [
          "interpolate", ["linear"],
          ["get", "mag"],
          0, 0,
          6, 1,
        ],
        // Increase the heatmap color weight weight by zoom level
        // heatmap-intensity is a multiplier on top of heatmap-weight
        "heatmap-intensity": [
          "interpolate", ["linear"],
          ["zoom"],
          0, 1,
          9, 3,
        ],
        // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
        // Begin color ramp at 0-stop with a 0-transparancy color
        // to create a blur-like effect.
        "heatmap-color": [
          "interpolate", ["linear"],
          ["heatmap-density"],
          0, "rgba(33,102,172,0)",
          0.2, "rgb(103,169,207)",
          0.4, "rgb(209,229,240)",
          0.6, "rgb(253,219,199)",
          0.8, "rgb(239,138,98)",
          1, "rgb(178,24,43)",
        ],
        // Adjust the heatmap radius by zoom level
        "heatmap-radius": [
          "interpolate", ["linear"],
          ["zoom"],
          0, 2,
          9, 20,
        ],
        // Transition from heatmap to circle layer by zoom level
        "heatmap-opacity": [
          "interpolate", ["linear"],
          ["zoom"],
          7, 1,
          9, 0,
        ],
      },
    };

  };

  addLayer = () => {
    const option = this.addData();
    this.map.addLayer(option);
  }
}

export default HeatLayer;

3.实现效果