1 <!DOCTYPE HTML> 2 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 Labeled Features Example</title> 8 <link rel="stylesheet" href="OpenLayers/theme/default/style.css" type="text/css"> 9 <link rel="stylesheet" href="style.css" type="text/css"> 10 <script src="OpenLayers/lib/OpenLayers.js"></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({'default':{ 27 strokeColor: "#00FF00", 28 strokeOpacity: 1, 29 strokeWidth: 3, 30 fillColor: "#FF5500", 31 fillOpacity: 0.5, 32 pointRadius: 6, 33 pointerEvents: "visiblePainted", 34 // label with \n linebreaks 35 label : "name: ${name}\n age: ${age}", 36 37 fontColor: "${favColor}", 38 fontSize: "12px", 39 fontFamily: "Courier New, monospace", 40 fontWeight: "bold", 41 labelAlign: "${align}", 42 labelXOffset: "${xOffset}", 43 labelYOffset: "${yOffset}", 44 labelOutlineColor: "white", 45 labelOutlineWidth: 3 46 }}), 47 renderers: renderer 48 }); 49 50 // create a point feature 51 var point = new OpenLayers.Geometry.Point(-111.04, 45.68); 52 var pointFeature = new OpenLayers.Feature.Vector(point); 53 pointFeature.attributes = { 54 name: "toto", 55 age: 20, 56 favColor: 'red', 57 align: "cm" 58 }; 59 60 // create a polygon feature from a linear ring of points 61 var pointList = []; 62 for(var p=0; p<6; ++p) { 63 var a = p * (2 * Math.PI) / 7; 64 var r = Math.random(1) + 1; 65 var newPoint = new OpenLayers.Geometry.Point(point.x + 5 + (r * Math.cos(a)), 66 point.y + 5 + (r * Math.sin(a))); 67 pointList.push(newPoint); 68 } 69 pointList.push(pointList[0]); 70 71 var linearRing = new OpenLayers.Geometry.LinearRing(pointList); 72 var polygonFeature = new OpenLayers.Feature.Vector( 73 new OpenLayers.Geometry.Polygon([linearRing])); 74 polygonFeature.attributes = { 75 name: "dude", 76 age: 21, 77 favColor: 'purple', 78 align: 'lb' 79 }; 80 81 multiFeature = new OpenLayers.Feature.Vector( 82 new OpenLayers.Geometry.Collection([ 83 new OpenLayers.Geometry.LineString([ 84 new OpenLayers.Geometry.Point(-105,40), 85 new OpenLayers.Geometry.Point(-95,45) 86 ]), 87 new OpenLayers.Geometry.Point(-105, 40) 88 ]), 89 { 90 name: "ball-and-chain", 91 age: 30, 92 favColor: 'black', 93 align: 'rt' 94 }); 95 96 // Create a point feature to show the label offset options 97 var labelOffsetPoint = new OpenLayers.Geometry.Point(-101.04, 35.68); 98 var labelOffsetFeature = new OpenLayers.Feature.Vector(labelOffsetPoint); 99 labelOffsetFeature.attributes = { 100 name: "offset", 101 age: 22, 102 favColor: 'blue', 103 align: "cm", 104 // positive value moves the label to the right 105 xOffset: 50, 106 // negative value moves the label down 107 yOffset: -15 108 }; 109 110 111 var nullFeature = new OpenLayers.Feature.Vector(null); 112 nullFeature.attributes = { 113 name: "toto is some text about the world", 114 age: 20, 115 favColor: 'red', 116 align: "cm" 117 }; 118 119 map.addLayer(vectorLayer); 120 vectorLayer.drawFeature(multiFeature); 121 map.setCenter(new OpenLayers.LonLat(-109.370078125, 43.39484375), 4); 122 vectorLayer.addFeatures([pointFeature, polygonFeature, multiFeature, labelOffsetFeature, nullFeature ]); 123 } 124 </script> 125 </head> 126 <body onload="init()"> 127 <h1 id="title">OpenLayers Labeled features example</h1> 128 <div id="tags"> 129 vector, feature, labeling, symbolizer, light 130 </div> 131 <p id="shortdesc"> 132 Label vector features with a text symbolizer. 133 </p> 134 <div id="map" class="smallmap"></div> 135 <div id="docs"> 136 <p>This example shows drawing simple vector features with a label.</p> 137 </div> 138 </body> 139 </html>
OpenLayers Labeled Features Example
最新推荐文章于 2022-08-02 04:57:22 发布