OpenLayers實現(xiàn)點要素圖層的聚合顯示的方法
更新時間：2021年09月16日 11:19:14 作者：HerryDong
在很多情況下，點要素圖層中的要素數(shù)量可能會成百上千，如果一個點要素圖層中的點數(shù)量很多，我們就會采取圖層聚合的方式對其進(jìn)行處理，本文就來介紹一下，感興趣的可以了解一下
1、前言
在很多情況下，點要素圖層中的要素數(shù)量可能會成百上千，這時候如果不做任何處理直接加載到地圖上不僅會使用戶視覺體驗下降，而且也會造成地圖界面的卡頓。下面這段代碼創(chuàng)建了1000個隨機點進(jìn)行顯示：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>OpenLayers</title>
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<link href="libs/ol/ol.css" rel="stylesheet" />
<script src="libs/ol/ol.js"></script>
</head>
<body>
<div id="map"></div>
<script>
// 隨機創(chuàng)建1000個要素
var source = new ol.source.Vector();
for (var i = 1; i <= 200; i++) {
var coordinates = [120.00 + Math.random(), 30.00 + Math.random()];
var feature = new ol.Feature(new ol.geom.Point(coordinates));
source.addFeature(feature);
}
for (var i = 1; i <= 200; i++) {
var coordinates = [120.01 + Math.random(), 30.01 + Math.random()];
var feature = new ol.Feature(new ol.geom.Point(coordinates));
source.addFeature(feature);
}
for (var i = 1; i <= 200; i++) {
var coordinates = [120.02 + Math.random(), 30.02 + Math.random()];
var feature = new ol.Feature(new ol.geom.Point(coordinates));
source.addFeature(feature);
}
for (var i = 1; i <= 200; i++) {
var coordinates = [120.03 + Math.random(), 30.03 + Math.random()];
var feature = new ol.Feature(new ol.geom.Point(coordinates));
source.addFeature(feature);
}
for (var i = 1; i <= 200; i++) {
var coordinates = [120.04 + Math.random(), 30.04 + Math.random()];
var feature = new ol.Feature(new ol.geom.Point(coordinates));
source.addFeature(feature);
}
// 創(chuàng)建圖層
var layer = new ol.layer.Vector({
source: source,
style: function (feature, resolution) {
var style = new ol.style.Style({
image: new ol.style.Icon({
src: 'img/location.png'
})
})
return style;
}
});
// 創(chuàng)建地圖
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
layer
],
view: new ol.View({
projection: 'EPSG:4326',
center: [120, 30],
zoom: 10,
minZoom: 5,
maxZoom: 14
})
});
</script>
</body>
</html>
運行結(jié)果如下圖所示：
這么多點擠在一起，是不是感覺很惡心？一般來說，如果一個點要素圖層中的點數(shù)量很多，我們就會采取圖層聚合的方式對其進(jìn)行處理。但需要注意：圖層聚合只對點要素圖層有效，對線和面圖層無效。
2、點要素圖層的聚合
在openlayers中，圖層聚合的一般步驟如下：
- 創(chuàng)建要素
- 創(chuàng)建數(shù)據(jù)源添加要素
- 創(chuàng)建聚合數(shù)據(jù)源，設(shè)置聚合的距離
- 創(chuàng)建圖層，將數(shù)據(jù)源設(shè)置為聚合數(shù)據(jù)源
- 創(chuàng)建地圖，添加聚合圖層
圖層聚合代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>OpenLayers</title>
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<link href="libs/ol/ol.css" rel="stylesheet" />
<script src="libs/ol/ol.js"></script>
</head>
<body>
<div id="map"></div>
<script>
// 隨機創(chuàng)建1000個要素
var source = new ol.source.Vector();
for (var i = 1; i <= 200; i++) {
var coordinates = [120.00 + Math.random(), 30.00 + Math.random()];
var feature = new ol.Feature(new ol.geom.Point(coordinates));
source.addFeature(feature);
}
for (var i = 1; i <= 200; i++) {
var coordinates = [120.01 + Math.random(), 30.01 + Math.random()];
var feature = new ol.Feature(new ol.geom.Point(coordinates));
source.addFeature(feature);
}
for (var i = 1; i <= 200; i++) {
var coordinates = [120.02 + Math.random(), 30.02 + Math.random()];
var feature = new ol.Feature(new ol.geom.Point(coordinates));
source.addFeature(feature);
}
for (var i = 1; i <= 200; i++) {
var coordinates = [120.03 + Math.random(), 30.03 + Math.random()];
var feature = new ol.Feature(new ol.geom.Point(coordinates));
source.addFeature(feature);
}
for (var i = 1; i <= 200; i++) {
var coordinates = [120.04 + Math.random(), 30.04 + Math.random()];
var feature = new ol.Feature(new ol.geom.Point(coordinates));
source.addFeature(feature);
}
// 聚合
var cluster = new ol.source.Cluster({
source: source,
distance: 100
})
// 創(chuàng)建圖層
var layer = new ol.layer.Vector({
source: cluster,
style: function (feature, resolution) {
var size = feature.get('features').length;
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: 30,
stroke: new ol.style.Stroke({
color: 'white'
}),
fill: new ol.style.Fill({
color: 'blue'
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: 'white'
})
})
})
return style;
}
});
// 創(chuàng)建地圖
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
layer
],
view: new ol.View({
projection: 'EPSG:4326',
center: [120, 30],
zoom: 10,
minZoom: 5,
maxZoom: 14
})
});
</script>
</body>
</html>
運行結(jié)果如下圖所示：
3、聚合特殊處理一
上面的代碼雖然實現(xiàn)了點要素圖層的聚合，但其實存在著一個問題：地圖縮放層級最大時仍然保持著聚合效果，如下圖所示：
一般來說，當(dāng)某處只有一個點時就應(yīng)該取消聚合效果，這時候我們就需要在style: function (feature, resolution)這個回調(diào)函數(shù)里做文章了，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>OpenLayers</title>
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<link href="libs/ol/ol.css" rel="stylesheet" />
<script src="libs/ol/ol.js"></script>
</head>
<body>
<div id="map"></div>
<script>
// 隨機創(chuàng)建1000個要素
var source = new ol.source.Vector();
for (var i = 1; i <= 200; i++) {
var coordinates = [120.00 + Math.random(), 30.00 + Math.random()];
var feature = new ol.Feature(new ol.geom.Point(coordinates));
source.addFeature(feature);
}
for (var i = 1; i <= 200; i++) {
var coordinates = [120.01 + Math.random(), 30.01 + Math.random()];
var feature = new ol.Feature(new ol.geom.Point(coordinates));
source.addFeature(feature);
}
for (var i = 1; i <= 200; i++) {
var coordinates = [120.02 + Math.random(), 30.02 + Math.random()];
var feature = new ol.Feature(new ol.geom.Point(coordinates));
source.addFeature(feature);
}
for (var i = 1; i <= 200; i++) {
var coordinates = [120.03 + Math.random(), 30.03 + Math.random()];
var feature = new ol.Feature(new ol.geom.Point(coordinates));
source.addFeature(feature);
}
for (var i = 1; i <= 200; i++) {
var coordinates = [120.04 + Math.random(), 30.04 + Math.random()];
var feature = new ol.Feature(new ol.geom.Point(coordinates));
source.addFeature(feature);
}
// 聚合
var cluster = new ol.source.Cluster({
source: source,
distance: 100
})
// 創(chuàng)建圖層
var layer = new ol.layer.Vector({
source: cluster,
style: function (feature, resolution) {
var size = feature.get('features').length;
if (size == 1) {
return new ol.style.Style({
image: new ol.style.Icon({
src: 'img/location.png'
})
})
}
else {
return new ol.style.Style({
image: new ol.style.Circle({
radius: 30,
stroke: new ol.style.Stroke({
color: 'white'
}),
fill: new ol.style.Fill({
color: 'blue'
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: 'white'
})
})
})
}
}
});
// 創(chuàng)建地圖
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
layer
],
view: new ol.View({
projection: 'EPSG:4326',
center: [120, 30],
zoom: 10,
minZoom: 5,
maxZoom: 14
})
});
</script>
</body>
</html>
運行結(jié)果如下圖所示：
其實這個效果實現(xiàn)起來很簡單，核心代碼就是：var size = feature.get('features').length;，如果size>1，則返回聚合樣式，反之則返回圖片樣式。
4、聚合特殊處理二
在上面的代碼中，我把地圖的最大縮放層級設(shè)置為14，這也就導(dǎo)致了一個問題：當(dāng)?shù)貓D縮放到最大層級時，還有很多點保持著聚合效果。有時候用戶可能會要求：當(dāng)?shù)貓D縮放到最大層級時，取消全部聚合效果。如果要實現(xiàn)這個功能，我們就需要對地圖事件進(jìn)行監(jiān)聽了，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>OpenLayers</title>
<style>
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<link href="libs/ol/ol.css" rel="stylesheet" />
<script src="libs/ol/ol.js"></script>
</head>
<body>
<div id="map"></div>
<script>
// 隨機創(chuàng)建1000個要素
var source = new ol.source.Vector();
for (var i = 1; i <= 200; i++) {
var coordinates = [120.00 + Math.random(), 30.00 + Math.random()];
var feature = new ol.Feature(new ol.geom.Point(coordinates));
source.addFeature(feature);
}
for (var i = 1; i <= 200; i++) {
var coordinates = [120.01 + Math.random(), 30.01 + Math.random()];
var feature = new ol.Feature(new ol.geom.Point(coordinates));
source.addFeature(feature);
}
for (var i = 1; i <= 200; i++) {
var coordinates = [120.02 + Math.random(), 30.02 + Math.random()];
var feature = new ol.Feature(new ol.geom.Point(coordinates));
source.addFeature(feature);
}
for (var i = 1; i <= 200; i++) {
var coordinates = [120.03 + Math.random(), 30.03 + Math.random()];
var feature = new ol.Feature(new ol.geom.Point(coordinates));
source.addFeature(feature);
}
for (var i = 1; i <= 200; i++) {
var coordinates = [120.04 + Math.random(), 30.04 + Math.random()];
var feature = new ol.Feature(new ol.geom.Point(coordinates));
source.addFeature(feature);
}
// 聚合
var cluster = new ol.source.Cluster({
source: source,
distance: 100
})
// 創(chuàng)建圖層
var layer = new ol.layer.Vector({
source: cluster,
style: function (feature, resolution) {
var size = feature.get('features').length;
if (size == 1) {
return new ol.style.Style({
image: new ol.style.Icon({
src: 'img/location.png'
})
})
}
else {
return new ol.style.Style({
image: new ol.style.Circle({
radius: 30,
stroke: new ol.style.Stroke({
color: 'white'
}),
fill: new ol.style.Fill({
color: 'blue'
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: 'white'
})
})
})
}
}
});
// 創(chuàng)建地圖
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
layer
],
view: new ol.View({
projection: 'EPSG:4326',
center: [120, 30],
zoom: 10,
minZoom: 5,
maxZoom: 14
})
});
// 監(jiān)聽地圖分辨率改變事件
map.getView().on('change:resolution', function (event) {
if (map.getView().getZoom() == map.getView().getMaxZoom()) {
cluster.setDistance(0);
}
else {
cluster.setDistance(100);
}
})
</script>
</body>
</html>
運行結(jié)果如下圖所示：
這個效果的實現(xiàn)也很簡單，只需要監(jiān)聽當(dāng)前地圖的分辨率變化事件，如果當(dāng)前縮放層級已經(jīng)是最大層級，則將聚合的距離設(shè)置為0即可。
5.、結(jié)語
在要素數(shù)量很多的情況下，我們應(yīng)該考慮對其進(jìn)行聚合處理，這樣不僅提升了用戶的使用感受，而且也可以避免界面卡頓。其實在上面的代碼中，我對change:resolution事件進(jìn)行了監(jiān)聽，你也可以換成另一個事件——moveend，代碼如下所示：
map.on('moveend', function (event) {
if (map.getView().getZoom() == map.getView().getMaxZoom()) {
cluster.setDistance(0);
}
else {
cluster.setDistance(100);
}
});
對moveend事件進(jìn)行監(jiān)聽也可以實現(xiàn)相同的效果，因為無論是地圖的縮放、平移都會觸發(fā)該事件。
到此這篇關(guān)于OpenLayers實現(xiàn)點要素圖層的聚合顯示的方法的文章就介紹到這了,更多相關(guān)OpenLayers 點要素圖層的聚合顯示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JS常用函數(shù)和常用技巧小結(jié)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-10-10
JavaScript 中定義函數(shù)用 var foo = function () {} 和 function foo()區(qū)
這篇文章主要介紹了JavaScript 中定義函數(shù)用 var foo = function () {} 和 function foo()區(qū)別介紹,需要的朋友可以參考下2018-03-03
在知道的key的情況下遍歷map自然就跟數(shù)組一樣的訪問羅，這里就不說了，示例如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
JS實現(xiàn)線性表的順序表示方法示例【經(jīng)典數(shù)據(jù)結(jié)構(gòu)】
這篇文章主要介紹了JS實現(xiàn)線性表的順序表示方法,簡單分析了線性表的原理并結(jié)合實例形式給出了線性表的插入與刪除實現(xiàn)技巧,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了如何在微信小程序中存setStorage,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12
javascript關(guān)于復(fù)選框的實用腳本代碼
javascript關(guān)于復(fù)選框的實用腳本代碼...2007-08-08
這篇文章主要為大家詳細(xì)介紹了php結(jié)合js實現(xiàn)多條件組合查詢，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
echarts實現(xiàn)中國地圖下鉆進(jìn)入下一級(地圖鉆取)
最近在學(xué)習(xí)echarts,今天就來介紹一下echarts實現(xiàn)中國地圖下鉆進(jìn)入下一級,具有一定的參考價值,感興趣的可以了解一下2023-08-08
javascript移動設(shè)備Web開發(fā)中對touch事件的封裝實例
這篇文章主要介紹了javascript移動設(shè)備Web開發(fā)中對touch事件的封裝實例,分別對tap事件、doubleTap事件、longTap事件、swipe事件做了封裝,需要的朋友可以參考下2014-06-06
利用JavaScript編寫Python內(nèi)置函數(shù)查詢工具
Python有豐富的內(nèi)置函數(shù)實現(xiàn)各種功能，但查詢內(nèi)置函數(shù)時總是需要百度查，有沒有一個小工具可以單機無網(wǎng)絡(luò)查詢Python內(nèi)置函數(shù)，方便自己學(xué)習(xí)編寫Python程序呢？本文就來用JavaScript編寫一個2023-02-02