1 | /* Copyright (c) 2006-2010 by OpenLayers Contributors (see authors.txt for |
---|
2 | * full list of contributors). Published under the Clear BSD license. |
---|
3 | * See http://svn.openlayers.org/trunk/openlayers/license.txt for the |
---|
4 | * full text of the license. */ |
---|
5 | |
---|
6 | /** |
---|
7 | * @requires OpenLayers/Renderer/Elements.js |
---|
8 | */ |
---|
9 | |
---|
10 | /** |
---|
11 | * Class: OpenLayers.Renderer.VML |
---|
12 | * Render vector features in browsers with VML capability. Construct a new |
---|
13 | * VML renderer with the <OpenLayers.Renderer.VML> constructor. |
---|
14 | * |
---|
15 | * Note that for all calculations in this class, we use (num | 0) to truncate a |
---|
16 | * float value to an integer. This is done because it seems that VML doesn't |
---|
17 | * support float values. |
---|
18 | * |
---|
19 | * Inherits from: |
---|
20 | * - <OpenLayers.Renderer.Elements> |
---|
21 | */ |
---|
22 | OpenLayers.Renderer.VML = OpenLayers.Class(OpenLayers.Renderer.Elements, { |
---|
23 | |
---|
24 | /** |
---|
25 | * Property: xmlns |
---|
26 | * {String} XML Namespace URN |
---|
27 | */ |
---|
28 | xmlns: "urn:schemas-microsoft-com:vml", |
---|
29 | |
---|
30 | /** |
---|
31 | * Property: symbolCache |
---|
32 | * {DOMElement} node holding symbols. This hash is keyed by symbol name, |
---|
33 | * and each value is a hash with a "path" and an "extent" property. |
---|
34 | */ |
---|
35 | symbolCache: {}, |
---|
36 | |
---|
37 | /** |
---|
38 | * Property: offset |
---|
39 | * {Object} Hash with "x" and "y" properties |
---|
40 | */ |
---|
41 | offset: null, |
---|
42 | |
---|
43 | /** |
---|
44 | * Constructor: OpenLayers.Renderer.VML |
---|
45 | * Create a new VML renderer. |
---|
46 | * |
---|
47 | * Parameters: |
---|
48 | * containerID - {String} The id for the element that contains the renderer |
---|
49 | */ |
---|
50 | initialize: function(containerID) { |
---|
51 | if (!this.supported()) { |
---|
52 | return; |
---|
53 | } |
---|
54 | if (!document.namespaces.olv) { |
---|
55 | document.namespaces.add("olv", this.xmlns); |
---|
56 | var style = document.createStyleSheet(); |
---|
57 | var shapes = ['shape','rect', 'oval', 'fill', 'stroke', 'imagedata', 'group','textbox']; |
---|
58 | for (var i = 0, len = shapes.length; i < len; i++) { |
---|
59 | |
---|
60 | style.addRule('olv\\:' + shapes[i], "behavior: url(#default#VML); " + |
---|
61 | "position: absolute; display: inline-block;"); |
---|
62 | } |
---|
63 | } |
---|
64 | |
---|
65 | OpenLayers.Renderer.Elements.prototype.initialize.apply(this, |
---|
66 | arguments); |
---|
67 | }, |
---|
68 | |
---|
69 | /** |
---|
70 | * APIMethod: destroy |
---|
71 | * Deconstruct the renderer. |
---|
72 | */ |
---|
73 | destroy: function() { |
---|
74 | OpenLayers.Renderer.Elements.prototype.destroy.apply(this, arguments); |
---|
75 | }, |
---|
76 | |
---|
77 | /** |
---|
78 | * APIMethod: supported |
---|
79 | * Determine whether a browser supports this renderer. |
---|
80 | * |
---|
81 | * Returns: |
---|
82 | * {Boolean} The browser supports the VML renderer |
---|
83 | */ |
---|
84 | supported: function() { |
---|
85 | return !!(document.namespaces); |
---|
86 | }, |
---|
87 | |
---|
88 | /** |
---|
89 | * Method: setExtent |
---|
90 | * Set the renderer's extent |
---|
91 | * |
---|
92 | * Parameters: |
---|
93 | * extent - {<OpenLayers.Bounds>} |
---|
94 | * resolutionChanged - {Boolean} |
---|
95 | * |
---|
96 | * Returns: |
---|
97 | * {Boolean} true to notify the layer that the new extent does not exceed |
---|
98 | * the coordinate range, and the features will not need to be redrawn. |
---|
99 | */ |
---|
100 | setExtent: function(extent, resolutionChanged) { |
---|
101 | OpenLayers.Renderer.Elements.prototype.setExtent.apply(this, |
---|
102 | arguments); |
---|
103 | var resolution = this.getResolution(); |
---|
104 | |
---|
105 | var left = (extent.left/resolution) | 0; |
---|
106 | var top = (extent.top/resolution - this.size.h) | 0; |
---|
107 | if (resolutionChanged || !this.offset) { |
---|
108 | this.offset = {x: left, y: top}; |
---|
109 | left = 0; |
---|
110 | top = 0; |
---|
111 | } else { |
---|
112 | left = left - this.offset.x; |
---|
113 | top = top - this.offset.y; |
---|
114 | } |
---|
115 | |
---|
116 | |
---|
117 | var org = left + " " + top; |
---|
118 | this.root.coordorigin = org; |
---|
119 | var roots = [this.root, this.vectorRoot, this.textRoot]; |
---|
120 | var root; |
---|
121 | for(var i=0, len=roots.length; i<len; ++i) { |
---|
122 | root = roots[i]; |
---|
123 | |
---|
124 | var size = this.size.w + " " + this.size.h; |
---|
125 | root.coordsize = size; |
---|
126 | |
---|
127 | } |
---|
128 | // flip the VML display Y axis upside down so it |
---|
129 | // matches the display Y axis of the map |
---|
130 | this.root.style.flip = "y"; |
---|
131 | |
---|
132 | return true; |
---|
133 | }, |
---|
134 | |
---|
135 | |
---|
136 | /** |
---|
137 | * Method: setSize |
---|
138 | * Set the size of the drawing surface |
---|
139 | * |
---|
140 | * Parameters: |
---|
141 | * size - {<OpenLayers.Size>} the size of the drawing surface |
---|
142 | */ |
---|
143 | setSize: function(size) { |
---|
144 | OpenLayers.Renderer.prototype.setSize.apply(this, arguments); |
---|
145 | |
---|
146 | // setting width and height on all roots to avoid flicker which we |
---|
147 | // would get with 100% width and height on child roots |
---|
148 | var roots = [ |
---|
149 | this.rendererRoot, |
---|
150 | this.root, |
---|
151 | this.vectorRoot, |
---|
152 | this.textRoot |
---|
153 | ]; |
---|
154 | var w = this.size.w + "px"; |
---|
155 | var h = this.size.h + "px"; |
---|
156 | var root; |
---|
157 | for(var i=0, len=roots.length; i<len; ++i) { |
---|
158 | root = roots[i]; |
---|
159 | root.style.width = w; |
---|
160 | root.style.height = h; |
---|
161 | } |
---|
162 | }, |
---|
163 | |
---|
164 | /** |
---|
165 | * Method: getNodeType |
---|
166 | * Get the node type for a geometry and style |
---|
167 | * |
---|
168 | * Parameters: |
---|
169 | * geometry - {<OpenLayers.Geometry>} |
---|
170 | * style - {Object} |
---|
171 | * |
---|
172 | * Returns: |
---|
173 | * {String} The corresponding node type for the specified geometry |
---|
174 | */ |
---|
175 | getNodeType: function(geometry, style) { |
---|
176 | var nodeType = null; |
---|
177 | switch (geometry.CLASS_NAME) { |
---|
178 | case "OpenLayers.Geometry.Point": |
---|
179 | if (style.externalGraphic) { |
---|
180 | nodeType = "olv:rect"; |
---|
181 | } else if (this.isComplexSymbol(style.graphicName)) { |
---|
182 | nodeType = "olv:shape"; |
---|
183 | } else { |
---|
184 | nodeType = "olv:oval"; |
---|
185 | } |
---|
186 | break; |
---|
187 | case "OpenLayers.Geometry.Rectangle": |
---|
188 | nodeType = "olv:rect"; |
---|
189 | break; |
---|
190 | case "OpenLayers.Geometry.LineString": |
---|
191 | case "OpenLayers.Geometry.LinearRing": |
---|
192 | case "OpenLayers.Geometry.Polygon": |
---|
193 | case "OpenLayers.Geometry.Curve": |
---|
194 | case "OpenLayers.Geometry.Surface": |
---|
195 | nodeType = "olv:shape"; |
---|
196 | break; |
---|
197 | default: |
---|
198 | break; |
---|
199 | } |
---|
200 | return nodeType; |
---|
201 | }, |
---|
202 | |
---|
203 | /** |
---|
204 | * Method: setStyle |
---|
205 | * Use to set all the style attributes to a VML node. |
---|
206 | * |
---|
207 | * Parameters: |
---|
208 | * node - {DOMElement} An VML element to decorate |
---|
209 | * style - {Object} |
---|
210 | * options - {Object} Currently supported options include |
---|
211 | * 'isFilled' {Boolean} and |
---|
212 | * 'isStroked' {Boolean} |
---|
213 | * geometry - {<OpenLayers.Geometry>} |
---|
214 | */ |
---|
215 | setStyle: function(node, style, options, geometry) { |
---|
216 | style = style || node._style; |
---|
217 | options = options || node._options; |
---|
218 | var fillColor = style.fillColor; |
---|
219 | |
---|
220 | if (node._geometryClass === "OpenLayers.Geometry.Point") { |
---|
221 | if (style.externalGraphic) { |
---|
222 | if (style.graphicTitle) { |
---|
223 | node.title=style.graphicTitle; |
---|
224 | } |
---|
225 | var width = style.graphicWidth || style.graphicHeight; |
---|
226 | var height = style.graphicHeight || style.graphicWidth; |
---|
227 | width = width ? width : style.pointRadius*2; |
---|
228 | height = height ? height : style.pointRadius*2; |
---|
229 | |
---|
230 | var resolution = this.getResolution(); |
---|
231 | var xOffset = (style.graphicXOffset != undefined) ? |
---|
232 | style.graphicXOffset : -(0.5 * width); |
---|
233 | var yOffset = (style.graphicYOffset != undefined) ? |
---|
234 | style.graphicYOffset : -(0.5 * height); |
---|
235 | |
---|
236 | node.style.left = (((geometry.x/resolution - this.offset.x)+xOffset) | 0) + "px"; |
---|
237 | node.style.top = (((geometry.y/resolution - this.offset.y)-(yOffset+height)) | 0) + "px"; |
---|
238 | node.style.width = width + "px"; |
---|
239 | node.style.height = height + "px"; |
---|
240 | node.style.flip = "y"; |
---|
241 | |
---|
242 | // modify fillColor and options for stroke styling below |
---|
243 | fillColor = "none"; |
---|
244 | options.isStroked = false; |
---|
245 | } else if (this.isComplexSymbol(style.graphicName)) { |
---|
246 | var cache = this.importSymbol(style.graphicName); |
---|
247 | node.path = cache.path; |
---|
248 | node.coordorigin = cache.left + "," + cache.bottom; |
---|
249 | var size = cache.size; |
---|
250 | node.coordsize = size + "," + size; |
---|
251 | this.drawCircle(node, geometry, style.pointRadius); |
---|
252 | node.style.flip = "y"; |
---|
253 | } else { |
---|
254 | this.drawCircle(node, geometry, style.pointRadius); |
---|
255 | } |
---|
256 | } |
---|
257 | |
---|
258 | // fill |
---|
259 | if (options.isFilled) { |
---|
260 | node.fillcolor = fillColor; |
---|
261 | } else { |
---|
262 | node.filled = "false"; |
---|
263 | } |
---|
264 | var fills = node.getElementsByTagName("fill"); |
---|
265 | var fill = (fills.length == 0) ? null : fills[0]; |
---|
266 | if (!options.isFilled) { |
---|
267 | if (fill) { |
---|
268 | node.removeChild(fill); |
---|
269 | } |
---|
270 | } else { |
---|
271 | if (!fill) { |
---|
272 | fill = this.createNode('olv:fill', node.id + "_fill"); |
---|
273 | } |
---|
274 | fill.opacity = style.fillOpacity; |
---|
275 | |
---|
276 | if (node._geometryClass === "OpenLayers.Geometry.Point" && |
---|
277 | style.externalGraphic) { |
---|
278 | |
---|
279 | // override fillOpacity |
---|
280 | if (style.graphicOpacity) { |
---|
281 | fill.opacity = style.graphicOpacity; |
---|
282 | } |
---|
283 | |
---|
284 | fill.src = style.externalGraphic; |
---|
285 | fill.type = "frame"; |
---|
286 | |
---|
287 | if (!(style.graphicWidth && style.graphicHeight)) { |
---|
288 | fill.aspect = "atmost"; |
---|
289 | } |
---|
290 | } |
---|
291 | if (fill.parentNode != node) { |
---|
292 | node.appendChild(fill); |
---|
293 | } |
---|
294 | } |
---|
295 | |
---|
296 | // additional rendering for rotated graphics or symbols |
---|
297 | var rotation = style.rotation; |
---|
298 | if ((rotation !== undefined || node._rotation !== undefined)) { |
---|
299 | node._rotation = rotation; |
---|
300 | if (style.externalGraphic) { |
---|
301 | this.graphicRotate(node, xOffset, yOffset, style); |
---|
302 | // make the fill fully transparent, because we now have |
---|
303 | // the graphic as imagedata element. We cannot just remove |
---|
304 | // the fill, because this is part of the hack described |
---|
305 | // in graphicRotate |
---|
306 | fill.opacity = 0; |
---|
307 | } else if(node._geometryClass === "OpenLayers.Geometry.Point") { |
---|
308 | node.style.rotation = rotation || 0; |
---|
309 | } |
---|
310 | } |
---|
311 | |
---|
312 | // stroke |
---|
313 | var strokes = node.getElementsByTagName("stroke"); |
---|
314 | var stroke = (strokes.length == 0) ? null : strokes[0]; |
---|
315 | if (!options.isStroked) { |
---|
316 | node.stroked = false; |
---|
317 | if (stroke) { |
---|
318 | stroke.on = false; |
---|
319 | } |
---|
320 | } else { |
---|
321 | if (!stroke) { |
---|
322 | stroke = this.createNode('olv:stroke', node.id + "_stroke"); |
---|
323 | node.appendChild(stroke); |
---|
324 | } |
---|
325 | stroke.on = true; |
---|
326 | stroke.color = style.strokeColor; |
---|
327 | stroke.weight = style.strokeWidth + "px"; |
---|
328 | stroke.opacity = style.strokeOpacity; |
---|
329 | stroke.endcap = style.strokeLinecap == 'butt' ? 'flat' : |
---|
330 | (style.strokeLinecap || 'round'); |
---|
331 | if (style.strokeDashstyle) { |
---|
332 | stroke.dashstyle = this.dashStyle(style); |
---|
333 | } |
---|
334 | } |
---|
335 | |
---|
336 | if (style.cursor != "inherit" && style.cursor != null) { |
---|
337 | node.style.cursor = style.cursor; |
---|
338 | } |
---|
339 | return node; |
---|
340 | }, |
---|
341 | |
---|
342 | /** |
---|
343 | * Method: graphicRotate |
---|
344 | * If a point is to be styled with externalGraphic and rotation, VML fills |
---|
345 | * cannot be used to display the graphic, because rotation of graphic |
---|
346 | * fills is not supported by the VML implementation of Internet Explorer. |
---|
347 | * This method creates a olv:imagedata element inside the VML node, |
---|
348 | * DXImageTransform.Matrix and BasicImage filters for rotation and |
---|
349 | * opacity, and a 3-step hack to remove rendering artefacts from the |
---|
350 | * graphic and preserve the ability of graphics to trigger events. |
---|
351 | * Finally, OpenLayers methods are used to determine the correct |
---|
352 | * insertion point of the rotated image, because DXImageTransform.Matrix |
---|
353 | * does the rotation without the ability to specify a rotation center |
---|
354 | * point. |
---|
355 | * |
---|
356 | * Parameters: |
---|
357 | * node - {DOMElement} |
---|
358 | * xOffset - {Number} rotation center relative to image, x coordinate |
---|
359 | * yOffset - {Number} rotation center relative to image, y coordinate |
---|
360 | * style - {Object} |
---|
361 | */ |
---|
362 | graphicRotate: function(node, xOffset, yOffset, style) { |
---|
363 | var style = style || node._style; |
---|
364 | var rotation = style.rotation || 0; |
---|
365 | |
---|
366 | var aspectRatio, size; |
---|
367 | if (!(style.graphicWidth && style.graphicHeight)) { |
---|
368 | // load the image to determine its size |
---|
369 | var img = new Image(); |
---|
370 | img.onreadystatechange = OpenLayers.Function.bind(function() { |
---|
371 | if(img.readyState == "complete" || |
---|
372 | img.readyState == "interactive") { |
---|
373 | aspectRatio = img.width / img.height; |
---|
374 | size = Math.max(style.pointRadius * 2, |
---|
375 | style.graphicWidth || 0, |
---|
376 | style.graphicHeight || 0); |
---|
377 | xOffset = xOffset * aspectRatio; |
---|
378 | style.graphicWidth = size * aspectRatio; |
---|
379 | style.graphicHeight = size; |
---|
380 | this.graphicRotate(node, xOffset, yOffset, style); |
---|
381 | } |
---|
382 | }, this); |
---|
383 | img.src = style.externalGraphic; |
---|
384 | |
---|
385 | // will be called again by the onreadystate handler |
---|
386 | return; |
---|
387 | } else { |
---|
388 | size = Math.max(style.graphicWidth, style.graphicHeight); |
---|
389 | aspectRatio = style.graphicWidth / style.graphicHeight; |
---|
390 | } |
---|
391 | |
---|
392 | var width = Math.round(style.graphicWidth || size * aspectRatio); |
---|
393 | var height = Math.round(style.graphicHeight || size); |
---|
394 | node.style.width = width + "px"; |
---|
395 | node.style.height = height + "px"; |
---|
396 | |
---|
397 | // Three steps are required to remove artefacts for images with |
---|
398 | // transparent backgrounds (resulting from using DXImageTransform |
---|
399 | // filters on svg objects), while preserving awareness for browser |
---|
400 | // events on images: |
---|
401 | // - Use the fill as usual (like for unrotated images) to handle |
---|
402 | // events |
---|
403 | // - specify an imagedata element with the same src as the fill |
---|
404 | // - style the imagedata element with an AlphaImageLoader filter |
---|
405 | // with empty src |
---|
406 | var image = document.getElementById(node.id + "_image"); |
---|
407 | if (!image) { |
---|
408 | image = this.createNode("olv:imagedata", node.id + "_image"); |
---|
409 | node.appendChild(image); |
---|
410 | } |
---|
411 | image.style.width = width + "px"; |
---|
412 | image.style.height = height + "px"; |
---|
413 | image.src = style.externalGraphic; |
---|
414 | image.style.filter = |
---|
415 | "progid:DXImageTransform.Microsoft.AlphaImageLoader(" + |
---|
416 | "src='', sizingMethod='scale')"; |
---|
417 | |
---|
418 | var rot = rotation * Math.PI / 180; |
---|
419 | var sintheta = Math.sin(rot); |
---|
420 | var costheta = Math.cos(rot); |
---|
421 | |
---|
422 | // do the rotation on the image |
---|
423 | var filter = |
---|
424 | "progid:DXImageTransform.Microsoft.Matrix(M11=" + costheta + |
---|
425 | ",M12=" + (-sintheta) + ",M21=" + sintheta + ",M22=" + costheta + |
---|
426 | ",SizingMethod='auto expand')\n"; |
---|
427 | |
---|
428 | // set the opacity (needed for the imagedata) |
---|
429 | var opacity = style.graphicOpacity || style.fillOpacity; |
---|
430 | if (opacity && opacity != 1) { |
---|
431 | filter += |
---|
432 | "progid:DXImageTransform.Microsoft.BasicImage(opacity=" + |
---|
433 | opacity+")\n"; |
---|
434 | } |
---|
435 | node.style.filter = filter; |
---|
436 | |
---|
437 | // do the rotation again on a box, so we know the insertion point |
---|
438 | var centerPoint = new OpenLayers.Geometry.Point(-xOffset, -yOffset); |
---|
439 | var imgBox = new OpenLayers.Bounds(0, 0, width, height).toGeometry(); |
---|
440 | imgBox.rotate(style.rotation, centerPoint); |
---|
441 | var imgBounds = imgBox.getBounds(); |
---|
442 | |
---|
443 | node.style.left = Math.round( |
---|
444 | parseInt(node.style.left) + imgBounds.left) + "px"; |
---|
445 | node.style.top = Math.round( |
---|
446 | parseInt(node.style.top) - imgBounds.bottom) + "px"; |
---|
447 | }, |
---|
448 | |
---|
449 | /** |
---|
450 | * Method: postDraw |
---|
451 | * Does some node postprocessing to work around browser issues: |
---|
452 | * - Some versions of Internet Explorer seem to be unable to set fillcolor |
---|
453 | * and strokecolor to "none" correctly before the fill node is appended |
---|
454 | * to a visible vml node. This method takes care of that and sets |
---|
455 | * fillcolor and strokecolor again if needed. |
---|
456 | * - In some cases, a node won't become visible after being drawn. Setting |
---|
457 | * style.visibility to "visible" works around that. |
---|
458 | * |
---|
459 | * Parameters: |
---|
460 | * node - {DOMElement} |
---|
461 | */ |
---|
462 | postDraw: function(node) { |
---|
463 | node.style.visibility = "visible"; |
---|
464 | var fillColor = node._style.fillColor; |
---|
465 | var strokeColor = node._style.strokeColor; |
---|
466 | if (fillColor == "none" && |
---|
467 | node.fillcolor != fillColor) { |
---|
468 | node.fillcolor = fillColor; |
---|
469 | } |
---|
470 | if (strokeColor == "none" && |
---|
471 | node.strokecolor != strokeColor) { |
---|
472 | node.strokecolor = strokeColor; |
---|
473 | } |
---|
474 | }, |
---|
475 | |
---|
476 | |
---|
477 | /** |
---|
478 | * Method: setNodeDimension |
---|
479 | * Get the geometry's bounds, convert it to our vml coordinate system, |
---|
480 | * then set the node's position, size, and local coordinate system. |
---|
481 | * |
---|
482 | * Parameters: |
---|
483 | * node - {DOMElement} |
---|
484 | * geometry - {<OpenLayers.Geometry>} |
---|
485 | */ |
---|
486 | setNodeDimension: function(node, geometry) { |
---|
487 | |
---|
488 | var bbox = geometry.getBounds(); |
---|
489 | if(bbox) { |
---|
490 | var resolution = this.getResolution(); |
---|
491 | |
---|
492 | var scaledBox = |
---|
493 | new OpenLayers.Bounds((bbox.left/resolution - this.offset.x) | 0, |
---|
494 | (bbox.bottom/resolution - this.offset.y) | 0, |
---|
495 | (bbox.right/resolution - this.offset.x) | 0, |
---|
496 | (bbox.top/resolution - this.offset.y) | 0); |
---|
497 | |
---|
498 | // Set the internal coordinate system to draw the path |
---|
499 | node.style.left = scaledBox.left + "px"; |
---|
500 | node.style.top = scaledBox.top + "px"; |
---|
501 | node.style.width = scaledBox.getWidth() + "px"; |
---|
502 | node.style.height = scaledBox.getHeight() + "px"; |
---|
503 | |
---|
504 | node.coordorigin = scaledBox.left + " " + scaledBox.top; |
---|
505 | node.coordsize = scaledBox.getWidth()+ " " + scaledBox.getHeight(); |
---|
506 | } |
---|
507 | }, |
---|
508 | |
---|
509 | /** |
---|
510 | * Method: dashStyle |
---|
511 | * |
---|
512 | * Parameters: |
---|
513 | * style - {Object} |
---|
514 | * |
---|
515 | * Returns: |
---|
516 | * {String} A VML compliant 'stroke-dasharray' value |
---|
517 | */ |
---|
518 | dashStyle: function(style) { |
---|
519 | var dash = style.strokeDashstyle; |
---|
520 | switch (dash) { |
---|
521 | case 'solid': |
---|
522 | case 'dot': |
---|
523 | case 'dash': |
---|
524 | case 'dashdot': |
---|
525 | case 'longdash': |
---|
526 | case 'longdashdot': |
---|
527 | return dash; |
---|
528 | default: |
---|
529 | // very basic guessing of dash style patterns |
---|
530 | var parts = dash.split(/[ ,]/); |
---|
531 | if (parts.length == 2) { |
---|
532 | if (1*parts[0] >= 2*parts[1]) { |
---|
533 | return "longdash"; |
---|
534 | } |
---|
535 | return (parts[0] == 1 || parts[1] == 1) ? "dot" : "dash"; |
---|
536 | } else if (parts.length == 4) { |
---|
537 | return (1*parts[0] >= 2*parts[1]) ? "longdashdot" : |
---|
538 | "dashdot"; |
---|
539 | } |
---|
540 | return "solid"; |
---|
541 | } |
---|
542 | }, |
---|
543 | |
---|
544 | /** |
---|
545 | * Method: createNode |
---|
546 | * Create a new node |
---|
547 | * |
---|
548 | * Parameters: |
---|
549 | * type - {String} Kind of node to draw |
---|
550 | * id - {String} Id for node |
---|
551 | * |
---|
552 | * Returns: |
---|
553 | * {DOMElement} A new node of the given type and id |
---|
554 | */ |
---|
555 | createNode: function(type, id) { |
---|
556 | var node = document.createElement(type); |
---|
557 | if (id) { |
---|
558 | node.id = id; |
---|
559 | } |
---|
560 | |
---|
561 | // IE hack to make elements unselectable, to prevent 'blue flash' |
---|
562 | // while dragging vectors; #1410 |
---|
563 | node.unselectable = 'on'; |
---|
564 | node.onselectstart = OpenLayers.Function.False; |
---|
565 | |
---|
566 | return node; |
---|
567 | }, |
---|
568 | |
---|
569 | /** |
---|
570 | * Method: nodeTypeCompare |
---|
571 | * Determine whether a node is of a given type |
---|
572 | * |
---|
573 | * Parameters: |
---|
574 | * node - {DOMElement} An VML element |
---|
575 | * type - {String} Kind of node |
---|
576 | * |
---|
577 | * Returns: |
---|
578 | * {Boolean} Whether or not the specified node is of the specified type |
---|
579 | */ |
---|
580 | nodeTypeCompare: function(node, type) { |
---|
581 | |
---|
582 | //split type |
---|
583 | var subType = type; |
---|
584 | var splitIndex = subType.indexOf(":"); |
---|
585 | if (splitIndex != -1) { |
---|
586 | subType = subType.substr(splitIndex+1); |
---|
587 | } |
---|
588 | |
---|
589 | //split nodeName |
---|
590 | var nodeName = node.nodeName; |
---|
591 | splitIndex = nodeName.indexOf(":"); |
---|
592 | if (splitIndex != -1) { |
---|
593 | nodeName = nodeName.substr(splitIndex+1); |
---|
594 | } |
---|
595 | |
---|
596 | return (subType == nodeName); |
---|
597 | }, |
---|
598 | |
---|
599 | /** |
---|
600 | * Method: createRenderRoot |
---|
601 | * Create the renderer root |
---|
602 | * |
---|
603 | * Returns: |
---|
604 | * {DOMElement} The specific render engine's root element |
---|
605 | */ |
---|
606 | createRenderRoot: function() { |
---|
607 | return this.nodeFactory(this.container.id + "_vmlRoot", "div"); |
---|
608 | }, |
---|
609 | |
---|
610 | /** |
---|
611 | * Method: createRoot |
---|
612 | * Create the main root element |
---|
613 | * |
---|
614 | * Parameters: |
---|
615 | * suffix - {String} suffix to append to the id |
---|
616 | * |
---|
617 | * Returns: |
---|
618 | * {DOMElement} |
---|
619 | */ |
---|
620 | createRoot: function(suffix) { |
---|
621 | return this.nodeFactory(this.container.id + suffix, "olv:group"); |
---|
622 | }, |
---|
623 | |
---|
624 | /************************************** |
---|
625 | * * |
---|
626 | * GEOMETRY DRAWING FUNCTIONS * |
---|
627 | * * |
---|
628 | **************************************/ |
---|
629 | |
---|
630 | /** |
---|
631 | * Method: drawPoint |
---|
632 | * Render a point |
---|
633 | * |
---|
634 | * Parameters: |
---|
635 | * node - {DOMElement} |
---|
636 | * geometry - {<OpenLayers.Geometry>} |
---|
637 | * |
---|
638 | * Returns: |
---|
639 | * {DOMElement} or false if the point could not be drawn |
---|
640 | */ |
---|
641 | drawPoint: function(node, geometry) { |
---|
642 | return this.drawCircle(node, geometry, 1); |
---|
643 | }, |
---|
644 | |
---|
645 | /** |
---|
646 | * Method: drawCircle |
---|
647 | * Render a circle. |
---|
648 | * Size and Center a circle given geometry (x,y center) and radius |
---|
649 | * |
---|
650 | * Parameters: |
---|
651 | * node - {DOMElement} |
---|
652 | * geometry - {<OpenLayers.Geometry>} |
---|
653 | * radius - {float} |
---|
654 | * |
---|
655 | * Returns: |
---|
656 | * {DOMElement} or false if the circle could not ne drawn |
---|
657 | */ |
---|
658 | drawCircle: function(node, geometry, radius) { |
---|
659 | if(!isNaN(geometry.x)&& !isNaN(geometry.y)) { |
---|
660 | var resolution = this.getResolution(); |
---|
661 | |
---|
662 | node.style.left = (((geometry.x /resolution - this.offset.x) | 0) - radius) + "px"; |
---|
663 | node.style.top = (((geometry.y /resolution - this.offset.y) | 0) - radius) + "px"; |
---|
664 | |
---|
665 | var diameter = radius * 2; |
---|
666 | |
---|
667 | node.style.width = diameter + "px"; |
---|
668 | node.style.height = diameter + "px"; |
---|
669 | return node; |
---|
670 | } |
---|
671 | return false; |
---|
672 | }, |
---|
673 | |
---|
674 | |
---|
675 | /** |
---|
676 | * Method: drawLineString |
---|
677 | * Render a linestring. |
---|
678 | * |
---|
679 | * Parameters: |
---|
680 | * node - {DOMElement} |
---|
681 | * geometry - {<OpenLayers.Geometry>} |
---|
682 | * |
---|
683 | * Returns: |
---|
684 | * {DOMElement} |
---|
685 | */ |
---|
686 | drawLineString: function(node, geometry) { |
---|
687 | return this.drawLine(node, geometry, false); |
---|
688 | }, |
---|
689 | |
---|
690 | /** |
---|
691 | * Method: drawLinearRing |
---|
692 | * Render a linearring |
---|
693 | * |
---|
694 | * Parameters: |
---|
695 | * node - {DOMElement} |
---|
696 | * geometry - {<OpenLayers.Geometry>} |
---|
697 | * |
---|
698 | * Returns: |
---|
699 | * {DOMElement} |
---|
700 | */ |
---|
701 | drawLinearRing: function(node, geometry) { |
---|
702 | return this.drawLine(node, geometry, true); |
---|
703 | }, |
---|
704 | |
---|
705 | /** |
---|
706 | * Method: DrawLine |
---|
707 | * Render a line. |
---|
708 | * |
---|
709 | * Parameters: |
---|
710 | * node - {DOMElement} |
---|
711 | * geometry - {<OpenLayers.Geometry>} |
---|
712 | * closeLine - {Boolean} Close the line? (make it a ring?) |
---|
713 | * |
---|
714 | * Returns: |
---|
715 | * {DOMElement} |
---|
716 | */ |
---|
717 | drawLine: function(node, geometry, closeLine) { |
---|
718 | |
---|
719 | this.setNodeDimension(node, geometry); |
---|
720 | |
---|
721 | var resolution = this.getResolution(); |
---|
722 | var numComponents = geometry.components.length; |
---|
723 | var parts = new Array(numComponents); |
---|
724 | |
---|
725 | var comp, x, y; |
---|
726 | for (var i = 0; i < numComponents; i++) { |
---|
727 | comp = geometry.components[i]; |
---|
728 | x = (comp.x/resolution - this.offset.x) | 0; |
---|
729 | y = (comp.y/resolution - this.offset.y) | 0; |
---|
730 | parts[i] = " " + x + "," + y + " l "; |
---|
731 | } |
---|
732 | var end = (closeLine) ? " x e" : " e"; |
---|
733 | node.path = "m" + parts.join("") + end; |
---|
734 | return node; |
---|
735 | }, |
---|
736 | |
---|
737 | /** |
---|
738 | * Method: drawPolygon |
---|
739 | * Render a polygon |
---|
740 | * |
---|
741 | * Parameters: |
---|
742 | * node - {DOMElement} |
---|
743 | * geometry - {<OpenLayers.Geometry>} |
---|
744 | * |
---|
745 | * Returns: |
---|
746 | * {DOMElement} |
---|
747 | */ |
---|
748 | drawPolygon: function(node, geometry) { |
---|
749 | this.setNodeDimension(node, geometry); |
---|
750 | |
---|
751 | var resolution = this.getResolution(); |
---|
752 | |
---|
753 | var path = []; |
---|
754 | var linearRing, i, j, len, ilen, comp, x, y; |
---|
755 | for (j = 0, len=geometry.components.length; j<len; j++) { |
---|
756 | linearRing = geometry.components[j]; |
---|
757 | |
---|
758 | path.push("m"); |
---|
759 | for (i=0, ilen=linearRing.components.length; i<ilen; i++) { |
---|
760 | comp = linearRing.components[i]; |
---|
761 | x = (comp.x / resolution - this.offset.x) | 0; |
---|
762 | y = (comp.y / resolution - this.offset.y) | 0; |
---|
763 | path.push(" " + x + "," + y); |
---|
764 | if (i==0) { |
---|
765 | path.push(" l"); |
---|
766 | } |
---|
767 | } |
---|
768 | path.push(" x "); |
---|
769 | } |
---|
770 | path.push("e"); |
---|
771 | node.path = path.join(""); |
---|
772 | return node; |
---|
773 | }, |
---|
774 | |
---|
775 | /** |
---|
776 | * Method: drawRectangle |
---|
777 | * Render a rectangle |
---|
778 | * |
---|
779 | * Parameters: |
---|
780 | * node - {DOMElement} |
---|
781 | * geometry - {<OpenLayers.Geometry>} |
---|
782 | * |
---|
783 | * Returns: |
---|
784 | * {DOMElement} |
---|
785 | */ |
---|
786 | drawRectangle: function(node, geometry) { |
---|
787 | var resolution = this.getResolution(); |
---|
788 | |
---|
789 | node.style.left = ((geometry.x/resolution - this.offset.x) | 0) + "px"; |
---|
790 | node.style.top = ((geometry.y/resolution - this.offset.y) | 0) + "px"; |
---|
791 | node.style.width = ((geometry.width/resolution) | 0) + "px"; |
---|
792 | node.style.height = ((geometry.height/resolution) | 0) + "px"; |
---|
793 | |
---|
794 | return node; |
---|
795 | }, |
---|
796 | |
---|
797 | /** |
---|
798 | * Method: drawText |
---|
799 | * This method is only called by the renderer itself. |
---|
800 | * |
---|
801 | * Parameters: |
---|
802 | * featureId - {String} |
---|
803 | * style - |
---|
804 | * location - {<OpenLayers.Geometry.Point>} |
---|
805 | */ |
---|
806 | drawText: function(featureId, style, location) { |
---|
807 | var label = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX, "olv:rect"); |
---|
808 | var textbox = this.nodeFactory(featureId + this.LABEL_ID_SUFFIX + "_textbox", "olv:textbox"); |
---|
809 | |
---|
810 | var resolution = this.getResolution(); |
---|
811 | label.style.left = ((location.x/resolution - this.offset.x) | 0) + "px"; |
---|
812 | label.style.top = ((location.y/resolution - this.offset.y) | 0) + "px"; |
---|
813 | label.style.flip = "y"; |
---|
814 | |
---|
815 | textbox.innerText = style.label; |
---|
816 | |
---|
817 | if (style.fontColor) { |
---|
818 | textbox.style.color = style.fontColor; |
---|
819 | } |
---|
820 | if (style.fontOpacity) { |
---|
821 | textbox.style.filter = 'alpha(opacity=' + (style.fontOpacity * 100) + ')'; |
---|
822 | } |
---|
823 | if (style.fontFamily) { |
---|
824 | textbox.style.fontFamily = style.fontFamily; |
---|
825 | } |
---|
826 | if (style.fontSize) { |
---|
827 | textbox.style.fontSize = style.fontSize; |
---|
828 | } |
---|
829 | if (style.fontWeight) { |
---|
830 | textbox.style.fontWeight = style.fontWeight; |
---|
831 | } |
---|
832 | if(style.labelSelect === true) { |
---|
833 | label._featureId = featureId; |
---|
834 | textbox._featureId = featureId; |
---|
835 | textbox._geometry = location; |
---|
836 | textbox._geometryClass = location.CLASS_NAME; |
---|
837 | } |
---|
838 | textbox.style.whiteSpace = "nowrap"; |
---|
839 | // fun with IE: IE7 in standards compliant mode does not display any |
---|
840 | // text with a left inset of 0. So we set this to 1px and subtract one |
---|
841 | // pixel later when we set label.style.left |
---|
842 | textbox.inset = "1px,0px,0px,0px"; |
---|
843 | |
---|
844 | if(!label.parentNode) { |
---|
845 | label.appendChild(textbox); |
---|
846 | this.textRoot.appendChild(label); |
---|
847 | } |
---|
848 | |
---|
849 | var align = style.labelAlign || "cm"; |
---|
850 | if (align.length == 1) { |
---|
851 | align += "m"; |
---|
852 | } |
---|
853 | var xshift = textbox.clientWidth * |
---|
854 | (OpenLayers.Renderer.VML.LABEL_SHIFT[align.substr(0,1)]); |
---|
855 | var yshift = textbox.clientHeight * |
---|
856 | (OpenLayers.Renderer.VML.LABEL_SHIFT[align.substr(1,1)]); |
---|
857 | label.style.left = parseInt(label.style.left)-xshift-1+"px"; |
---|
858 | label.style.top = parseInt(label.style.top)+yshift+"px"; |
---|
859 | |
---|
860 | }, |
---|
861 | |
---|
862 | /** |
---|
863 | * Method: drawSurface |
---|
864 | * |
---|
865 | * Parameters: |
---|
866 | * node - {DOMElement} |
---|
867 | * geometry - {<OpenLayers.Geometry>} |
---|
868 | * |
---|
869 | * Returns: |
---|
870 | * {DOMElement} |
---|
871 | */ |
---|
872 | drawSurface: function(node, geometry) { |
---|
873 | |
---|
874 | this.setNodeDimension(node, geometry); |
---|
875 | |
---|
876 | var resolution = this.getResolution(); |
---|
877 | |
---|
878 | var path = []; |
---|
879 | var comp, x, y; |
---|
880 | for (var i=0, len=geometry.components.length; i<len; i++) { |
---|
881 | comp = geometry.components[i]; |
---|
882 | x = (comp.x / resolution - this.offset.x) | 0; |
---|
883 | y = (comp.y / resolution - this.offset.y) | 0; |
---|
884 | if ((i%3)==0 && (i/3)==0) { |
---|
885 | path.push("m"); |
---|
886 | } else if ((i%3)==1) { |
---|
887 | path.push(" c"); |
---|
888 | } |
---|
889 | path.push(" " + x + "," + y); |
---|
890 | } |
---|
891 | path.push(" x e"); |
---|
892 | |
---|
893 | node.path = path.join(""); |
---|
894 | return node; |
---|
895 | }, |
---|
896 | |
---|
897 | /** |
---|
898 | * Method: moveRoot |
---|
899 | * moves this renderer's root to a different renderer. |
---|
900 | * |
---|
901 | * Parameters: |
---|
902 | * renderer - {<OpenLayers.Renderer>} target renderer for the moved root |
---|
903 | * root - {DOMElement} optional root node. To be used when this renderer |
---|
904 | * holds roots from multiple layers to tell this method which one to |
---|
905 | * detach |
---|
906 | * |
---|
907 | * Returns: |
---|
908 | * {Boolean} true if successful, false otherwise |
---|
909 | */ |
---|
910 | moveRoot: function(renderer) { |
---|
911 | var layer = this.map.getLayer(renderer.container.id); |
---|
912 | if(layer instanceof OpenLayers.Layer.Vector.RootContainer) { |
---|
913 | layer = this.map.getLayer(this.container.id); |
---|
914 | } |
---|
915 | layer && layer.renderer.clear(); |
---|
916 | OpenLayers.Renderer.Elements.prototype.moveRoot.apply(this, arguments); |
---|
917 | layer && layer.redraw(); |
---|
918 | }, |
---|
919 | |
---|
920 | /** |
---|
921 | * Method: importSymbol |
---|
922 | * add a new symbol definition from the rendererer's symbol hash |
---|
923 | * |
---|
924 | * Parameters: |
---|
925 | * graphicName - {String} name of the symbol to import |
---|
926 | * |
---|
927 | * Returns: |
---|
928 | * {Object} - hash of {DOMElement} "symbol" and {Number} "size" |
---|
929 | */ |
---|
930 | importSymbol: function (graphicName) { |
---|
931 | var id = this.container.id + "-" + graphicName; |
---|
932 | |
---|
933 | // check if symbol already exists in the cache |
---|
934 | var cache = this.symbolCache[id]; |
---|
935 | if (cache) { |
---|
936 | return cache; |
---|
937 | } |
---|
938 | |
---|
939 | var symbol = OpenLayers.Renderer.symbol[graphicName]; |
---|
940 | if (!symbol) { |
---|
941 | throw new Error(graphicName + ' is not a valid symbol name'); |
---|
942 | } |
---|
943 | |
---|
944 | var symbolExtent = new OpenLayers.Bounds( |
---|
945 | Number.MAX_VALUE, Number.MAX_VALUE, 0, 0); |
---|
946 | |
---|
947 | var pathitems = ["m"]; |
---|
948 | for (var i=0; i<symbol.length; i=i+2) { |
---|
949 | var x = symbol[i]; |
---|
950 | var y = symbol[i+1]; |
---|
951 | symbolExtent.left = Math.min(symbolExtent.left, x); |
---|
952 | symbolExtent.bottom = Math.min(symbolExtent.bottom, y); |
---|
953 | symbolExtent.right = Math.max(symbolExtent.right, x); |
---|
954 | symbolExtent.top = Math.max(symbolExtent.top, y); |
---|
955 | |
---|
956 | pathitems.push(x); |
---|
957 | pathitems.push(y); |
---|
958 | if (i == 0) { |
---|
959 | pathitems.push("l"); |
---|
960 | } |
---|
961 | } |
---|
962 | pathitems.push("x e"); |
---|
963 | var path = pathitems.join(" "); |
---|
964 | |
---|
965 | var diff = (symbolExtent.getWidth() - symbolExtent.getHeight()) / 2; |
---|
966 | if(diff > 0) { |
---|
967 | symbolExtent.bottom = symbolExtent.bottom - diff; |
---|
968 | symbolExtent.top = symbolExtent.top + diff; |
---|
969 | } else { |
---|
970 | symbolExtent.left = symbolExtent.left + diff; |
---|
971 | symbolExtent.right = symbolExtent.right - diff; |
---|
972 | } |
---|
973 | |
---|
974 | cache = { |
---|
975 | path: path, |
---|
976 | size: symbolExtent.getWidth(), // equals getHeight() now |
---|
977 | left: symbolExtent.left, |
---|
978 | bottom: symbolExtent.bottom |
---|
979 | }; |
---|
980 | this.symbolCache[id] = cache; |
---|
981 | |
---|
982 | return cache; |
---|
983 | }, |
---|
984 | |
---|
985 | CLASS_NAME: "OpenLayers.Renderer.VML" |
---|
986 | }); |
---|
987 | |
---|
988 | /** |
---|
989 | * Constant: OpenLayers.Renderer.VML.LABEL_SHIFT |
---|
990 | * {Object} |
---|
991 | */ |
---|
992 | OpenLayers.Renderer.VML.LABEL_SHIFT = { |
---|
993 | "l": 0, |
---|
994 | "c": .5, |
---|
995 | "r": 1, |
---|
996 | "t": 0, |
---|
997 | "m": .5, |
---|
998 | "b": 1 |
---|
999 | }; |
---|