openlayers 生成热力图，react

官方案例 https://openlayers.org/en/latest/examples/heatmap-earthquakes.html?q=hot

首先。安装ol

npm i ol

　其次新建react文件，导入需要的内容，地图是二维图片地图，你们随意

import map from '../../assets/map.png'

import map from '../drag/style.css'　

导入openlayers所需要的组件

import Projection from 'ol/proj/Projection.js';
import Feature from 'ol/Feature.js';
import Static from 'ol/source/ImageStatic.js';
import { getCenter } from 'ol/extent.js';
import ImageLayer from 'ol/layer/Image.js';
import View from 'ol/View.js';
import Map from 'ol/Map.js';
import VectorSource from 'ol/source/Vector';
import {Heatmap as HeatmapLayer} from 'ol/layer';
import { Point } from 'ol/geom.js';

在外部定义mapMessage

const mapMessage = {
    mapLayer: null,
    map: null,
}

　　

　生成地图，extent按照需求自定义

  initMap() {
        state = true;
        mapMessage.extent = [-1.70559, -2.34755, 21.0038, 10.4265];
        mapMessage.projection = new Projection({
            code: 'xkcd-image',
            units: 'pixels',
            extent: mapMessage.extent
        });
        mapMessage.mapLayer = new ImageLayer({
            source: new Static({
                attributions: 'png地图',
                url: map,
                projection: mapMessage.projection,
                imageExtent: mapMessage.extent
            })
        })

        mapMessage.view = new View({
            projection: mapMessage.projection,
            center: getCenter(mapMessage.extent),
            zoom: 2,
            maxZoom: 6
        })

        mapMessage.map = new Map({
            layers: [

            ],
            target: 'map',
            view: mapMessage.view
        });

        mapMessage.map.addLayer(mapMessage.mapLayer)


    }

　主要内容来了，生成热力图

 initHeatMap(){
       /* let wandaVector = new VectorSource({
            url: "./map.geojson",
            format: new GeoJSON()
            // features:(new GeoJSON()).readFeature(json)
        });*/


        const source = new VectorSource({})
        const routes =[
            [0,0],[0,1.5],[0,1],[1,1],[1.5,1.5]
        ]
        routes.forEach(item=>{
            let feature =new Feature({
                geometry: new Point( item )
    
            });
        source.addFeature(feature);
    })
        

        let vector = new HeatmapLayer({
            source: source,
            blur: parseInt(10, 10),
            radius: parseInt(15, 10),
        });

        mapMessage.map.addLayer(vector)
    }

　整体代码

import { Component } from "react";
import "../drag/style.css"
import map from '../../assets/map.png'


import Projection from 'ol/proj/Projection.js';
import Feature from 'ol/Feature.js';
import Static from 'ol/source/ImageStatic.js';
import { getCenter } from 'ol/extent.js';
import ImageLayer from 'ol/layer/Image.js';
import View from 'ol/View.js';
import Map from 'ol/Map.js';
import VectorSource from 'ol/source/Vector';
import {Heatmap as HeatmapLayer} from 'ol/layer';
import { Point } from 'ol/geom.js';

let state =false;

const mapMessage = {
    mapLayer: null,
    map: null,
}
export default class HeatMap extends Component{
    constructor(props){
        super(props)
    }

    render(){
        return (
            <div className="container">
                <div className="map" id="map"></div>
            </div>
        )
    }
    
    componentDidMount() {
        if (state) return;  // 我不知道为啥执行两次
        console.clear();
        this.initMap();
        this.initHeatMap()
    }


    initMap() {
        state = true;
        mapMessage.extent = [-1.70559, -2.34755, 21.0038, 10.4265];
        mapMessage.projection = new Projection({
            code: 'xkcd-image',
            units: 'pixels',
            extent: mapMessage.extent
        });
        mapMessage.mapLayer = new ImageLayer({
            source: new Static({
                attributions: 'png地图',
                url: map,
                projection: mapMessage.projection,
                imageExtent: mapMessage.extent
            })
        })

        mapMessage.view = new View({
            projection: mapMessage.projection,
            center: getCenter(mapMessage.extent),
            zoom: 2,
            maxZoom: 6
        })

        mapMessage.map = new Map({
            layers: [

            ],
            target: 'map',
            view: mapMessage.view
        });

        mapMessage.map.addLayer(mapMessage.mapLayer)


    }

    initHeatMap(){


        const source = new VectorSource({})
        const routes =[
            [0,0],[0,1.5],[0,1],[1,1],[1.5,1.5]
        ]
        routes.forEach(item=>{
            let feature =new Feature({
                geometry: new Point( item )
    
            });
        source.addFeature(feature);
    })
        

let vector = new HeatmapLayer({
            source: source,
            blur: 10, // number (defaults to 15) blur size in pixels.
            radius:15,// number (defaults to 8) Radius size in pixels.

}); mapMessage.map.addLayer(vector) } }

style样式

.container{
    width: 100vw;
    height: 100vh;
    background-color: orange;
}

#map{
    height: 100%;
}

　效果：

 

 其实还有根据json数据生成feature的方式，但是我不会，等我研究会了再继续写