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.Vector');
|
6 | goog.require('ol.source.Vector');
|
7 | goog.require('ol.style.AtlasManager');
|
8 | goog.require('ol.style.Circle');
|
9 | goog.require('ol.style.Fill');
|
10 | goog.require('ol.style.RegularShape');
|
11 | goog.require('ol.style.Stroke');
|
12 | goog.require('ol.style.Style');
|
13 |
|
14 | var atlasManager = new ol.style.AtlasManager({
|
15 |
|
16 |
|
17 | initialSize: 512
|
18 | });
|
19 |
|
20 | var symbolInfo = [{
|
21 | opacity: 1.0,
|
22 | scale: 1.0,
|
23 | fillColor: 'rgba(255, 153, 0, 0.4)',
|
24 | strokeColor: 'rgba(255, 204, 0, 0.2)'
|
25 | }, {
|
26 | opacity: 0.75,
|
27 | scale: 1.25,
|
28 | fillColor: 'rgba(70, 80, 224, 0.4)',
|
29 | strokeColor: 'rgba(12, 21, 138, 0.2)'
|
30 | }, {
|
31 | opacity: 0.5,
|
32 | scale: 1.5,
|
33 | fillColor: 'rgba(66, 150, 79, 0.4)',
|
34 | strokeColor: 'rgba(20, 99, 32, 0.2)'
|
35 | }, {
|
36 | opacity: 1.0,
|
37 | scale: 1.0,
|
38 | fillColor: 'rgba(176, 61, 35, 0.4)',
|
39 | strokeColor: 'rgba(145, 43, 20, 0.2)'
|
40 | }];
|
41 |
|
42 | var radiuses = [3, 6, 9, 15, 19, 25];
|
43 | var symbolCount = symbolInfo.length * radiuses.length * 2;
|
44 | var symbols = [];
|
45 | var i, j;
|
46 | for (i = 0; i < symbolInfo.length; ++i) {
|
47 | var info = symbolInfo[i];
|
48 | for (j = 0; j < radiuses.length; ++j) {
|
49 |
|
50 | symbols.push(new ol.style.Circle({
|
51 | opacity: info.opacity,
|
52 | scale: info.scale,
|
53 | radius: radiuses[j],
|
54 | fill: new ol.style.Fill({
|
55 | color: info.fillColor
|
56 | }),
|
57 | stroke: new ol.style.Stroke({
|
58 | color: info.strokeColor,
|
59 | width: 1
|
60 | }),
|
61 |
|
62 |
|
63 | atlasManager: atlasManager
|
64 | }));
|
65 |
|
66 |
|
67 | symbols.push(new ol.style.RegularShape({
|
68 | points: 8,
|
69 | opacity: info.opacity,
|
70 | scale: info.scale,
|
71 | radius: radiuses[j],
|
72 | radius2: radiuses[j] * 0.7,
|
73 | angle: 1.4,
|
74 | fill: new ol.style.Fill({
|
75 | color: info.fillColor
|
76 | }),
|
77 | stroke: new ol.style.Stroke({
|
78 | color: info.strokeColor,
|
79 | width: 1
|
80 | }),
|
81 | atlasManager: atlasManager
|
82 | }));
|
83 | }
|
84 | }
|
85 |
|
86 | var featureCount = 50000;
|
87 | var features = new Array(featureCount);
|
88 | var feature, geometry;
|
89 | var e = 25000000;
|
90 | for (i = 0; i < featureCount; ++i) {
|
91 | geometry = new ol.geom.Point(
|
92 | [2 * e * Math.random() - e, 2 * e * Math.random() - e]);
|
93 | feature = new ol.Feature(geometry);
|
94 | feature.setStyle(
|
95 | new ol.style.Style({
|
96 | image: symbols[i % symbolCount]
|
97 | })
|
98 | );
|
99 | features[i] = feature;
|
100 | }
|
101 |
|
102 | var vectorSource = new ol.source.Vector({
|
103 | features: features
|
104 | });
|
105 | var vector = new ol.layer.Vector({
|
106 | source: vectorSource
|
107 | });
|
108 |
|
109 | var map = new ol.Map({
|
110 | renderer: (['webgl', 'canvas']),
|
111 | layers: [vector],
|
112 | target: document.getElementById('map'),
|
113 | view: new ol.View({
|
114 | center: [0, 0],
|
115 | zoom: 4
|
116 | })
|
117 | });
|