diff options
Diffstat (limited to 'misc/openlayers/examples/symbolizers-fill-stroke-graphic.html')
-rw-r--r-- | misc/openlayers/examples/symbolizers-fill-stroke-graphic.html | 141 |
1 files changed, 141 insertions, 0 deletions
diff --git a/misc/openlayers/examples/symbolizers-fill-stroke-graphic.html b/misc/openlayers/examples/symbolizers-fill-stroke-graphic.html new file mode 100644 index 0000000..27a0b58 --- /dev/null +++ b/misc/openlayers/examples/symbolizers-fill-stroke-graphic.html @@ -0,0 +1,141 @@ +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> + <meta name="apple-mobile-web-app-capable" content="yes"> + <title>OpenLayers Fill, Stroke, and Graphic Example</title> + <link rel="stylesheet" href="../theme/default/style.css" type="text/css"> + <link rel="stylesheet" href="style.css" type="text/css"> + <script src="../lib/OpenLayers.js" type="text/javascript"></script> + <script type="text/javascript"> + var map; + + function init() { + map = new OpenLayers.Map('map'); + + var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", + "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} ); + map.addLayer(layer); + + // allow testing of specific renderers via "?renderer=Canvas", etc + var renderer = OpenLayers.Util.getParameters(window.location.href).renderer; + renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers; + + var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", { + styleMap: new OpenLayers.StyleMap({ + 'default': new OpenLayers.Style(null, { + rules: [ + new OpenLayers.Rule({ + symbolizer: { + graphic: false, + label: "Label for invisible point", + labelSelect: true, + fontStyle: "italic" + }, + filter: new OpenLayers.Filter.Comparison({ + type: "==", + property: "topic", + value: "point_invisible" + }) + }), + new OpenLayers.Rule({ + symbolizer: { + stroke: true, + fill: true, + label: "Polygon with stroke and fill defaults" + }, + filter: new OpenLayers.Filter.Comparison({ + type: "==", + property: "topic", + value: "polygon_defaults" + }) + }), + new OpenLayers.Rule({ + symbolizer: { + stroke: true, + fill: false, + label: "Point without fill", + labelAlign: "rb", + fontColor: "#ff0000", + fontOpacity: 0.4 + }, + filter: new OpenLayers.Filter.Comparison({ + type: "==", + property: "topic", + value: "point_nofill" + }) + }) + ] + }) + }), + renderers: renderer + }); + + // create a point feature + var point = new OpenLayers.Geometry.Point(-111.04, 45.68); + var pointFeature = new OpenLayers.Feature.Vector(point); + pointFeature.attributes = { + topic: "point_invisible" + }; + + // create a polygon feature from a linear ring of points + var pointList = []; + for(var p=0; p<6; ++p) { + var a = p * (2 * Math.PI) / 7; + var r = Math.random(1) + 1; + var newPoint = new OpenLayers.Geometry.Point(point.x + 5 + (r * Math.cos(a)), + point.y + 5 + (r * Math.sin(a))); + pointList.push(newPoint); + } + pointList.push(pointList[0]); + + var linearRing = new OpenLayers.Geometry.LinearRing(pointList); + var polygonFeature = new OpenLayers.Feature.Vector( + new OpenLayers.Geometry.Polygon([linearRing])); + polygonFeature.attributes = { + topic: "polygon_defaults" + }; + + multiFeature = new OpenLayers.Feature.Vector( + new OpenLayers.Geometry.Collection([ + new OpenLayers.Geometry.LineString([ + new OpenLayers.Geometry.Point(-105,40), + new OpenLayers.Geometry.Point(-95,45) + ]), + new OpenLayers.Geometry.Point(-105, 40) + ]), + { + topic: "point_nofill" + }); + + map.addLayer(vectorLayer); + vectorLayer.drawFeature(multiFeature); + map.setCenter(new OpenLayers.LonLat(point.x, point.y), 4); + vectorLayer.addFeatures([pointFeature, polygonFeature, multiFeature]); + var select = new OpenLayers.Control.SelectFeature(vectorLayer, { + selectStyle: OpenLayers.Util.extend( + {fill: true, stroke: true}, + OpenLayers.Feature.Vector.style["select"]) + }); + map.addControl(select); + select.activate(); + } + </script> + </head> + <body onload="init()"> + <h1 id="title">OpenLayers Example</h1> + <div id="tags"> + vector, feature, symbolizer, filter, comparison, labeling, light + </div> + <p id="shortdesc"> + Demonstrate fill, stroke, and graphic property of symbolizers. + </p> + <div id="map" class="smallmap"></div> + <div id="docs"> + This example shows how to use symbolizers with defaults for stroke, fill, and graphic. + This also allows to create labels for a feature without the feature rendered. Click on + the label in the middle to see selection of features with labelSelect set to true. + </div> + </body> +</html> |