Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. Si vous continuez à utiliser ce dernier, nous considèrerons que vous acceptez l'utilisation des cookies. J'ai compris ! ou En savoir plus !.
banniere

Le portail francophone de la géomatique


Toujours pas inscrit ? Mot de passe oublié ?
Nom d'utilisateur    Mot de passe              Toujours pas inscrit ?   Mot de passe oublié ?

Annonce

Rencontres QGIS 2025

L'appel à participation est ouvert jusqu'au 19 janvier 2025!

#1 Fri 17 March 2017 10:01

OumarSIG
Juste Inscrit !
Lieu: 10 Rue Dorian, 75012
Date d'inscription: 29 Oct 2013
Messages: 4

Export en PNG d'une carte avec des marqueurs-Leaflet

Bonjour, j'ai un soucis avec les fonctions d'export de la carte avec leaflet. Sur ma carte je peux ajouter des polylines, des cercles, rectangles, polygones, points ou du texte. L'export de la carte en PNG marche avec tous les marqueurs sauf pour le texte.
Voici ma fonction d'ajout du marqueur texte

Code:

L.Draw.Text = L.Draw.Feature.extend({
    statics: {
        TYPE: 'text'
    },

    options: {
        type: 'text',
        icon: new L.divIcon({ 
            html: ""
        }),
        repeatMode: false,
        zIndexOffset: 2000, // This should be > than the highest z-index any markers
        toolbarIcon: {
            className: 'leaflet-draw-draw-text',
            tooltip: L.drawLocal.draw.toolbar.buttons.text
        }
    },

    initialize: function (map, options) {
        // Save the type so super can fire, need to do this as cannot do this.TYPE :(
        this.type = L.Draw.Text.TYPE;

        L.Draw.Feature.prototype.initialize.call(this, map, options);
    },

    addHooks: function () {
        L.Draw.Feature.prototype.addHooks.call(this);

        if (this._map) {
            this._tooltip.updateContent({ text: L.drawLocal.draw.handlers.text.tooltip.start });

            // Same mouseMarker as in Draw.Polyline
            if (!this._mouseMarker) {
                this._mouseMarker = L.marker(this._map.getCenter(), {
                    icon: L.divIcon({
                        className: 'leaflet-mouse-marker',
                        iconAnchor: [20, 20],
                        iconSize: [10, 10]
                    }),
                    opacity: 0,
                    zIndexOffset: this.options.zIndexOffset
                });
            }

            this._mouseMarker
                .on('click', this._onClick, this)
                .addTo(this._map);

            this._map.on('mousemove', this._onMouseMove, this);
        }
    },

    removeHooks: function () {
        L.Draw.Feature.prototype.removeHooks.call(this);

        if (this._map) {
            if (this._marker) {
                this._marker.off('click', this._onClick, this);
                this._map
                    .off('click', this._onClick, this)
                    .removeLayer(this._marker);
                delete this._marker;
            }

            this._mouseMarker.off('click', this._onClick, this);
            this._map.removeLayer(this._mouseMarker);
            delete this._mouseMarker;

            this._map.off('mousemove', this._onMouseMove, this);
        }
    },

    _onMouseMove: function (e) {
        var latlng = e.latlng;

        this._tooltip.updatePosition(latlng);
        this._mouseMarker.setLatLng(latlng);

        if (!this._marker) {
            this._marker = new L.Marker(latlng, {
                icon: this.options.icon,
                zIndexOffset: this.options.zIndexOffset
            });
            // Bind to both marker and map to make sure we get the click event.
            this._marker.on('click', this._onClick, this);
            this._map
                .on('click', this._onClick, this)
                .addLayer(this._marker);
        }
        else {
            latlng = this._mouseMarker.getLatLng();
            this._marker.setLatLng(latlng);
        }
    },

    _onClick: function () {
        var inputText = prompt(L.drawLocal.draw.handlers.text.prompt.input, L.drawLocal.draw.handlers.text.prompt.defaultText);

        if (inputText !== undefined && inputText !== null && inputText !== "") {
            this._fireCreatedEvent(inputText);

            this.disable();
            if (this.options.repeatMode) {
                this.enable();
            }
        }
    },

    _fireCreatedEvent: function (inputText) {
        var textMarker = new L.divIcon({
            className: 'ccg-textMarker-icon',
            html: "<p id=ccgTextMarker_"+idCcgTextMarker+" class='ccg-text ccg-textMarker'>"+inputText+"</p>"
        });

        idCcgTextMarker++;

        var marker = new L.marker(this._marker.getLatLng(), { icon: textMarker });
        L.Draw.Feature.prototype._fireCreatedEvent.call(this, marker);
    }
});

Sur ma console je constate que le probleme provient de cette fonction du plugin leaflet-image

Code:

 function isDataURL(url) {
        var dataURLRegex = /^\s*data:([a-z]+\/[a-z]+(;[a-z\-]+\=[a-z\-]+)?)?(;base64)?,[a-z0-9\!\$\&\'\,\(\)\*\+\,\;\=\-\.\_\~\:\@\/\?\%\s]*\s*$/i;
        return !!url.match(dataURLRegex);
    }

Merci d'avance

Hors ligne

 

Pied de page des forums

Powered by FluxBB