Los mapas múltiples con estilos no funcionan en OpenLayers

Question

He creado 2 mapas (dentro de 2 en una misma página) junto con sus respectivos mapas de estilo.

Ambos mapas tienen capas vectoriales junto con la geometría "LineString"... añadida en ellos.

Ambos mapas de estilo tienen un simbolizador de "etiqueta" común.

El problema es que el simbolizador "label" de map2 se añade a la capa vectorial de

mapa1 en lugar de la capa vectorial del mapa2.

Código:

mainHtml.html

A continuación, mis 2 divs:

A continuación se muestra la función que está representando 2 mapas diferentes en el div. anterior:

function createMapForDiv1()
{
boundsForPatternMapImage = new OpenLayers.Bounds();
boundsForPatternMapImage.extend(new OpenLayers.LonLat(-180,-90));
boundsForPatternMapImage.extend(new OpenLayers.LonLat(180,90));

styleForFeature1 = new OpenLayers.StyleMap({ 'default': new OpenLayers.Style(null, {
rules: [new OpenLayers.Rule({symbolizer: 
{
fillColor:"red", 
fillOpacity: 1,
label:  '$'+'{myLabel1}',
pointRadius: 2.5, 
pointerEvents: "visiblePainted",
graphicName:"x",
backgroundGraphic: "public/images/dot_cross_select.png",
backgroundHeight:10,
backgroundWidth:10,   
backgroundYOffset:-6, 
backgroundXOffset:-5, 
labelAlign : "rm",
labelXOffset : "24",
labelYOffset : "0"                            
}
})
}

optionsForMap1 = {         
maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
numZoomLevels: ${zoomScale},    
controls: [
new OpenLayers.Control.Attribution()
]};

map1 = new OpenLayers.Map('divForMap1', optionsForPatternMap);

vectorLayer1ForMap1= new OpenLayers.Layer.Vector("Vector Layer",{styleMap:          styleForFeature1});

map1.addLayer(vectorLayer1ForMap1);

***//Following bounds,styles and layers are for "map2"***

  boundsForMap2 = new OpenLayers.Bounds();
  boundsForMap2 .extend(new OpenLayers.LonLat(-180,-90));
  boundsForMap2 .extend(new OpenLayers.LonLat(180,90));

  styleMapForMap2 = new OpenLayers.StyleMap({ 'default': new OpenLayers.Style(null, {
            rules: [                                     
                        new OpenLayers.Rule({
                            symbolizer: {
                                 label: '$'+'{myLabel2}',
                                 strokeColor: "rgb(120,120,120)", 
                                 strokeWidth: 1.5,                   
                                 fontFamily: "Calibri", 
                                 fontSize: "10px", 
                                 fontColor: "black",
                                 fontWeight: "bold",
                                 labelAlign : "rm",
                                 labelXOffset : "-10",
                                 labelYOffset : "-10",
                   }                             
                        })]

                })        

            });

 vectorLayerForMap2= new OpenLayers.Layer.Vector("Vector Layer",{styleMap:   styleMapForMap2 }); 

optionsMap2 = {
                         minResolution: "auto",  
                         minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),  
                         maxResolution: "auto",    
                         maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),   
                         tileSize: new OpenLayers.Size(200,200),                                     
                         controls: []    
                 };

                map2 = new OpenLayers.Map('divForMap2', optionsMap2);

El problema es que "miEtiqueta2" definida en "styleMapForMap2" se añade a

"vectorLayer1ForMap1" (lo vi mientras depuraba en IE 8) y por eso "myLabel2"

no aparece allí donde se supone que debe estar.

¿Podría alguien ayudar en esto?

Gracias

Answer 1

No puedo decir cosas concretas por no ver el código pero lo fundamental es que si añades tu característica a otro mapa vectorial, naturalmente toma el estilo del mapa vectorial añadido. quizás la mejor solución es que lo compruebes con firebug...

aquí Hay un ejemplo, si le sirve - Styling and Labeling Vector Layers in OpenLayers and aquí .

y además de esto añadiendo estilos basados en reglas, tal vez haga sus necesidades fácilmente.

un ejemplo:

var style = new OpenLayers.Style();
var rule_fsa = new OpenLayers.Rule({
symbolizer: {
fillColor: "#ff9a9a",
fillOpacity: 0.5,
strokeColor: "#000000",
strokeWidth: 1,
strokeDashstyle: "dash",
label: "${FSA}",
labelAlign: "cc",
fontColor: "#333333",
fontOpacity: 0.9,
fontFamily: "Arial",
fontSize: 14}
});
style.addRules([rule_fsa]);

si puedes compartir tu código, te ayudaremos mejor.

---

ACTUALIZACIÓN:

intente usar algo como esto, no añada otro método OpenLayers.StyleMap :

vectorLayer1ForMap1= new OpenLayers.Layer.Vector("Vector Layer",{
styleMap: new OpenLayers.StyleMap({
'default': { 
fillColor:"red", 
fillOpacity: 1,
label:  '$'+'{myLabel1}',
pointRadius: 2.5, 
pointerEvents: "visiblePainted",
graphicName:"x",
backgroundGraphic: "public/images/dot_cross_select.png",
backgroundHeight:10,
backgroundWidth:10,   
backgroundYOffset:-6, 
backgroundXOffset:-5, 
labelAlign : "rm",
labelXOffset : "24",
labelYOffset : "0" 
}
})
});

y hacer el segundo estilo a como lo hago yo... si no funciona de nuevo tratar de usar:

OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);

Espero que te ayude...

Answer 2

El problema real es que si tenemos múltiples mapas junto con capas vectoriales y características de punto, entonces la identificación interna de las características de punto (que es generada automáticamente por OpenLayers) colisiona... así que tenemos que asegurarnos de que en tales escenarios proporcionamos "identificaciones personalizadas" a las características de punto... gracias Aragón por ayudarme y disculpa por responder tan tarde :)