openlayes聚合数据加弹出框显示，包含不同的状态显示不同的样式
<!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;
}
#poper {
/* display: none; */
position: absolute;
top: 0;
width: 200px;
height: 100px;
background-color: rgba(255, 255, 255, 0.5);
}
</style>
<link href="./ol.css" rel="stylesheet" />
<script src="./v6.14.1/build/ol.js"></script>
</head>
<body>
<div id="map">
<div id="poper">
</div>
</div>
<script>
// 随机创建1000个要素
var featuresarr = [];
var source = new ol.source.Vector();
for (var i = 1; i <= 1; i++) {
var coordinates = [120.00 + Math.random(), 30.00 + Math.random()];
var feature = new ol.Feature(new ol.geom.Point(coordinates));
feature.type = "严重";
source.addFeature(feature);
featuresarr.push(feature)
}
for (var i = 1; i <= 25; i++) {
var coordinates = [120.01 + Math.random(), 30.01 + Math.random()];
var feature = new ol.Feature(new ol.geom.Point(coordinates));
if (i == 15) {
feature.type = "严重";
} else {
feature.type = "正常";
}
source.addFeature(feature);
featuresarr.push(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
})
// 创建图层
var layer = new ol.layer.Vector({
source: cluster,
style: function (feature, resolution) {
var features = feature.get('features');
var size = features.length;
if (size == 1) {
return new ol.style.Style({
image: new ol.style.Icon({
src: './位置.png',
scale: 0.2
})
})
} else {
var flag = false;
features.forEach(item => {
if (item.type == '严重') {
flag = true;
}
})
if (flag) {
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: 'red'
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: 'white'
})
})
})
} 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: 'yellow'
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: 'blank'
})
})
})
}
}
}
});
// 创建地图
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.57678222656251, 30.63652038574219],
zoom: 10,
minZoom: 5,
maxZoom: 14
})
});
// 监听地图分辨率改变事件
map.getView().on('change:resolution', function (event) {
if (map.getView().getZoom() == map.getView().getMaxZoom()) {
cluster.setDistance(0);
}
else {
cluster.setDistance(100);
}
})
let Popur = document.getElementById('poper')
var poper = new ol.Overlay({
element: Popur,
offset: [0, 0],
positioning: 'bottom-center',
autoPan: true,
autoPanAnimation: { // 底图移动动画
duration: 250
}
})
// 监听地图单击事件
map.on('singleclick', function (e) {
console.log(e.coordinate);
var coordinate=e.coordinate
var pixel = map.getEventPixel(e.originalEvent);
var currentFeature = map.forEachFeatureAtPixel(pixel, function (feature, layer) {
return feature;
});
if (currentFeature.getProperties().features.length == 1) {
map.addOverlay(poper)
Popur.innerHTML = '经度：' + coordinate[0].toFixed(4)
+
'</br>'
+ '纬度：' + coordinate[1].toFixed(4);
poper.setPosition(e.coordinate);
}else{
Popur.innerHTML = '当前点击的是多个要素点';
poper.setPosition(e.coordinate);
}
});
</script>
</body>
</html>
