He creado dos puntos vectoriales etiquetados en un mapa de capas abiertas. Estoy tratando de cambiar el texto de la etiqueta dinámicamente. Intenté cambiar los valores desde donde el mapa de estilo obtiene los valores y llamar a layer.refresh () pero no hace nada. ¿Algunas ideas?
Aquí está mi código en su totalidad. Todo lo que tiene que hacer es cambiar la referencia JS de capas abiertas a su archivo local y funcionará en su navegador.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Labeled Features Example</title>
<link rel="stylesheet" href="../js/OpenLayers/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="../js/OpenLayers/OpenLayers.js"></script>
<script type="text/javascript">
var map;
var vectorLayer;
function init() {
map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS("OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", { layers: 'basic' });
map.addLayer(layer);
vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
styleMap: new OpenLayers.StyleMap(
{ 'default':
{
strokeColor: "#00FF00",
strokeOpacity: 0.7,
strokeWidth: 3,
fillColor: "#FF5500",
fillOpacity: 0.7,
pointRadius: 12,
pointerEvents: "visiblePainted",
//Supported values include "circle", "square", "star", "x", "cross", and "triangle".
graphicName: "circle",
label: "${order}",
fontColor: "#000000",
fontSize: "16px",
fontFamily: "Courier New, monospace",
fontWeight: "bold",
//Valid values for horizontal alignment: "l"=left, "c"=center, "r"=right.
//Valid values for vertical alignment: "t"=top, "m"=middle, "b"=bottom.
//Example values: "lt", "cm", "rb"
labelAlign: "cm",
labelXOffset: "0",
labelYOffset: "0"
}
})
});
// create points
var point1 = new OpenLayers.Geometry.Point(-111.04, 47.68);
var point2 = new OpenLayers.Geometry.Point(-110.04, 40.68);
var pointFeature1 = new OpenLayers.Feature.Vector(point1);
var pointFeature2 = new OpenLayers.Feature.Vector(point2);
//set order for label.
pointFeature1.attributes.order = 1;
pointFeature2.attributes.order = 2;
map.addLayer(vectorLayer);
// vectorLayer.drawFeature(multiFeature);
map.setCenter(new OpenLayers.LonLat(point1.x, point1.y), 3);
vectorLayer.addFeatures([pointFeature1, pointFeature2]);
}
function switchLabels() {
//console.log(vectorLayer.features[0].attributes.order);
vectorLayer.features[0].attributes.order = 2;
vectorLayer.features[1].attributes.order = 1;
vectorLayer.refresh();
//console.log(vectorLayer.features[0].attributes.order);
}
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers Refresh Labeled features example</h1>
<div id="tags"></div>
<p id="shortdesc">
<input type="button" value="Switch Labels" onclick="Javascript: switchLabels();" />
</p>
<div id="map" class="smallmap"></div>
</body>
</html>
