OpenLayers Labeled Features Example_openlayers.feature.vector labelxoffset-优快云博客

本文展示如何使用OpenLayers库在网页上绘制并为矢量特征添加文本标签，包括点、多边形和多段线等不同类型的几何形状，并自定义标签样式。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
 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>