openlayers 使用feature生成热力图，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(){      
    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%;
}

　效果：