Changeset 3729

Timestamp:

07/13/07 09:31:40 (1 year ago)

Author:

crschmidt

Message:

Add support to the vector layer to visualize point geometries with images. This
support was added, tested, and documented by Andreas Hocevar, and I want to
thank him for the work he put into this patch. It looks pretty great. (This
is from ticket #736.)

Files:

• trunk/openlayers/examples/vector-features.html (modified) (6 diffs)
• trunk/openlayers/lib/OpenLayers/Renderer/SVG.js (modified) (1 diff)
• trunk/openlayers/lib/OpenLayers/Renderer/VML.js (modified) (2 diffs)
• trunk/openlayers/tests/Layer/test_Vector.html (modified) (2 diffs)

trunk/openlayers/examples/vector-features.html

@@ -8 +8 @@
-        }
-    </style>
-
+ type="text/javascript"
-    <script type="text/javascript">
-        <!--
@@ -22 +22 @@
-            style_blue.strokeColor = "blue"; 
-            style_blue.fillColor = "blue"; 
+            style_blue.externalGraphic = "../img/marker.png";
+            
+            // each of the three lines below means the same, if only one of
+            // them is active: the image will have a size of 24px, and the
+            // aspect ratio will be kept
+            style_blue.pointRadius = 12;
+            //style_blue.graphicWidth = 24;
+            //style_blue.graphicHeight = 24;
+            
+            style_blue.fillOpacity = 1;
-            var style_green = {
-                strokeColor: "#00FF00",
@@ -29 +39 @@
-                pointerEvents: "visiblePainted"
-            };
+            var style_mark = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
+            
+            // if graphicWidth and graphicHeight are both set, the aspect ratio
+            // of the image will be ignored
+            style_mark.graphicWidth = 24;
+            style_mark.graphicHeight = 20;
+            
+            style_mark.externalGraphic = "../img/marker.png";
-            
-            var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry");
@@ -35 +53 @@
-            var point = new OpenLayers.Geometry.Point(-111.04, 45.68);
-            var pointFeature = new OpenLayers.Feature.Vector(point,null,style_blue);
+            var point2 = new OpenLayers.Geometry.Point(-105.04, 49.68);
+            var pointFeature2 = new OpenLayers.Feature.Vector(point2,null,style_green);
+            var point3 = new OpenLayers.Geometry.Point(-105.04, 49.68);
+            var pointFeature3 = new OpenLayers.Feature.Vector(point3,null,style_mark);
-            
-            // create a line feature from a list of points
@@ -65 +87 @@
-            map.addLayer(vectorLayer);
-            map.setCenter(new OpenLayers.LonLat(point.x, point.y), 5);
-
+pointFeature3, pointFeature2, 
-        }
-        // -->
@@ -76 +98 @@
-       object, via 'copy', extending the default style object, and by 
-       inheriting the default style from the layer.</p>
+    <p>It also shows how to use external graphic files for point features
+       and how to set their size: If either graphicWidth or graphicHeight is set,
+       the aspect ratio of the image will be respected. If both graphicWidth and
+       graphicHeight are set, it will be ignored. Alternatively, if graphicWidth
+       and graphicHeight are omitted, pointRadius will be used to set the size
+       of the image, which will then be twice the value of pointRadius with the
+       original aspect ratio.</p>
-  </body>
-</html>

trunk/openlayers/lib/OpenLayers/Renderer/SVG.js

@@ -184 +184 @@
-
-        if (node._geometryClass == "OpenLayers.Geometry.Point") {
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-        }
-        

trunk/openlayers/lib/OpenLayers/Renderer/VML.js

@@ -154 +154 @@
-        
-        if (node._geometryClass == "OpenLayers.Geometry.Point") {
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-        }
-
@@ -171 +213 @@
-                node.appendChild(fill);
-            }
-
+
+
+
-        }
-

trunk/openlayers/tests/Layer/test_Vector.html

@@ -107 +107 @@
-        
-    }
-
+
-    function test_Layer_Vector_eraseFeatures(t) {
-        t.plan(2);
@@ -157 +157 @@
-    }
-
+    function test_Layer_Vector_externalGraphic(t) {
+            t.plan(8);
+            // base layer is needed for getResolution() to return a value,
+            // otherwise VML test will fail because style.left and style.top
+            // cannot be set
+            var baseLayer = new OpenLayers.Layer.WMS("Base Layer",
+                    "http://octo.metacarta.com/cgi-bin/mapserv",
+                    { map: '/mapdata/vmap_wms.map', 
+                   layers: 'basic', 
+                   format: 'image/png'});
+            
+        var layer = new OpenLayers.Layer.Vector("Test Layer");
+        var map = new OpenLayers.Map('map');
+        map.addLayers([baseLayer, layer]);
+
+        var geometry = new OpenLayers.Geometry.Point(10, 10);
+        var feature = new OpenLayers.Feature.Vector(geometry);
+
+        var customStyle1 = new Object({
+                externalGraphic: 'test.png',
+                pointRadius: 10
+        });
+        var customStyle2 = new Object({
+                externalGraphic: 'test.png',
+                graphicWidth: 12
+        });
+        var customStyle3 = new Object({
+                externalGraphic: 'test.png',
+                graphicHeight: 14
+        });
+        var customStyle4 = new Object({
+                externalGraphic: 'test.png',
+                graphicWidth: 24,
+                graphicHeight: 16
+        });
+               
+        var root = layer.renderer.root;
+        if (layer.renderer.CLASS_NAME == 'OpenLayers.Renderer.SVG') {
+                feature.style = customStyle1;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.getAttributeNS(null, 'width'),
+                            (2*customStyle1.pointRadius).toString(),
+                            "given a pointRadius, width equals 2*pointRadius");
+                t.eq(root.firstChild.getAttributeNS(null, 'height'),
+                            (2*customStyle1.pointRadius).toString(),
+                            "given a pointRadius, height equals 2*pointRadius");
+                feature.style = customStyle2;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.getAttributeNS(null, 'width'),
+                            root.firstChild.getAttributeNS(null, 'height'),
+                            "given a graphicWidth, width equals height");
+                t.eq(root.firstChild.getAttributeNS(null, 'width'),
+                            customStyle2.graphicWidth.toString(),
+                            "width is set correctly");
+                feature.style = customStyle3;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.getAttributeNS(null, 'height'),
+                            root.firstChild.getAttributeNS(null, 'width'),
+                            "given a graphicHeight, height equals width");
+                t.eq(root.firstChild.getAttributeNS(null, 'height'),
+                            customStyle3.graphicHeight.toString(),
+                            "height is set correctly");
+                feature.style = customStyle4;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.getAttributeNS(null, 'height'),
+                            customStyle4.graphicHeight.toString(),
+                            "given graphicHeight and graphicWidth, both are set: height")
+                t.eq(root.firstChild.getAttributeNS(null, 'width'),
+                            customStyle4.graphicWidth.toString(),
+                            "given graphicHeight and graphicWidth, both are set: width")
+        }
+        if (layer.renderer.CLASS_NAME == 'OpenLayers.Renderer.VML') {
+                feature.style = customStyle1;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.style.width,
+                            (2*customStyle1.pointRadius).toString()+'px',
+                            "given a pointRadius, width equals 2*pointRadius");
+                t.eq(root.firstChild.style.height,
+                            (2*customStyle1.pointRadius).toString()+'px',
+                            "given a pointRadius, height equals 2*pointRadius");
+                feature.style = customStyle2;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.style.width,
+                            root.firstChild.style.height,
+                            "given a graphicWidth, width equals height");
+                t.eq(root.firstChild.style.width,
+                            customStyle2.graphicWidth.toString()+'px',
+                            "width is set correctly");
+                feature.style = customStyle3;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.style.height,
+                            root.firstChild.style.width,
+                            "given a graphicHeight, height equals width");
+                t.eq(root.firstChild.style.height,
+                            customStyle3.graphicHeight.toString()+'px',
+                            "height is set correctly");
+                feature.style = customStyle4;
+                layer.drawFeature(feature);
+                t.eq(root.firstChild.style.height,
+                            customStyle4.graphicHeight.toString()+'px',
+                            "given graphicHeight and graphicWidth, both are set: height")
+                t.eq(root.firstChild.style.width,
+                            customStyle4.graphicWidth.toString()+'px',
+                            "given graphicHeight and graphicWidth, both are set: width")
+        }
+    }
+
-  // -->
-  </script>