1. 寫在前面
本問下面有矢量圖層設置的區域,和熱力圖層設置的熱力圖的效果,區域繪制效怎么設置詳細內容可以訪問 openlayers6【十七】vue VectorLayer矢量圖層畫地圖省市區,多省市區(粵港澳大灣區)效果詳解,主要講解的是熱力圖層效果實現。區域繪制只是為了效果更好看。好了,繼續往下看
在 openlayers 中,圖層是使用 layer 對象表示的,主要有 WebGLPoints Layer、熱度圖(HeatMap Layer)、圖片圖層(Image Layer)、切片圖層(Tile Layer)和 矢量圖層(Vector Layer)五種類型,它們都是繼承 Layer 類的。
前面兩篇文章 我們講了矢量圖層 VectorLayer的常用的場景,這篇我們寫一篇 HeatMapLayer 的使用。可以看下圖所示的熱力圖實現效果。 放大縮小地圖熱力圖效果。
2. Heatmap 類實現熱力圖
2.1 Heatmap 參數
var heatmapLayer = new ol.layer.Heatmap({ source: source, opacity:1, visible:true, zIndex:1, gradient:['#00f','#0ff','#0f0','#ff0','#f00'], blur: 15, radius: 8, extent:[100,30,104,40], });
2.2 實現熱力圖
2.2.1 addHeatMap()方法詳解:
-
準備熱力圖需要的初始化數據,colors 熱圖的顏色漸變,hatmapData 表示值數量越多顯示到頁面的熱力圖顏色越深。codeList 準備的數據的城市對應的經緯度坐標。
-
創建熱力圖圖層
HeatmapLayer
-
把熱力圖圖層添加到
map 中
-
調用添加熱力圖要素的方法
AppendFeatures()
2.2.2 addHeatMap()方法代碼:
addHeatMap() { let colors = [ "#2200FF", "#16D9CC", "#4DEE12", "#E8D225", "#EF1616" ]; let hatmapData = [ { name: "成都市" }, { name: "成都市" }, { name: "成都市" }, { name: "成都市" }, { name: "綿陽市" }, { name: "廣安市" }, { name: "雅安市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "宜賓市" }, { name: "甘孜藏族自治州市" } ]; 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 } } }; this.layer = new HeatmapLayer({ source: new VectorSource(), blur: 30, radius: 15, gradient: colors }); this.map.addLayer(this.layer); this.AppendFeatures(hatmapData, colors, codeList, 50); },
-
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
2.2.3 AppendFeatures()方法詳解:
-
遍歷hatmapData和points數據根據名稱一致的 循環創建要素
new Feature點new Point信息
-
把要素添加到熱力圖層的數據源中
2.2.4 AppendFeatures()方法代碼:
AppendFeatures(hatmapData, colors, points, max) { for (var i in hatmapData) { if (points[hatmapData[i].name]) { var coords = points[hatmapData[i].name]; this.max = max; var f = new Feature({ geometry: new Point( fromLonLat([coords.center.lng, coords.center.lat]) ) }); this.layer.getSource().addFeature(f); } } }
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
3. 完整代碼
<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, Heatmap as HeatmapLayer } 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"; 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({ 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); }, addHeatMap() { let colors = [ "#2200FF", "#16D9CC", "#4DEE12", "#E8D225", "#EF1616" ]; let hatmapData = [ { name: "成都市" }, { name: "成都市" }, { name: "成都市" }, { name: "成都市" }, { name: "綿陽市" }, { name: "廣安市" }, { name: "雅安市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "自貢市" }, { name: "宜賓市" }, { name: "甘孜藏族自治州市" } ]; 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 } } }; this.layer = new HeatmapLayer({ source: new VectorSource(), blur: 30, radius: 15, gradient: colors }); this.map.addLayer(this.layer); this.AppendFeatures(hatmapData, colors, codeList, 50); }, AppendFeatures(hatmapData, colors, points, max) { for (var i in hatmapData) { if (points[hatmapData[i].name]) { var coords = points[hatmapData[i].name]; this.max = max; var f = new Feature({ geometry: new Point( fromLonLat([coords.center.lng, coords.center.lat]) ) }); this.layer.getSource().addFeature(f); } } } }, mounted() { this.initMap(); this.addArea(areaGeo); this.addHeatMap(); } }; </script> <style lang="scss" scoped> // 此處非核心內容,已刪除 </style>
-
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
-
167
-
168
-
169
-
170
-
171
-
172
-
173
-
174
-
175
-
176
-
177
4. 添加刪除map圖層的方法
this.map.addLayer(this.layer) this.map.removeLayer(this.layer)
5. 熱力圖自身的get,set方法
heatmapLayer.getBlur() heatmapLayer.setBlur(15) heatmapLayer.getExtent() heatmapLayer.setExtent([100,30,104,40]) heatmapLayer.getGradient() heatmapLayer.setGradient(['#00f','#0ff','#0f0','#ff0','#f00']) heatmapLayer.getMaxZoom() heatmapLayer.setMaxZoom(18) heatmapLayer.getMinZoom() heatmapLayer.setMinZoom(2) heatmapLayer.getOpacity() heatmapLayer.setOpacity(0.5) heatmapLayer.getRadius() heatmapLayer.setRadius(5) heatmapLayer.getSource() heatmapLayer.setSource(source) heatmapLayer.getVisible() heatmapLayer.setVisible(true) heatmapLayer.getZIndex() heatmapLayer.setZIndex(2) heatmapLayer.on(type,listener) heatmapLayer.un(type,listener)
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

部分借鑒自:csdn
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務