openlayers/examples/vector-features.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>OpenLayers: Vector Features</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             var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
  13                     "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
  14             map.addLayer(layer);
  15
  16             /*
  17              * Layer style
  18              */
  19             // we want opaque external graphics and non-opaque internal graphics
  20             var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
  21             layer_style.fillOpacity = 0.2;
  22             layer_style.graphicOpacity = 1;
  23
  24             /*
  25              * Blue style
  26              */
  27             var style_blue = OpenLayers.Util.extend({}, layer_style);
  28             style_blue.strokeColor = "blue";
  29             style_blue.fillColor = "blue";
  30             style_blue.graphicName = "star";
  31             style_blue.pointRadius = 10;
  32             style_blue.strokeWidth = 3;
  33             style_blue.rotation = 45;
  34             style_blue.strokeLinecap = "butt";
  35
  36             /*
  37              * Green style
  38              */
  39             var style_green = {
  40                 strokeColor: "#00FF00",
  41                 strokeWidth: 3,
  42                 strokeDashstyle: "dashdot",
  43                 pointRadius: 6,
  44                 pointerEvents: "visiblePainted"
  45             };
  46
  47             /*
  48              * Mark style
  49              */
  50             var style_mark = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
  51             // each of the three lines below means the same, if only one of
  52             // them is active: the image will have a size of 24px, and the
  53             // aspect ratio will be kept
  54             // style_mark.pointRadius = 12;
  55             // style_mark.graphicHeight = 24;
  56             // style_mark.graphicWidth = 24;
  57
  58             // if graphicWidth and graphicHeight are both set, the aspect ratio
  59             // of the image will be ignored
  60             style_mark.graphicWidth = 24;
  61             style_mark.graphicHeight = 20;
  62             style_mark.graphicXOffset = -(style_mark.graphicWidth/2);  // this is the default value
  63             style_mark.graphicYOffset = -style_mark.graphicHeight;
  64             style_mark.externalGraphic = "../img/marker.png";
  65             // graphicTitle only works in Firefox and Internet Explorer
  66                         style_mark.graphicTitle = "this is a test tooltip";
  67
  68             var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {style: layer_style});
  69
  70             // create a point feature
  71             var point = new OpenLayers.Geometry.Point(-111.04, 45.68);
  72             var pointFeature = new OpenLayers.Feature.Vector(point,null,style_blue);
  73             var point2 = new OpenLayers.Geometry.Point(-105.04, 49.68);
  74             var pointFeature2 = new OpenLayers.Feature.Vector(point2,null,style_green);
  75             var point3 = new OpenLayers.Geometry.Point(-105.04, 49.68);
  76             var pointFeature3 = new OpenLayers.Feature.Vector(point3,null,style_mark);
  77
  78             // create a line feature from a list of points
  79             var pointList = [];
  80             var newPoint = point;
  81             for(var p=0; p<15; ++p) {
  82                 newPoint = new OpenLayers.Geometry.Point(newPoint.x + Math.random(1),
  83                                                          newPoint.y + Math.random(1));
  84                 pointList.push(newPoint);
  85             }
  86             var lineFeature = new OpenLayers.Feature.Vector(
  87                 new OpenLayers.Geometry.LineString(pointList),null,style_green);
  88
  89             // create a polygon feature from a linear ring of points
  90             var pointList = [];
  91             for(var p=0; p<6; ++p) {
  92                 var a = p * (2 * Math.PI) / 7;
  93                 var r = Math.random(1) + 1;
  94                 var newPoint = new OpenLayers.Geometry.Point(point.x + (r * Math.cos(a)),
  95                                                              point.y + (r * Math.sin(a)));
  96                 pointList.push(newPoint);
  97             }
  98             pointList.push(pointList[0]);
  99
 100             var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
 101             var polygonFeature = new OpenLayers.Feature.Vector(
 102                 new OpenLayers.Geometry.Polygon([linearRing]));
 103
 104
 105             map.addLayer(vectorLayer);
 106             map.setCenter(new OpenLayers.LonLat(point.x, point.y), 5);
 107             vectorLayer.addFeatures([pointFeature, pointFeature3, pointFeature2, lineFeature, polygonFeature]);
 108         }
 109     </script>
 110   </head>
 111   <body onload="init()">
 112 <h1 id="title">Drawing Simple Vector Features Example</h1>
 113
 114 <div id="tags">
 115 </div>
 116 <p id="shortdesc">
 117     Shows the use of the shows drawing simple vector features, in different styles.
 118 </p>
 119 <div style="text-align: right">
 120     <div dir="rtl" id="map" class="smallmap"></div>
 121 </div>
 122 <div id="docs">
 123     <p>This example shows drawing simple vector features -- point, line, polygon
 124        in different styles, created 'manually', by constructing the entire style
 125        object, via 'copy', extending the default style object, and by
 126        inheriting the default style from the layer.</p>
 127     <p>It also shows how to use external graphic files for point features
 128        and how to set their size: If either graphicWidth or graphicHeight is set,
 129        the aspect ratio of the image will be respected. If both graphicWidth and
 130        graphicHeight are set, it will be ignored. Alternatively, if graphicWidth
 131        and graphicHeight are omitted, pointRadius will be used to set the size
 132        of the image, which will then be twice the value of pointRadius with the
 133        original aspect ratio.</p>
 134 </div>
 135
 136   </body>
 137 </html>
 138