cambiare opuscolo icona del contrassegno

Io sto usando il Foglio di Scorrimento, di Dennis Wilhelm, per visualizzare le modifiche dei dati di un Foglio di mappa.

Sto cercando di cambiare il cambiare l’icona del contrassegno, ma non giusto. Così,Come posso cambiare l’icona del contrassegno quando uso Opuscolo dispositivo di Scorrimento per visualizzare le modifiche nel corso del tempo? Quali modifiche devo fare in originale SliderControl.js?

Grazie in anticipo!

Di seguito il link per Dennis Wilhelm dell’Opuscolo Cursore codice:

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

 

2 Replies
  1. 11

    È possibile creare una nuova icona di classe come di seguito:

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

    Quindi creare una nuova icona in oggetto come di seguito:

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

    Ora è possibile sopra l’icona per l’indicatore della mappa, come di seguito:

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

    È possibile fare riferimento a questa documento per ulteriori informazioni.

    Per slidercontrol è necessario creare due immagini:

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

    Dopo di che è possibile specificare il percorso dell’immagine, come di seguito:

    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";

    In modo che l’icona Url sarà:

    Icon URL  :  http://leafletjs.com/examples/custom-icons/marker-icon.png
    Shadow URL:  http://leafletjs.com/examples/custom-icons/marker-shadow.png
    • In realtà, se vedi l’originale slidercontrol.js il file (github.com/dwilhelm89/LeafletSlider/blob/master/…), si aggiunge il marcatore come.. mappa.addLayer(_options.marcatori[i]); e non come L. marcatore([51.5, -0.09], {icona: greenIcon}).aggiungia(mappa); così, come modificare l’icona sulla mappa.addLayer(_options.marcatori[i])?
  2. 2

    Questo sarà l’esatto modifiche in originale slidercontrol.js file

       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;
        }

Lascia un commento