changement dépliant icône de marque

Je suis à l'aide du Dépliant de Curseur, de Dennis, Wilhelm, de montrer les changements dans les données sur un Feuillet de la carte.

Je suis en train de changer le changement de l'icône de marque, mais ne pas l'obtenir droite. Alors,Comment puis-je modifier l'icône des repères lors de l'utilisation Notice Curseur pour voir les changements au fil du temps? Quels sont les changements que j'ai à faire dans l'original SliderControl.js?

Merci d'avance!

Ci-dessous est le lien de Dennis Wilhelm Dépliant du Curseur code:

https://github.com/dwilhelm89/LeafletSlider/blob/master/SliderControl.js

InformationsquelleAutor sowmyaa guptaa | 2017-01-11
  1. 16

    Vous pouvez créer une nouvelle classe d'une icône comme ci-dessous:

    var LeafIcon = L.Icon.extend({
    options: {
       iconSize:     [38, 95],
       shadowSize:   [50, 64],
       iconAnchor:   [22, 94],
       shadowAnchor: [4, 62],
       popupAnchor:  [-3, -76]
    }
});

    Puis créer une nouvelle icône de l'objet comme ci-dessous:

    var greenIcon = new LeafIcon({
    iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png',
    shadowUrl: 'http://leafletjs.com/examples/custom-icons/leaf-shadow.png'
})

    Vous pouvez maintenant au-dessus de l'icône du marqueur dans la carte ci-dessous:

    L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);

    Vous pouvez vous référer cette document pour de plus amples informations.

    Pour slidercontrol vous devez créer deux images:

    (1) Marker Icon [ Use name: marker-icon.png ]
(2) Marker Icon Shadow [ Use name: marker-shadow.png ]

    Après cela, vous pouvez spécifier la valeur par défaut le chemin de l'image comme ci-dessous:

    L.Icon.Default.imagePath = "Url to the image folder"; //This specifies image path for marker icon. 
e.x L.Icon.Default.imagePath = "http://leafletjs.com/examples/custom-icons";

    Afin que l'icône Url sera:

    Icon URL  :  http://leafletjs.com/examples/custom-icons/marker-icon.png
Shadow URL:  http://leafletjs.com/examples/custom-icons/marker-shadow.png
    • En fait, si vous voyez l'original slidercontrol.js fichier (github.com/dwilhelm89/LeafletSlider/blob/master/...), ici, il ajoute le marqueur comme.. la carte.addLayer(_options.marqueurs[i]); et non pas comme L. marqueur([51.5, -0.09], {icône: greenIcon}).addTo(carte); alors, comment changer l'icône de la carte.addLayer(_options.marqueurs[i])?
    • Merci de cette solution est de travailler pour moi
    InformationsquelleAutor Jainil
  2. 2

    Ce sera l'exacte des changements dans l'original slidercontrol.js fichier

       if (this._layer) {
        var index_temp = 0;
        this._layer.eachLayer(function (layer) {

             var greenIcon = L.icon({ //add this new icon
                iconUrl: i+'.png',
                shadowUrl: 'leaf-shadow.png',

                iconSize:     [38, 95], //size of the icon
                shadowSize:   [50, 64], //size of the shadow
                iconAnchor:   [22, 94], //point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  //the same for the shadow
                popupAnchor:  [-3, -76] //point from which the popup should open relative to the iconAnchor
            });

            options.markers[index_temp] = layer;
            options.markers[index_temp].setIcon(greenIcon); //Here set the icon to indiviual markers

            ++index_temp;
        });
        options.maxValue = index_temp - 1;
        this.options = options;
    }
    InformationsquelleAutor sowmyaa guptaa