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