官方案例 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%;
}
效果: