先上效果图,这个是我用高德地图做的聚合效果,因客户需要,做离线地图,这里用openlayer 做。
用openlayer 3.5 写与高德地图效果一样的功能。
我用openlayer 中也是遇到很多坑,很多百度也查不到,所以我在这里分享一下。
第一步,先让地图加载出来
<div id="mapContainer" style="height:96.5%;"></div>
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] = 'EP