source: ether_iasi/trunk/web/resources/js/OpenLayers-2.12/tests/Renderer/Canvas.html

Last change on this file was 739, checked in by vmipsl, 11 years ago

OpenLayers?
File size: 15.1 KB
Line 
1<html>
2<head>
3<script src="../OLLoader.js"></script>
4  <script type="text/javascript">
5    var supported = OpenLayers.Renderer.Canvas.prototype.supported();
6   
7    var map, layer;
8    function setUp() {
9        map = new OpenLayers.Map("map");
10        layer = new OpenLayers.Layer.Vector(null, {
11            isBaseLayer: true,
12            renderers: ["Canvas"]
13        });
14        map.addLayer(layer);
15        map.setCenter(new OpenLayers.LonLat(0, 0));
16    }
17   
18    function tearDown() {
19        map.destroy();
20        map = null;
21        layer = null;
22    }
23   
24    function test_Renderer_Canvas_constructor(t) {
25        if (!supported) { t.plan(0); return; }
26        t.plan(2);
27        var el = document.body;
28        el.id = "foo";
29        var r = new OpenLayers.Renderer.Canvas(el.id);
30       
31        t.ok(r instanceof OpenLayers.Renderer.Canvas, "new OpenLayers.Renderer.Canvas returns Renderer.Canvas object" );
32        t.ok(r.container == el, "renderer container is correctly set");
33        r.destroy();
34    }
35   
36    function test_Renderer_Canvas_setextent(t) {
37        if (!supported) { t.plan(0); return; }
38        t.plan(2);
39       
40        setUp();
41       
42        var r = layer.renderer;       
43        var extent = new OpenLayers.Bounds(1,2,3,4);
44        r.resolution = 1;
45        r.setExtent(extent, true);
46        t.ok(r.extent.equals(extent), "extent is correctly set");
47        t.eq(r.resolution, null, "resolution nullified");
48       
49        tearDown();
50    }
51   
52    function test_Renderer_Canvas_setsize(t) {
53        if (!supported) { t.plan(0); return; }
54        t.plan(2);
55       
56        var el = document.body;
57        el.id = "foo";
58        var r = new OpenLayers.Renderer.Canvas(el.id);
59        var size = new OpenLayers.Size(1,2);
60        r.resolution = 1;
61        r.setSize(size);
62        t.ok(r.size.equals(size), "size is correctly set");
63        t.eq(r.resolution, null, "resolution nullified");
64        r.destroy();
65    }
66   
67    function test_Renderer_Canvas_getresolution(t) {
68        if (!supported) { t.plan(0); return; }
69        t.plan(2);
70       
71        var el = document.body;
72        el.id = "foo";
73        var r = new OpenLayers.Renderer.Canvas(el.id);
74        var map = new OpenLayers.Map("map");
75        r.map = map;
76        var resolution = r.getResolution();
77        t.eq(resolution, map.getResolution(), "resolution matches the map resolution");
78        t.eq(r.resolution, resolution, "resolution is correctly set");
79        map.destroy();
80    }
81
82    function test_featureIdToHex(t) {
83        if (!supported) {
84            t.plan(0); 
85            return;
86        }
87        t.plan(2);
88        var el = document.body;
89        el.id = "foo";
90        var renderer = new OpenLayers.Renderer.Canvas(el.id);
91       
92        var cases = [{
93            id: "foo_0", hex: "#000001"
94        }, {
95            id: "foo_10", hex: "#00000b"
96        }, {
97            id: "foo_100", hex: "#000065"
98        }, {
99            id: "foo_1000000", hex: "#0f4241"
100        }, {
101            id: "foo_16777214", hex: "#ffffff"
102        }, {
103            id: "foo_16777215", hex: "#000001"
104        }];
105        t.plan(cases.length);
106       
107        var c;
108        for (var i=0; i<cases.length; ++i) {
109            c = cases[i];
110            t.eq(renderer.featureIdToHex(c.id), c.hex, c.id);
111        }
112       
113        renderer.destroy();
114    }
115
116
117    function test_Renderer_Canvas_destroy(t) {
118        if (!supported) { t.plan(0); return; }
119        t.plan(5);
120
121        var el = document.body;
122        el.id = "foo";
123        var r = new OpenLayers.Renderer.Canvas(el.id);
124        r.container = document.createElement("div");
125        r.extent = new OpenLayers.Bounds(1,2,3,4);
126        r.size = new OpenLayers.Size(1,2);
127        r.resolution = 1;
128        r.map = {};
129
130        r.destroy();
131
132        t.eq(r.container, null, "container nullified");
133        t.eq(r.extent, null, "extent nullified");
134        t.eq(r.size, null, "size nullified");
135        t.eq(r.resolution, null, "resolution nullified");
136        t.eq(r.map, null, "map nullified");
137    }
138
139    function test_drawFeature(t) {
140        if (!supported) {
141            t.plan(0); 
142            return; 
143        }
144       
145        t.plan(10);
146       
147        setUp();
148       
149        var renderer = layer.renderer;
150        var count = 0;
151        var redraw = layer.renderer.redraw;
152        renderer.redraw = function() {
153            ++count;
154            redraw.apply(this, arguments);
155        }
156        var exp;
157       
158        // a) draw a point feature
159        count = 0;
160        exp = renderer.drawFeature(
161            new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(0, 0)), {}
162        );
163        t.eq(exp, true, "a) drawFeature returns true");
164        t.eq(count, 1, "a) redraw called once after drawing a point feature");
165        renderer.clear();
166       
167        // b) draw one feature with no geometry
168        count = 0;
169        exp = renderer.drawFeature(
170            new OpenLayers.Feature.Vector(), {}
171        );
172        t.eq(exp, undefined, "b) drawFeature returns undefined");
173        t.eq(count, 0, "b) redraw is not called when drawing a feature with no geometry");
174        renderer.clear();
175       
176        // c) draw a point feature with display "none"
177        count = 0;
178        exp = renderer.drawFeature(
179            new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(1, 0)),
180            {display: "none"}
181        );
182        t.eq(exp, false, "c) drawFeature returns false");
183        t.eq(count, 1, "c) redraw is called when drawing a feature with display 'none'");
184        renderer.clear();
185
186        // d) draw a point feature outside renderer extent
187        count = 0;
188        exp = renderer.drawFeature(
189            new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(-1000, 0)), {}
190        );
191        t.eq(exp, false, "d) drawFeature returns false");
192        t.eq(count, 1, "d) redraw is called when drawing a feature outside renderer extent");
193        renderer.clear();
194       
195        // e) draw a polygon feature without bounds
196        count = 0;
197        exp = renderer.drawFeature(
198            new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Polygon()), {}
199        );
200        t.eq(exp, false, "d) drawFeature returns false");
201        t.eq(count, 1, "d) redraw is called when drawing a feature without bounds");
202        renderer.clear();
203
204        tearDown();
205    }
206
207
208    function test_pendingRedraw(t) {
209        if (!supported) {
210            t.plan(0); 
211            return; 
212        }
213       
214        t.plan(4);
215        var layer = new OpenLayers.Layer.Vector(null, {
216            isBaseLayer: true,
217            renderers: ["Canvas"]
218        });
219       
220        var map = new OpenLayers.Map({
221            div: "map",
222            controls: [],
223            layers: [layer],
224            center: new OpenLayers.LonLat(0, 0),
225            zoom: 0
226        });
227       
228        var count = 0;
229        var redraw = layer.renderer.redraw;
230        layer.renderer.redraw = function() {
231            ++count;
232            redraw.apply(this, arguments);
233        }
234       
235        // add one point feature and confirm redraw is called once
236        count = 0;
237        layer.addFeatures([
238            new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(0, 0))
239        ]);
240        t.eq(count, 1, "redraw called once after adding one point feature");
241       
242        // add one feature with no geometry and confirm redraw is not called
243        count = 0;
244        layer.addFeatures([
245            new OpenLayers.Feature.Vector()
246        ]);
247        t.eq(count, 0, "redraw is not called when adding a feature with no geometry");
248       
249        // add one point feature, one feature with no geom, and one point feature and confirm redraw is called once
250        count = 0;
251        layer.addFeatures([
252            new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(1, 0)),
253            new OpenLayers.Feature.Vector(),
254            new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(0, 1))
255        ]);
256        t.eq(count, 1, "redraw called once after adding three features where middle one has no geometry");
257
258        // add two point features and one feature with no geom, and confirm redraw is called once
259        count = 0;
260        layer.addFeatures([
261            new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(1, 0)),
262            new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(0, 1)),
263            new OpenLayers.Feature.Vector()
264        ]);
265        t.eq(count, 1, "redraw called once after adding three features where last one has no geometry");
266       
267        map.destroy();
268    }
269   
270    function test_hitDetection(t) {
271        if (!supported) {
272            t.plan(0); 
273            return; 
274        }
275       
276        var layer = new OpenLayers.Layer.Vector(null, {
277            isBaseLayer: true,
278            resolutions: [1],
279            styleMap: new OpenLayers.StyleMap({
280                pointRadius: 5,
281                strokeWidth: 3,
282                fillColor: "red",
283                fillOpacity: 0.5,
284                strokeColor: "blue",
285                strokeOpacity: 0.75
286            }),
287            renderers: ["Canvas"]
288        });
289       
290        var map = new OpenLayers.Map({
291            div: "map",
292            controls: [],
293            layers: [layer],
294            center: new OpenLayers.LonLat(0, 0),
295            zoom: 0
296        });
297       
298        layer.addFeatures([
299            new OpenLayers.Feature.Vector(
300                new OpenLayers.Geometry.Point(-100, 0)
301            ),
302            new OpenLayers.Feature.Vector(
303                OpenLayers.Geometry.fromWKT("LINESTRING(-50 0, 50 0)")
304            ),
305            new OpenLayers.Feature.Vector(
306                OpenLayers.Geometry.fromWKT("POLYGON((100 -25, 150 -25, 150 25, 100 25, 100 -25), (120 -5, 130 -5, 130 5, 120 5, 120 -5))")
307            ),
308            new OpenLayers.Feature.Vector(
309                new OpenLayers.Geometry.Point(80, 0), {}, {
310                    graphicName: "square",
311                    pointRadius: 8,
312                    strokeWidth: 4,
313                    fillColor: "red",
314                    fillOpacity: 0.5,
315                    strokeColor: "blue",
316                    strokeOpacity: 0.75
317                } 
318            )
319        ]);
320       
321        var cases = [{
322            msg: "center of point", x: -100, y: 0, id: layer.features[0].id
323        }, {
324            msg: "edge of point", x: -103, y: 3, id: layer.features[0].id
325        }, {
326            msg: "outside point", x: -110, y: 3, id: null
327        }, {
328            msg: "center of line", x: 0, y: 0, id: layer.features[1].id
329        }, {
330            msg: "edge of line", x: 0, y: 1, id: layer.features[1].id
331        }, {
332            msg: "outside line", x: 0, y: 5, id: null
333        }, {
334            msg: "inside polygon", x: 110, y: 0, id: layer.features[2].id
335        }, {
336            msg: "edge of polygon", x: 99, y: 0, id: layer.features[2].id
337        }, {
338            msg: "inside polygon hole", x: 125, y: 0, id: null
339        }, {
340            msg: "outside polygon", x: 155, y: 0, id: null
341        }, {
342            msg: "inside symbol", x: 80, y: 0, id: layer.features[3].id
343        }, {
344            msg: "outside symbol interior, inside symbol edge", x: 90, y: 8, id: layer.features[3].id
345        }, {
346            msg: "outside symbol", x: 94, y: 0, id: null
347        }];
348
349        function px(x, y) {
350            return map.getPixelFromLonLat(
351                new OpenLayers.LonLat(x, y)
352            );
353        }       
354       
355        var num = cases.length;
356        t.plan(2 * num);
357        var c, feature;
358        for (var i=0; i<num; ++i) {
359            c = cases[i];
360            feature = layer.renderer.getFeatureIdFromEvent({xy: px(c.x, c.y)});
361            t.eq(feature && feature.id, c.id, c.msg);
362           
363            // Extra test: hit detection on an invisible canvas should return undefined
364            layer.setVisibility(false);
365            feature = layer.renderer.getFeatureIdFromEvent({xy: px(c.x, c.y)});
366            t.eq(feature, undefined, c.msg + ' (invisible)');
367            layer.setVisibility(true);
368        }
369       
370        map.destroy();
371       
372    }
373
374    // see http://trac.osgeo.org/openlayers/ticket/3264
375    function test_externalGraphic_destroyFeatures(t) {
376        if (!supported) {
377            t.plan(0);
378            return;
379        }
380
381        t.plan(1);
382
383        // set up
384
385        var layer = new OpenLayers.Layer.Vector(null, {
386            isBaseLayer: true,
387            renderers: ["Canvas"]
388        });
389
390        var map = new OpenLayers.Map({
391            div: "map",
392            controls: [],
393            layers: [layer],
394            center: new OpenLayers.LonLat(0, 0),
395            zoom: 0
396        });
397
398        layer.addFeatures([
399            new OpenLayers.Feature.Vector(
400                new OpenLayers.Geometry.Point(0, 0),
401                null,
402                {
403                    externalGraphic: '../../img/marker.png',
404                    graphicHeight: 20,
405                    graphicWidth: 20
406                }
407            )
408        ]);
409
410        var called = false;
411        layer.renderer.canvas.drawImage = function(img, x, y, w, h) {
412            called = true;
413        };
414
415        // test
416
417        // schedule a canvas.drawImage
418        layer.renderer.redraw();
419
420        // destroy the feature before drawImage gets called
421        layer.destroyFeatures();
422
423        t.delay_call(0.1, function() {
424            t.ok(!called,
425                 'canvas.drawImage not called if feature is destroyed');
426
427            // tear down
428            map.destroy();
429        });
430    }
431
432    // see http://trac.osgeo.org/openlayers/ticket/3264
433    function test_externalGraphic_moveTo(t) {
434        if (!supported) {
435            t.plan(0);
436            return;
437        }
438
439        t.plan(2);
440
441        // set up
442
443        var layer = new OpenLayers.Layer.Vector(null, {
444            isBaseLayer: true,
445            renderers: ["Canvas"]
446        });
447
448        var map = new OpenLayers.Map({
449            div: "map",
450            controls: [],
451            layers: [layer],
452            center: new OpenLayers.LonLat(0, 0),
453            zoom: 0
454        });
455
456        var feature = new OpenLayers.Feature.Vector(
457            new OpenLayers.Geometry.Point(0, 0),
458            null,
459            {
460                externalGraphic: '../../img/marker.png',
461                graphicHeight: 20,
462                graphicWidth: 20,
463                graphicXOffset: 0,
464                graphicYOffset: 0
465            }
466        );
467
468        layer.addFeatures([feature]);
469
470        // test
471
472        // delay_call to let the first drawImage (the one
473        // resulting from addFeatures) run
474        t.delay_call(0.1, function() {
475
476            var log = [];
477            layer.renderer.canvas.drawImage = function(img, x, y, w, h) {
478                log.push({x: x, y: y});
479            };
480
481            layer.renderer.redraw();
482            map.setCenter(new OpenLayers.LonLat(45, 0), 0);
483
484            t.delay_call(0.1, function() {
485                t.eq(log.length, 2,
486                     "canvas.drawImage called twice");
487                t.ok(log[0].x == log[1].x && log[0].y == log[1].y,
488                     "image drawn at the same location");
489
490                // tear down
491                map.destroy();
492            });
493        });
494    }
495
496  </script>
497</head>
498<body>
499<div id="map" style="width:500px;height:550px"></div>
500</body>
501</html>
Note: See TracBrowser for help on using the repository browser.