comment ajouter du texte à afficher sur la carte à un objet geojson dans un dépliant

J'ai donc un geojson couche dans la notice, et je peux ajouter geojson les objets de ce calque pour afficher sur la carte.

Maintenant, je voudrais ajouter une étiquette de texte à afficher à côté de l'objet.

Cet exemple montre l'utilisation d'une coutume L.control() objet pour afficher des informations supplémentaires sur la carte. Qui semble proche de ce que je veux faire.

Donné cet exemple, je voudrais ajouter de l'État initial des étiquettes de texte (c'est à dire "TX", "FL") positionné au-dessus de chaque état. Peut L.control() être utilisé pour ce faire, ou est-il un autre moyen?

http://leaflet.cloudmade.com/examples/choropleth.html

var info = L.control();

info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info'); //create a div with a class "info"
    this.update();
    return this._div;
};

//method that we will use to update the control based on feature properties passed
info.update = function (props) {
    this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
        '<b>' + props.name + '</b><br />' + props.density + ' people /mi<sup>2</sup>'
        : 'Hover over a state');
};

info.addTo(map);

source d'informationauteur monkut

  1. 14

    Je cherchais la même question récemment, et juste en œuvre hier basé sur un affichage, dans le groupe google.
    https://groups.google.com/forum/#!topic/dépliant-js/sA2HnU5W9Fw

    Merci à Adrian pour le code d'origine de l'échantillon.

    Voici la solution:

    Étendre la classe suivante comme ci-dessous:

    <script>
L.LabelOverlay = L.Class.extend({
initialize: function(/*LatLng*/ latLng, /*String*/ label, options) {
this._latlng = latLng;
this._label = label;
L.Util.setOptions(this, options);
},
options: {
offset: new L.Point(0, 2)
},
onAdd: function(map) {
this._map = map;
if (!this._container) {
this._initLayout();
}
map.getPanes().overlayPane.appendChild(this._container);
this._container.innerHTML = this._label;
map.on('viewreset', this._reset, this);
this._reset();
},
onRemove: function(map) {
map.getPanes().overlayPane.removeChild(this._container);
map.off('viewreset', this._reset, this);
},
_reset: function() {
var pos = this._map.latLngToLayerPoint(this._latlng);
var op = new L.Point(pos.x + this.options.offset.x, pos.y - this.options.offset.y);
L.DomUtil.setPosition(this._container, op);
},
_initLayout: function() {
this._container = L.DomUtil.create('div', 'leaflet-label-overlay');
}
});   
</script>

    En outre ajouter ce css:

    <style>
.leaflet-popup-close-button {
display:none;
}
.leaflet-label-overlay {
line-height:0px;
margin-top: 9px;
position:absolute;
}
</style>

    Et puis afficher les étiquettes de texte comme ci-dessous:

    <script>
var map = L.map('map').setView([51.898712, 6.7307100000001], 4);
//add markers
//...
//add text labels:
var labelLocation = new L.LatLng(51.329219337279405, 10.454119349999928);
var labelTitle = new L.LabelOverlay(labelLocation, '<b>GERMANY</b>');
map.addLayer(labelTitle);
var labelLocation2 = new L.LatLng(47.71329162782909, 13.34573480000006);
var labelTitle2 = new L.LabelOverlay(labelLocation2, '<b>AUSTRIA</b>');
map.addLayer(labelTitle2);
//In order to prevent the text labels to "jump" when zooming in and out,
//in Google Chrome, I added this event handler:
map.on('movestart', function () {
map.removeLayer(labelTitle);
map.removeLayer(labelTitle2);
});
map.on('moveend', function () {
map.addLayer(labelTitle);
map.addLayer(labelTitle2);
});
</script>

    Résultat:

    comment ajouter du texte à afficher sur la carte à un objet geojson dans un dépliant

  2. 16

    Étiquette de Superposition dans la fiche à l'Aide du Marqueur de Classe et DivIcon Classe Avec 'html' Propriété

    Personnellement, j'utilise cette méthode pour mettre en œuvre des étiquettes de texte sur la carte. De cette façon, j'arrive à utiliser la totalité de l'existant Marqueur de Classe des méthodes et des événements sans effort supplémentaire. C'est un peu comme juste en utilisant une étiquette de texte à remplacer une icône, je suppose.

            var textLatLng = [35.1436, -111.5632];  
var myTextLabel = L.marker(textLatLng, {
icon: L.divIcon({
className: 'text-labels',   //Set class for CSS styling
html: 'A Text Label'
}),
draggable: true,       //Allow label dragging...?
zIndexOffset: 1000     //Make appear above other map features
});

    Mon CSS ressemble:

            .text-labels {
font-size: 2em;
font-weight: 700;
/* Use color, background, set margins for offset, etc */
}

    Aussi, je n'ai pas exploré encore, mais peut-être que vous pouvez ajouter un png pour le CSS, puis décaler le texte, de sorte que vous pouvez placer une icône et l'étiquette dans le même Marqueur de l'objet à l'aide de la Notice DivIcon la classe?? Ce serait facile, avec un div forme (par exemple, la boîte, le cercle), mais je ne suis pas sûr à propos de l'ajout d'un png à la CSS pour le Marqueur de l'objet parce que je ne suis pas un gourou CSS par tous les moyens.