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

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

啊呸

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

好的，我們來到了第二篇，第二篇我們干啥呢？有了，我們來加載一個熱點圖

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 {
    // 生命周期函數(shù)時調(diào)用
    componentDidMount() {
        let map = new Map({
            // 設(shè)置掛載點為map
            target: 'map',
            // 設(shè)置圖層
            layers: [
                new Tile({
                    source: new OSM()
                })
            ],
            // 設(shè)置地圖的可視區(qū)域，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數(shù)據(jù)
        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:矢量圖層呈現(xiàn)為圖像。性能出色，但是點符號和文本始末始終隨著視圖一起旋轉(zhuǎn)，像素在縮放動畫期間縮放
            // vector:矢量圖層呈現(xiàn)為矢量。即使在動畫期間也能獲得最準確的渲染，但是性能降低
        });
        map.addLayer(heatMap);
    }
    render() {
        return (
            <div style={{ width: '100%', height: '100%' }}>
                <div id="map" style={{ width: '100%', height: "930px" }} />
                {/*  地圖的掛載點，可以設(shè)置大小，控制地圖的大小 */}
                {/* <div id="map" style={{ width: '1920px', height: "1080px" }} /> */}
            </div>
        );
    }
}

代碼有了，注釋也有了，哦，我知道了，還缺一個效果圖

熱力圖效果圖