vue openlayers七HeatmapLayer类实现热力效果

1. 放大缩小地图热力图效果

功能：
① 根据点位的数据大小改变热力图的点位大小
② 数值越大，颜色越深，数值越小，颜色越浅
③ 放大缩小地图，实现热力图的聚合分散效果

在这里插入图片描述

2. 实现热力图的代码（ addHeatMap 和封装的 Heatmap.js 文件）

1 2	// 封装的Heatmap热力图文件 import Heatmap from "../../lib/Heatmap.js";

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

/**
* 添加热力图
*/
addHeatMap() {
let colors = [
"#2200FF",
"#16D9CC",
"#4DEE12",
"#E8D225",
"#EF1616"
];
let heatmap = new Heatmap(this.map, 30, 15, colors);
let hatmapData = [
{ name: "成都市", value: "85" },
{ name: "成都市", value: "424" },
{ name: "成都市", value: "1" },
{ name: "成都市", value: "25" },
{ name: "绵阳市", value: "36" },
{ name: "广安市", value: "1000" },
{ name: "雅安市", value: "1000" },
{ name: "自贡市", value: "1000" },
{ name: "宜宾市", value: "1000" },
{ name: "宜宾市", value: "1000" },
{ name: "宜宾市", value: "1000" },
{ name: "宜宾市", value: "1000" },
{ name: "甘孜藏族自治州市", value: "1000" }
];
let codeList = {
成都市: { center: { lng: 104.061902, lat: 30.609503 } },
广安市: { center: { lng: 106.619126, lat: 30.474142 } },
绵阳市: { center: { lng: 104.673612, lat: 31.492565 } },
雅安市: { center: { lng: 103.031653, lat: 30.018895 } },
自贡市: { center: { lng: 104.797794, lat: 29.368322 } },
宜宾市: { center: { lng: 104.610964, lat: 28.781347 } },
甘孜藏族自治州市: {
center: { lng: 101.592433, lat: 30.426712 }
}
};
heatmap.AppendFeatures(hatmapData, true, colors, codeList, 50);
}

3. 完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166

<template>
<div id="app">
<div id="Map" ref="map"></div>
</div>
</template>
<script>
import "ol/ol.css";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Tile as TileLayer } from "ol/layer";
import Proj from "ol/proj/Projection";
import XYZ from "ol/source/XYZ";
import { Map, View, Feature, ol } from "ol";
import { Style, Stroke, Fill } from "ol/style";
import { Polygon, Point } from "ol/geom";
import { defaults as defaultControls } from "ol/control";
import { fromLonLat } from "ol/proj";

// 封装的Heatmap热力图文件
import Heatmap from "../../lib/Heatmap.js";
// 四川的边界数据文件
import areaGeo from "@/geoJson/sichuan.json";
export default {
data() {
return {
map: null
};
},
methods: {
/**
* 初始化地图
*/
initMap() {
this.map = new Map({
target: "Map",
controls: defaultControls({
zoom: true
}).extend([]),
layers: [
new TileLayer({
source: new XYZ({
url:
"http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
})
})
],
view: new View({
// projection: "EPSG:4326",
center: fromLonLat([104.065735, 30.659462]),
zoom: 6.5,
maxZoom: 19,
minZoom: 5
})
});
},
/**
* 设置区域
*/
addArea(geo = []) {
if (geo.length == 0) {
return false;
}
let features = [];
geo.forEach(g => {
let lineData = g.features[0];
let routeFeature = "";
if (lineData.geometry.type == "MultiPolygon") {
routeFeature = new Feature({
geometry: new MultiPolygon(
lineData.geometry.coordinates
).transform("EPSG:4326", "EPSG:3857")
});
} else if (lineData.geometry.type == "Polygon") {
routeFeature = new Feature({
geometry: new Polygon(
lineData.geometry.coordinates
).transform("EPSG:4326", "EPSG:3857")
});
}
routeFeature.setStyle(
new Style({
fill: new Fill({
color: "#4e98f444"
}),
stroke: new Stroke({
width: 3,
color: [71, 137, 227, 1]
})
})
);
features.push(routeFeature);
});
// 设置图层
let routeLayer = new VectorLayer({
source: new VectorSource({
features: features
})
});
// 添加图层
this.map.addLayer(routeLayer);
},
/**
* 鼠标悬浮改变图标样式
*/
pointerMove() {
let _that = this;
this.map.on("pointermove", function(evt) {
_that.map.getTargetElement().style.cursor = _that.map.hasFeatureAtPixel(
evt.pixel
)
? "pointer"
: "";
});
},
/**
* 添加热力图
*/
addHeatMap() {
let colors = [
"#2200FF",
"#16D9CC",
"#4DEE12",
"#E8D225",
"#EF1616"
];
let heatmap = new Heatmap(this.map, 30, 15, colors);
let hatmapData = [
{ name: "成都市", value: "85" },
{ name: "成都市", value: "424" },
{ name: "成都市", value: "1" },
{ name: "成都市", value: "25" },
{ name: "绵阳市", value: "36" },
{ name: "广安市", value: "1000" },
{ name: "雅安市", value: "1000" },
{ name: "自贡市", value: "1000" },
{ name: "宜宾市", value: "1000" },
{ name: "宜宾市", value: "1000" },
{ name: "宜宾市", value: "1000" },
{ name: "宜宾市", value: "1000" },
{ name: "甘孜藏族自治州市", value: "1000" }
];
let codeList = {
成都市: { center: { lng: 104.061902, lat: 30.609503 } },
广安市: { center: { lng: 106.619126, lat: 30.474142 } },
绵阳市: { center: { lng: 104.673612, lat: 31.492565 } },
雅安市: { center: { lng: 103.031653, lat: 30.018895 } },
自贡市: { center: { lng: 104.797794, lat: 29.368322 } },
宜宾市: { center: { lng: 104.610964, lat: 28.781347 } },
甘孜藏族自治州市: {
center: { lng: 101.592433, lat: 30.426712 }
}
};
heatmap.AppendFeatures(hatmapData, true, colors, codeList, 50);
}
},
mounted() {
this.initMap(); //初始化地图
this.addArea(areaGeo); //添加四川省的边界描边和填充
this.pointerMove(); //设置鼠标样式
this.addHeatMap(); //添加热力图数据
}
};
</script>
<style lang="scss" scoped>
// 此处非核心，已经删除
</style>

1. 放大缩小地图热力图效果

2. 实现热力图的代码（ addHeatMap 和 封装的 Heatmap.js 文件）

3. 完整代码

2. 实现热力图的代码（ addHeatMap 和封装的 Heatmap.js 文件）