operlayer3.5 实现聚合，最大比例尺下，单个显示的例子
先上效果图，这个是我用高德地图做的聚合效果，因客户需要，做离线地图，这里用openlayer 做。
用openlayer 3.5 写与高德地图效果一样的功能。
我用openlayer 中也是遇到很多坑，很多百度也查不到，所以我在这里分享一下。
第一步，先让地图加载出来
var overlayGroup = new ol.layer.Group({
title: 'Overlays',
layers: [
]
});
var projection = ol.proj.get('EPSG:4326');
var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7];
var gridNames = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21'];
var projection3857 = ol.proj.get('EPSG:900913');
var projectionExtent = projection3857.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions3857 = new Array(18);
var matrixIds = new Array(18);
for (var z = 1; z < 19; ++z) {
// generate resolutions and matrixIds arrays for this WMTS
resolutions3857[z] = size / Math.pow(2, z);
matrixIds[z] = 'EPSG:900913:'+z;
}
var resolutions900913 = new Array(18);
var matrixIds900913 = new Array(18);
for (var z = 1; z < 19; ++z) {
// generate resolutions and matrixIds arrays for this WMTS
resolutions900913[z] = size / Math.pow(2, z);
matrixIds900913[z] = 'EPSG:900913:'+z;
}
var mapUrl = getCenter().offlineMapAddr;
/* 初始化地图 */
var map = new ol.Map({
target: 'mapContainer',
controls: ol.control.defaults({
attribution:true,
rotate:true,
zoomOptions:false,
zoom:false,
attributionOptions: ({ collapsible: false }),
}),
layers: [
new ol.layer.Group({
title: '电子地图',
type: 'base',
layers: [
new ol.layer.Tile({
title: 'OSM',
source: new ol.source.WMTS({
//服务地址
url: mapUrl,
layer: 'webgis:weifang',
//切片集
matrixSet: 'EPSG:900913',
format: 'image/png',
projection: projection3857,
//切片信息
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projection3857.getExtent()),
resolutions: resolutions900913,
matrixIds: matrixIds900913,
}),
style: '',
wrapX: true
}),
})
]
}),
overlayGroup
],
view: new ol.View({
center: ol.proj.transform([119.107078,36.70925], 'EPSG:4326', 'EPSG:3857'),
zoom: 15,
maxZoom:20,
minZoom:10,
})
});
//添加比例尺
var scaleline = new ol.control.ScaleLine();
map.addControl(scaleline);
//添加放大缩小
var zoom = new ol.control.Zoom();
map.addControl(zoom);
// 地图拖动触发的事件
map.on("pointerdrag", function (e) {
// 坐标转换
var viewlatlng = ol.proj.transform(map.getView().getCenter(), 'EPSG:3857', 'EPSG:4326');
});
//缩放事件
map.on("zoomend", function(e){
});
// 单击地图事件 带一点延时效果 建议使用
map.on("singleclick", function (e) {
});
map.on('pointermove',function(evt){
var coordinate = evt.coordinate;
//判断当前单击处是否有要素，捕获到要素时弹出popup
try {
var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layerVetor) { return feature; });
var featuerInfo = feature.values_.features;
// 当鼠标放到聚合的上面时，可以拿到聚合下的所有数据点
if(feature && feature.values_.features.length == 1){
}
} catch (error){
}
});
// 聚合 样式 和单点样式的处理 显示
var currentResolution;
function styleFunction(feature, resolution) {
if (resolution != currentResolution) {
// 根据resolution处理图形聚合状态
currentResolution = resolution;
}
var style;
var size = feature.get('features').length;
if (size > 1) {
// 聚合图形样式，自动获取对应半径，调整颜色深度
var feature = feature.get('features')
var factive;
if(factive){
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 15,
stroke: new ol.style.Stroke({
color: '#fff'
}),
fill: new ol.style.Fill({
color: '#FF0000'
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: '#fff'
})
})
});
} else {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: 15,
stroke: new ol.style.Stroke({
color: '#fff'
}),
fill: new ol.style.Fill({
color: '#3399CC'
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: '#fff'
})
})
});
}
} else {
//8 console.log(originalFeature);
// 单个图形样式处理方法
style = new ol.style.Style({
geometry: feature.getGeometry(),
image: new ol.style.Icon({
anchor: [0.5, 46],
anchorXUnits: 'fraction',
anchorYUnits: 'pixels',
src: '${ctx}/resources/static/images/icon1.png'
})
});
}
return style;
}
var clusterSource;
function getDevList(lonlat) {
$.ajax({
type: "",
url: "",
data: {
},
dataType:'json',
success: function (result) {
try {
clusterSource.getSource().clear(); //移除聚合标注数据源中的所有要素
map.removeLayer(clusters);
} catch (e){}
//console.log(result);
var count = result.devlist.length;
//创建一个要素数组
var features = new Array(count);
for (var i = 0; i < result.devlist.length; i++) {
//要素坐标
var coordinates = ol.proj.transform([result.devlist[i].longitude, result.devlist[i].latitude], 'EPSG:4326', 'EPSG:3857');
// console.log(coordinates);
var attr = {
devname: result.devlist[i].devname
};
//新建点要素
features[i] = new ol.Feature({
geometry: new ol.geom.Point(coordinates),
attribute: attr
});
}
//矢量要素数据源
var source = new ol.source.Vector({
features: features
});
//聚合标注数据源
clusterSource = new ol.source.Cluster({
distance: 50, //聚合的距离参数，即当标注间距离小于此值时进行聚合，单位是像素
source: source //聚合的数据源，即矢量要素数据源对象
});
//加载聚合标注的矢量图层
var styleCache = {};
//用于保存特定数量的聚合群的要素样式
var clusters = new ol.layer.Vector({
source: clusterSource,
style: styleFunction
});
map.addLayer(clusters);
},
error: function(err) {
}
});
};
聚合的所有代码，有问题留言！