openlayers/examples/symbolizers-fill-stroke-graphic.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>OpenLayers Fill, Stroke, and Graphic Example</title>
   4     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   5     <link rel="stylesheet" href="style.css" type="text/css" />
   6     <script src="../lib/OpenLayers.js" type="text/javascript"></script>
   7     <script type="text/javascript">
   8         var map;
   9
  10         function init() {
  11             map = new OpenLayers.Map('map');
  12
  13             var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
  14                     "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
  15             map.addLayer(layer);
  16
  17             // allow testing of specific renderers via "?renderer=Canvas", etc
  18             var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
  19             renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
  20
  21             var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
  22                 styleMap: new OpenLayers.StyleMap({
  23                     'default': new OpenLayers.Style(null, {
  24                         rules: [
  25                             new OpenLayers.Rule({
  26                                 symbolizer: {
  27                                     graphic: false,
  28                                     label: "Label for invisible point"
  29                                 },
  30                                 filter: new OpenLayers.Filter.Comparison({
  31                                     type: "==",
  32                                     property: "topic",
  33                                     value: "point_invisible"
  34                                 })
  35                             }),
  36                             new OpenLayers.Rule({
  37                                 symbolizer: {
  38                                     stroke: true,
  39                                     fill: true,
  40                                     label: "Polygon with stroke and fill defaults"
  41                                 },
  42                                 filter: new OpenLayers.Filter.Comparison({
  43                                     type: "==",
  44                                     property: "topic",
  45                                     value: "polygon_defaults"
  46                                 })
  47                             }),
  48                             new OpenLayers.Rule({
  49                                 symbolizer: {
  50                                     stroke: true,
  51                                     fill: false,
  52                                     label: "Point without fill",
  53                                     labelAlign: "rb"
  54                                 },
  55                                 filter: new OpenLayers.Filter.Comparison({
  56                                     type: "==",
  57                                     property: "topic",
  58                                     value: "point_nofill"
  59                                 })
  60                             })
  61                         ]
  62                     })
  63                 }),
  64                 renderers: renderer
  65             });
  66
  67             // create a point feature
  68             var point = new OpenLayers.Geometry.Point(-111.04, 45.68);
  69             var pointFeature = new OpenLayers.Feature.Vector(point);
  70             pointFeature.attributes = {
  71                 topic: "point_invisible"
  72             };
  73
  74             // create a polygon feature from a linear ring of points
  75             var pointList = [];
  76             for(var p=0; p<6; ++p) {
  77                 var a = p * (2 * Math.PI) / 7;
  78                 var r = Math.random(1) + 1;
  79                 var newPoint = new OpenLayers.Geometry.Point(point.x + 5 + (r * Math.cos(a)),
  80                                                              point.y + 5 + (r * Math.sin(a)));
  81                 pointList.push(newPoint);
  82             }
  83             pointList.push(pointList[0]);
  84
  85             var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
  86             var polygonFeature = new OpenLayers.Feature.Vector(
  87                 new OpenLayers.Geometry.Polygon([linearRing]));
  88             polygonFeature.attributes = {
  89                 topic: "polygon_defaults"
  90             };
  91
  92             multiFeature = new OpenLayers.Feature.Vector(
  93                 new OpenLayers.Geometry.Collection([
  94                     new OpenLayers.Geometry.LineString([
  95                         new OpenLayers.Geometry.Point(-105,40),
  96                         new OpenLayers.Geometry.Point(-95,45)
  97                     ]),
  98                     new OpenLayers.Geometry.Point(-105, 40)
  99                 ]),
 100                 {
 101                     topic: "point_nofill"
 102                 });
 103
 104             map.addLayer(vectorLayer);
 105             vectorLayer.drawFeature(multiFeature);
 106             map.setCenter(new OpenLayers.LonLat(point.x, point.y), 4);
 107             vectorLayer.addFeatures([pointFeature, polygonFeature, multiFeature]);
 108         }
 109     </script>
 110   </head>
 111   <body onload="init()">
 112     <h1 id="title">OpenLayers Example</h1>
 113     <div id="tags"></div>
 114     <p id="shortdesc">
 115         Demonstrate fill, stroke, and graphic property of symbolizers.
 116     </p>
 117     <div id="map" class="smallmap"></div>
 118     <div id="docs">
 119     This example shows how to use symbolizers with defaults for stroke, fill, and graphic.
 120     </div>
 121   </body>
 122 </html>