| 1 | <!DOCTYPE html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
|---|
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> |
|---|
| 6 | <meta name="apple-mobile-web-app-capable" content="yes"> |
|---|
| 7 | <title>OpenLayers Fill, Stroke, and Graphic Example</title> |
|---|
| 8 | <link rel="stylesheet" href="../theme/default/style.css" type="text/css"> |
|---|
| 9 | <link rel="stylesheet" href="style.css" type="text/css"> |
|---|
| 10 | <script src="../lib/OpenLayers.js" type="text/javascript"></script> |
|---|
| 11 | <script type="text/javascript"> |
|---|
| 12 | var map; |
|---|
| 13 | |
|---|
| 14 | function init() { |
|---|
| 15 | map = new OpenLayers.Map('map'); |
|---|
| 16 | |
|---|
| 17 | var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", |
|---|
| 18 | "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} ); |
|---|
| 19 | map.addLayer(layer); |
|---|
| 20 | |
|---|
| 21 | // allow testing of specific renderers via "?renderer=Canvas", etc |
|---|
| 22 | var renderer = OpenLayers.Util.getParameters(window.location.href).renderer; |
|---|
| 23 | renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers; |
|---|
| 24 | |
|---|
| 25 | var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", { |
|---|
| 26 | styleMap: new OpenLayers.StyleMap({ |
|---|
| 27 | 'default': new OpenLayers.Style(null, { |
|---|
| 28 | rules: [ |
|---|
| 29 | new OpenLayers.Rule({ |
|---|
| 30 | symbolizer: { |
|---|
| 31 | graphic: false, |
|---|
| 32 | label: "Label for invisible point", |
|---|
| 33 | labelSelect: true, |
|---|
| 34 | fontStyle: "italic" |
|---|
| 35 | }, |
|---|
| 36 | filter: new OpenLayers.Filter.Comparison({ |
|---|
| 37 | type: "==", |
|---|
| 38 | property: "topic", |
|---|
| 39 | value: "point_invisible" |
|---|
| 40 | }) |
|---|
| 41 | }), |
|---|
| 42 | new OpenLayers.Rule({ |
|---|
| 43 | symbolizer: { |
|---|
| 44 | stroke: true, |
|---|
| 45 | fill: true, |
|---|
| 46 | label: "Polygon with stroke and fill defaults" |
|---|
| 47 | }, |
|---|
| 48 | filter: new OpenLayers.Filter.Comparison({ |
|---|
| 49 | type: "==", |
|---|
| 50 | property: "topic", |
|---|
| 51 | value: "polygon_defaults" |
|---|
| 52 | }) |
|---|
| 53 | }), |
|---|
| 54 | new OpenLayers.Rule({ |
|---|
| 55 | symbolizer: { |
|---|
| 56 | stroke: true, |
|---|
| 57 | fill: false, |
|---|
| 58 | label: "Point without fill", |
|---|
| 59 | labelAlign: "rb", |
|---|
| 60 | fontColor: "#ff0000", |
|---|
| 61 | fontOpacity: 0.4 |
|---|
| 62 | }, |
|---|
| 63 | filter: new OpenLayers.Filter.Comparison({ |
|---|
| 64 | type: "==", |
|---|
| 65 | property: "topic", |
|---|
| 66 | value: "point_nofill" |
|---|
| 67 | }) |
|---|
| 68 | }) |
|---|
| 69 | ] |
|---|
| 70 | }) |
|---|
| 71 | }), |
|---|
| 72 | renderers: renderer |
|---|
| 73 | }); |
|---|
| 74 | |
|---|
| 75 | // create a point feature |
|---|
| 76 | var point = new OpenLayers.Geometry.Point(-111.04, 45.68); |
|---|
| 77 | var pointFeature = new OpenLayers.Feature.Vector(point); |
|---|
| 78 | pointFeature.attributes = { |
|---|
| 79 | topic: "point_invisible" |
|---|
| 80 | }; |
|---|
| 81 | |
|---|
| 82 | // create a polygon feature from a linear ring of points |
|---|
| 83 | var pointList = []; |
|---|
| 84 | for(var p=0; p<6; ++p) { |
|---|
| 85 | var a = p * (2 * Math.PI) / 7; |
|---|
| 86 | var r = Math.random(1) + 1; |
|---|
| 87 | var newPoint = new OpenLayers.Geometry.Point(point.x + 5 + (r * Math.cos(a)), |
|---|
| 88 | point.y + 5 + (r * Math.sin(a))); |
|---|
| 89 | pointList.push(newPoint); |
|---|
| 90 | } |
|---|
| 91 | pointList.push(pointList[0]); |
|---|
| 92 | |
|---|
| 93 | var linearRing = new OpenLayers.Geometry.LinearRing(pointList); |
|---|
| 94 | var polygonFeature = new OpenLayers.Feature.Vector( |
|---|
| 95 | new OpenLayers.Geometry.Polygon([linearRing])); |
|---|
| 96 | polygonFeature.attributes = { |
|---|
| 97 | topic: "polygon_defaults" |
|---|
| 98 | }; |
|---|
| 99 | |
|---|
| 100 | multiFeature = new OpenLayers.Feature.Vector( |
|---|
| 101 | new OpenLayers.Geometry.Collection([ |
|---|
| 102 | new OpenLayers.Geometry.LineString([ |
|---|
| 103 | new OpenLayers.Geometry.Point(-105,40), |
|---|
| 104 | new OpenLayers.Geometry.Point(-95,45) |
|---|
| 105 | ]), |
|---|
| 106 | new OpenLayers.Geometry.Point(-105, 40) |
|---|
| 107 | ]), |
|---|
| 108 | { |
|---|
| 109 | topic: "point_nofill" |
|---|
| 110 | }); |
|---|
| 111 | |
|---|
| 112 | map.addLayer(vectorLayer); |
|---|
| 113 | vectorLayer.drawFeature(multiFeature); |
|---|
| 114 | map.setCenter(new OpenLayers.LonLat(point.x, point.y), 4); |
|---|
| 115 | vectorLayer.addFeatures([pointFeature, polygonFeature, multiFeature]); |
|---|
| 116 | var select = new OpenLayers.Control.SelectFeature(vectorLayer, { |
|---|
| 117 | selectStyle: OpenLayers.Util.extend( |
|---|
| 118 | {fill: true, stroke: true}, |
|---|
| 119 | OpenLayers.Feature.Vector.style["select"]) |
|---|
| 120 | }); |
|---|
| 121 | map.addControl(select); |
|---|
| 122 | select.activate(); |
|---|
| 123 | } |
|---|
| 124 | </script> |
|---|
| 125 | </head> |
|---|
| 126 | <body onload="init()"> |
|---|
| 127 | <h1 id="title">OpenLayers Example</h1> |
|---|
| 128 | <div id="tags"> |
|---|
| 129 | vector, feature, symbolizer, filter, comparison, labeling, light |
|---|
| 130 | </div> |
|---|
| 131 | <p id="shortdesc"> |
|---|
| 132 | Demonstrate fill, stroke, and graphic property of symbolizers. |
|---|
| 133 | </p> |
|---|
| 134 | <div id="map" class="smallmap"></div> |
|---|
| 135 | <div id="docs"> |
|---|
| 136 | This example shows how to use symbolizers with defaults for stroke, fill, and graphic. |
|---|
| 137 | This also allows to create labels for a feature without the feature rendered. Click on |
|---|
| 138 | the label in the middle to see selection of features with labelSelect set to true. |
|---|
| 139 | </div> |
|---|
| 140 | </body> |
|---|
| 141 | </html> |
|---|
