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.Circle');
|
8 | goog.require('ol.style.Fill');
|
9 | goog.require('ol.style.Stroke');
|
10 | goog.require('ol.style.Style');
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | var redLayer = new ol.layer.Vector({
|
18 | source: new ol.source.Vector({
|
19 | features: [new ol.Feature(new ol.geom.Point([0, 0]))]
|
20 | }),
|
21 | style: new ol.style.Style({
|
22 | image: new ol.style.Circle({
|
23 | fill: new ol.style.Fill({
|
24 | color: 'rgba(255,0,0,0.8)'
|
25 | }),
|
26 | stroke: new ol.style.Stroke({
|
27 | color: 'rgb(255,0,0)',
|
28 | width: 15
|
29 | }),
|
30 | radius: 120
|
31 | })
|
32 | })
|
33 | });
|
34 | var greenLayer = new ol.layer.Vector({
|
35 | source: new ol.source.Vector({
|
36 |
|
37 | features: [new ol.Feature(new ol.geom.Point([250, 433.013]))]
|
38 | }),
|
39 | style: new ol.style.Style({
|
40 | image: new ol.style.Circle({
|
41 | fill: new ol.style.Fill({
|
42 | color: 'rgba(0,255,0,0.8)'
|
43 | }),
|
44 | stroke: new ol.style.Stroke({
|
45 | color: 'rgb(0,255,0)',
|
46 | width: 15
|
47 | }),
|
48 | radius: 120
|
49 | })
|
50 | })
|
51 | });
|
52 | var blueLayer = new ol.layer.Vector({
|
53 | source: new ol.source.Vector({
|
54 | features: [new ol.Feature(new ol.geom.Point([500, 0]))]
|
55 | }),
|
56 | style: new ol.style.Style({
|
57 | image: new ol.style.Circle({
|
58 | fill: new ol.style.Fill({
|
59 | color: 'rgba(0,0,255,0.8)'
|
60 | }),
|
61 | stroke: new ol.style.Stroke({
|
62 | color: 'rgb(0,0,255)',
|
63 | width: 15
|
64 | }),
|
65 | radius: 120
|
66 | })
|
67 | })
|
68 | });
|
69 |
|
70 |
|
71 |
|
72 | var map = new ol.Map({
|
73 | layers: [
|
74 | redLayer,
|
75 | greenLayer,
|
76 | blueLayer
|
77 | ],
|
78 | target: 'map',
|
79 | view: new ol.View({
|
80 | center: [250, 220],
|
81 | extent: [0, 0, 500, 500],
|
82 | resolution: 4,
|
83 | minResolution: 2,
|
84 | maxResolution: 32
|
85 | })
|
86 | });
|
87 |
|
88 |
|
89 | var select = document.getElementById('blend-mode');
|
90 | var affectRed = document.getElementById('affect-red');
|
91 | var affectGreen = document.getElementById('affect-green');
|
92 | var affectBlue = document.getElementById('affect-blue');
|
93 |
|
94 |
|
95 |
|
96 |
|
97 |
|
98 |
|
99 |
|
100 |
|
101 | var setBlendModeFromSelect = function(evt) {
|
102 | evt.context.globalCompositeOperation = select.value;
|
103 | };
|
104 |
|
105 |
|
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 |
|
112 | var resetBlendModeFromSelect = function(evt) {
|
113 | evt.context.globalCompositeOperation = 'source-over';
|
114 | };
|
115 |
|
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 | var bindLayerListeners = function(layer) {
|
123 | layer.on('precompose', setBlendModeFromSelect);
|
124 | layer.on('postcompose', resetBlendModeFromSelect);
|
125 | };
|
126 |
|
127 |
|
128 |
|
129 |
|
130 |
|
131 |
|
132 |
|
133 | var unbindLayerListeners = function(layer) {
|
134 | layer.un('precompose', setBlendModeFromSelect);
|
135 | layer.un('postcompose', resetBlendModeFromSelect);
|
136 | };
|
137 |
|
138 |
|
139 |
|
140 |
|
141 |
|
142 |
|
143 |
|
144 | var affectLayerClicked = function() {
|
145 | var layer;
|
146 | if (this.id == 'affect-red') {
|
147 | layer = redLayer;
|
148 | } else if (this.id == 'affect-green') {
|
149 | layer = greenLayer;
|
150 | } else {
|
151 | layer = blueLayer;
|
152 | }
|
153 | if (this.checked) {
|
154 | bindLayerListeners(layer);
|
155 | } else {
|
156 | unbindLayerListeners(layer);
|
157 | }
|
158 | map.render();
|
159 | };
|
160 |
|
161 |
|
162 |
|
163 | select.addEventListener('change', function() {
|
164 | map.render();
|
165 | });
|
166 |
|
167 |
|
168 |
|
169 | affectRed.addEventListener('click', affectLayerClicked);
|
170 | affectGreen.addEventListener('click', affectLayerClicked);
|
171 | affectBlue.addEventListener('click', affectLayerClicked);
|
172 |
|
173 |
|
174 | bindLayerListeners(redLayer);
|
175 | bindLayerListeners(greenLayer);
|
176 | bindLayerListeners(blueLayer);
|