Openlayers-renderer in IE8 - Labels niet zichtbaar

Ik heb de broncode van http://openlayers.org/dev/examples gekopieerd /vector-features-with-text.html . Deze URL werkt prima in IE8.

Ik heb de html-pagina geplaatst zoals deze is in de webmap in ons netwerk. Ik opende deze pagina van de lokale site. Maar wat bleek waren labels waren niet zichtbaar in IE, maar in chroom leken ze prima.

Wat moet ik doen om het ook in IE te laten werken? WHAT verhindert dat de labels in IE worden weergegeven, maar dezelfde code werkt vanaf de openbare site hierboven. Als u met de rechtermuisknop klikt en de code ziet, ziet u de code als volgt:

 renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;

        var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
            styleMap: new OpenLayers.StyleMap({'default':{
                strokeColor: "#00FF00",
                strokeOpacity: 1,
                strokeWidth: 3,
                fillColor: "#FF5500",
                fillOpacity: 0.5,
                pointRadius: 6,
                pointerEvents: "visiblePainted",
               //label with \n linebreaks
                label : "name: ${name}\n\nage: ${age}",

                fontColor: "${favColor}",
                fontSize: "12px",
                fontFamily: "Courier New, monospace",
                fontWeight: "bold",
                labelAlign: "${align}",
                labelXOffset: "${xOffset}",
                labelYOffset: "${yOffset}",
                labelOutlineColor: "white",
                labelOutlineWidth: 3
            }}),
            renderers: renderer
        });

Bedankt

Vijay

4

5 antwoord

Ik kwam een ​​vergelijkbaar probleem tegen. Het lijkt erop dat het in VML.js is in de drawText-methode:

if(!label.parentNode) {
    label.appendChild(textbox);
    this.textRoot.appendChild(label);
}

aan de voorwaarde is niet voldaan en daarom is het label niet toegevoegd. Ik vermoed dat een JavaScript-bibliotheek interfereert. Hoe dan ook, mijn vuile oplossing is om de methode te negeren door:

 OpenLayers.Renderer.VML.prototype.drawText = function(){..copied code with the condition removed..}

Omdat het probleem niet in het bovenstaande voorbeeld wordt weergegeven, denk ik dat dit geen bug van OpenLayers is.

5
toegevoegd
werkt perfect voor mij, bedankt! btw, op een eenvoudigere pagina heb ik deze hack niet nodig, dat is verplicht in mijn complexe webapp, waar ik andere bibliotheken zoals jQuery ui gebruik. Ik ben gewoon nieuwsgierig naar de schuldige code ...
toegevoegd de auteur Amr, de bron

Het lijkt erop dat het in VML.js is in de drawText-methode

Daar ben ik het mee eens. Maar wat mij betreft, ik probeerde het

if(!label.parentNode) {
    label.appendChild(textbox);
    this.textRoot.appendChild(label);
}

en het hielp niet. Dus ik heb deze regel veranderd

textbox.inset = "1px,0px,0px,0px"; 

hieraan

textbox.inset = "2px,0px,0px,0px"; 

En lables werden zichtbaar in IE7, maar een beetje verschoven naar links, dus ik veranderde 2px naar 3px in deze regel.

Dus, zoals gezegd door zamorem:

Hoe dan ook, mijn vuile oplossing is om de methode te negeren door:

OpenLayers.Renderer.VML.prototype.drawText = function() {
    ..copied code with changed textbox.inset ..
}
3
toegevoegd

Vijay,

je hebt deze regels waarschijnlijk "vergeten te kopiëren":

<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
 src="../OpenLayers.js"></script>

Vervang '../' door absoluut pad (een snelle schatting: 'http://openlayers.org/dev/') en kijk of het beter wordt.

0
toegevoegd

probeer vml-renderer te gebruiken voor dit probleem. Ik hoop dat dit zonder problemen werkt.

var vector = new OpenLayers.Layer.Vector("Cosmetic Layer", {
strategies: [Strategy],
renderers: ["CustomSVG", "VML"], //VML only for IE <= 8, labels are not rotated
protocol: new OpenLayers.Protocol.HTTP({
format: new OpenLayers.Format.GML()
})
});

ik hoop dat het je helpt ...

0
toegevoegd

OpenLayers gebruikt SVG om de lagen te renderen. Dit werkt echter niet op IE 8 en ouder. Telkens wanneer ik probeer een laag met labels zichtbaar te maken, krijg ik een onbekende fout in mijn JS-console. Dus dit is waarschijnlijk niet jouw schuld (of we hebben allebei dezelfde fout ergens gemaakt).

Nu weet ik niet zeker of OpenLayers andere technologieën dan SVG biedt om labels te tekenen. SVG werkt echter prima op IE 9 en de labels worden correct weergegeven. Daarom kan uw toepassing de gebruiker aanraden om te upgraden naar IE 9. Het probleem is dat IE 9 niet beschikbaar is tot Vista en ik geloof dat er nog steeds veel XP-gebruikers zijn die de upgrade niet kunnen uitvoeren ...

Dus mijn oplossing is een IE-hack. Controleer of de browser IE 8 of minder is. Zo ja, zet style.label dan op nul. Dan is de lelijkere manier om pop-ups te gebruiken om de tekst weer te geven. De leukere oplossing is om een ​​nieuwe overlay te maken: een markeringslaag, waarbij elk markeringspictogram een ​​vooraf gegenereerde tekst is.

0
toegevoegd