[英]Open layers label not working
我一直在嘗試使openlayers標簽功能正常工作並產生以下示例:
<html>
<head>
<title>OpenLayers Example</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script>
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(wms);
// Default polygon style
var polygonStyle =
OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
polygonStyle.strokeColor = "#800000";
polygonStyle.fillColor = "#800080";
polygonStyle.fillOpacity = 0.2;
polygonStyle.strokeWidth = 1;
polygonStyle.label = "Label:${label}";
polygonStyle.labelOutlineColor = "white";
polygonStyle.labelOutlineWidth = 3;
var smap = new OpenLayers.StyleMap({"default": polygonStyle});
var veclayer = new OpenLayers.Layer.Vector("Survey Locations", {"styleMap": smap});
map.addLayer(veclayer);
var data = {"type":"Polygon","coordinates":[[
[-2.07362131225228,52.0329916851734],
[-2.07096056091493,52.0228522264397],
[-2.05061868774548,52.0156687188299],
[-2.04280809509186,52.0210036398637],
[-2.02804521667506,52.0231163039992],
[-2.01748804200037,52.0300345805213],
[-2.01645807373352,52.0464545997404],
[-2.02589944946666,52.0529998067114],
[-2.04194978821027,52.0554276235705],
[-2.06023172485491,52.0455044093648],
[-2.07362131225228,52.0329916851734]]]};
var gson = new OpenLayers.Format.GeoJSON();
var GEO = gson.read(data, "Geometry");
var EPSG4326 = new OpenLayers.Projection("EPSG:4326");
GEO = GEO.transform(EPSG4326, map.getProjectionObject());
var locname="First label";
var FEA = new OpenLayers.Feature.Vector(GEO, {"label":locname}, polygonStyle);
veclayer.addFeatures([FEA]);
map.zoomToExtent(GEO.getBounds(),false);
data= {"type":"Polygon","coordinates":[[[-2.04514962074064,52.0403793945411],
[-2.03057040393828,52.0403841112724],
[-2.03057659173109,52.0493747022699],
[-2.04515873420745,52.049369984023],
[-2.04514962074064,52.0403793945411]]]}
var GEO = gson.read(data, "Geometry");
var EPSG4326 = new OpenLayers.Projection("EPSG:4326");
GEO = GEO.transform(EPSG4326, map.getProjectionObject());
var locname="Second label";
var FEA = new OpenLayers.Feature.Vector(GEO, {"label":locname}, polygonStyle);
veclayer.addFeatures([FEA]);
</script>
</body>
</html>
代碼可以工作,但是多邊形上的標簽顯示為Label:$ {Label},而不是將變量解釋為讀取Label:First label等。
將其集成到較大的應用程序中時,第一個標簽不能正確解釋,而第二個標簽可以正確解釋。 我懷疑這可能是一個層初始化問題,但不知道如何解決。
任何幫助,將不勝感激!!
您是否在聲明功能后嘗試將屬性添加為對象,例如:
FEA.attributes = {label:locname}
它以這種方式工作,請參見以下更改:
<html>
<head>
<title>OpenLayers Example</title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script>
var map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(wms);
// Default polygon style
var polygonStyle =
OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
polygonStyle.strokeColor = "#800000";
polygonStyle.fillColor = "#800080";
polygonStyle.fillOpacity = 0.2;
polygonStyle.strokeWidth = 1;
polygonStyle.label = "Label:${label}";
polygonStyle.labelOutlineColor = "white";
polygonStyle.labelOutlineWidth = 3;
var smap = new OpenLayers.StyleMap({"default": polygonStyle});
var veclayer = new OpenLayers.Layer.Vector("Survey Locations", {"styleMap": smap});
map.addLayer(veclayer);
var data = {"type":"Polygon","coordinates":[[
[-2.07362131225228,52.0329916851734],
[-2.07096056091493,52.0228522264397],
[-2.05061868774548,52.0156687188299],
[-2.04280809509186,52.0210036398637],
[-2.02804521667506,52.0231163039992],
[-2.01748804200037,52.0300345805213],
[-2.01645807373352,52.0464545997404],
[-2.02589944946666,52.0529998067114],
[-2.04194978821027,52.0554276235705],
[-2.06023172485491,52.0455044093648],
[-2.07362131225228,52.0329916851734]]]};
var gson = new OpenLayers.Format.GeoJSON();
var GEO = gson.read(data, "Geometry");
var EPSG4326 = new OpenLayers.Projection("EPSG:4326");
GEO = GEO.transform(EPSG4326, map.getProjectionObject());
var locname="First label";
var FEA = new OpenLayers.Feature.Vector(GEO);
FEA.attributes = {
label:locname
}
veclayer.addFeatures([FEA]);
map.zoomToExtent(GEO.getBounds(),false);
data= {"type":"Polygon","coordinates":[[[-2.04514962074064,52.0403793945411],
[-2.03057040393828,52.0403841112724],
[-2.03057659173109,52.0493747022699],
[-2.04515873420745,52.049369984023],
[-2.04514962074064,52.0403793945411]]]}
var GEO = gson.read(data, "Geometry");
var EPSG4326 = new OpenLayers.Projection("EPSG:4326");
GEO = GEO.transform(EPSG4326, map.getProjectionObject());
var locname="Second label";
var FEA = new OpenLayers.Feature.Vector(GEO);
FEA.attributes = {
label: locname
}
veclayer.addFeatures([FEA]);
</script>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.