1 | goog.require('ol.Feature');
|
2 | goog.require('ol.Map');
|
3 | goog.require('ol.View');
|
4 | goog.require('ol.geom.Point');
|
5 | goog.require('ol.layer.Tile');
|
6 | goog.require('ol.layer.Vector');
|
7 | goog.require('ol.source.Cluster');
|
8 | goog.require('ol.source.OSM');
|
9 | goog.require('ol.source.Vector');
|
10 | goog.require('ol.style.Circle');
|
11 | goog.require('ol.style.Fill');
|
12 | goog.require('ol.style.Stroke');
|
13 | goog.require('ol.style.Style');
|
14 | goog.require('ol.style.Text');
|
15 |
|
16 |
|
17 | var distance = document.getElementById('distance');
|
18 |
|
19 | var count = 20000;
|
20 | var features = new Array(count);
|
21 | var e = 4500000;
|
22 | for (var i = 0; i < count; ++i) {
|
23 | var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
|
24 | features[i] = new ol.Feature(new ol.geom.Point(coordinates));
|
25 | }
|
26 |
|
27 | var source = new ol.source.Vector({
|
28 | features: features
|
29 | });
|
30 |
|
31 | var clusterSource = new ol.source.Cluster({
|
32 | distance: parseInt(distance.value, 10),
|
33 | source: source
|
34 | });
|
35 |
|
36 | var styleCache = {};
|
37 | var clusters = new ol.layer.Vector({
|
38 | source: clusterSource,
|
39 | style: function(feature) {
|
40 | var size = feature.get('features').length;
|
41 | var style = styleCache[size];
|
42 | if (!style) {
|
43 | style = new ol.style.Style({
|
44 | image: new ol.style.Circle({
|
45 | radius: 10,
|
46 | stroke: new ol.style.Stroke({
|
47 | color: '#fff'
|
48 | }),
|
49 | fill: new ol.style.Fill({
|
50 | color: '#3399CC'
|
51 | })
|
52 | }),
|
53 | text: new ol.style.Text({
|
54 | text: size.toString(),
|
55 | fill: new ol.style.Fill({
|
56 | color: '#fff'
|
57 | })
|
58 | })
|
59 | });
|
60 | styleCache[size] = style;
|
61 | }
|
62 | return style;
|
63 | }
|
64 | });
|
65 |
|
66 | var raster = new ol.layer.Tile({
|
67 | source: new ol.source.OSM()
|
68 | });
|
69 |
|
70 | var map = new ol.Map({
|
71 | layers: [raster, clusters],
|
72 | target: 'map',
|
73 | view: new ol.View({
|
74 | center: [0, 0],
|
75 | zoom: 2
|
76 | })
|
77 | });
|
78 |
|
79 | distance.addEventListener('input', function() {
|
80 | clusterSource.setDistance(parseInt(distance.value, 10));
|
81 | });
|