#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