既然有第一篇，那就要有第二篇嘛！

佛说要有光，世界便有了光

啊呸

是上帝说要有光，世界便有了光

好的，我们来到了第二篇，第二篇我们干啥呢？有了，我们来加载一个热点图

import React, { PureComponent } from 'react';
import { Map, View } from 'ol';
import { Tile, Heatmap } from 'ol/layer';
import { OSM, Vector } from 'ol/source';
import GeoJSON from 'ol/format/GeoJSON';
import { fromLonLat } from 'ol/proj';
import ScaleLine from 'ol/control/ScaleLine';
import ZoomSlider from 'ol/control/ZoomSlider';

const control = require('ol/control');

export default class Home extends PureComponent {
    // 生命周期函数时调用
    componentDidMount() {
        let map = new Map({
            // 设置挂载点为map
            target: 'map',
            // 设置图层
            layers: [
                new Tile({
                    source: new OSM()
                })
            ],
            // 设置地图的可视区域，center为中心点，zoom为缩放的层级
            view: new View({
                center: fromLonLat([114, 41]),
                zoom: 4
            }),
            //加载控件到地图容器中
            controls: control.defaults({
                // zoom: false,
                rotate: false,
                attribution: false
            }).extend([
                new ScaleLine(),
                new ZoomSlider()
            ])
        });

        //矢量图层 获取geojson数据
        var vector = new Vector({
            url: '../src/pages/maphot/test.geojson',
            format: new GeoJSON()
        });
        let heatMap = new Heatmap({
            source: vector,
            // 透明度
            // opacity: [0, 0.8], 
            // 模糊大小
            blur: 5,
            // 半径大小（以像素为单位,默认8）
            radius: 5,
            // 阴影像素大小，默认250
            // shadow:250,
            // 矢量图层的渲染模式：
            // image:矢量图层呈现为图像。性能出色，但是点符号和文本始末始终随着视图一起旋转，像素在缩放动画期间缩放
            // vector:矢量图层呈现为矢量。即使在动画期间也能获得最准确的渲染，但是性能降低
        });
        map.addLayer(heatMap);
    }
    render() {
        return (
            <div style={{ width: '100%', height: '100%' }}>
                <div id="map" style={{ width: '100%', height: "930px" }} />
                {/*  地图的挂载点，可以设置大小，控制地图的大小 */}
                {/* <div id="map" style={{ width: '1920px', height: "1080px" }} /> */}
            </div>
        );
    }
}

代码有了，注释也有了，哦，我知道了，还缺一个效果图

热力图效果图