javascript - why doesn't resetStyle of leaflet work for me? - Stack Overflow

admin管理员组

文章数量:1305846

I want to draw a map with few routes drawn on it.

I want to have a dropbox with numbers 1,..,n

when an item in the dropbox is chosen, the corresponding route is highlighted on the map.

I have started using "leaflet".

why doesn't my resetStyle() return the lines to their original style?

here is my code:

document.onload = loadMap();

function loadMap() {
  var map = L.map('map').setView([37.8, -96], 4);


  L.tileLayer('/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="">OpenStreetMap</a> contributors,<a href=".0/">CC-BY-SA</a>, Imagery © <a href="">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoiZW==========yJ9.3HqHQ4BMRvSPaYe8ToA7YQ'
  }).addTo(map);


  var marker = L.marker([51.5, -0.09]).addTo(map);


  var myLines = [{
    "type": "LineString",
    "properties": {
      "id": "1"
    }
    "coordinates": [
      [-100, 40],
      [-105, 45],
      [-110, 55]
    ]
  }, {
    "type": "LineString",
    "properties": {
      "id": "2"
    }
    "coordinates": [
      [-105, 40],
      [-110, 45],
      [-115, 55]
    ]
  }];

  var myLayer = L.geoJson().addTo(map);
  myLayer.addData(myLines);


  geojson = L.geoJson(myLines, {
    onEachFeature: onEachFeature
  }).addTo(map);

}



function highlightFeature(e) {
  var layer = e.target;

  layer

  layer.setStyle({
    weight: 25,
    color: '#ff3300',
    dashArray: '',
    fillOpacity: 0.7
  });

  if (!L.Browser.ie && !L.Browser.opera) {
    layer.bringToFront();
  }
}

function resetHighlight(e) {
  geojson.resetStyle(e.target);


  layer.setStyle({
    weight: 5,
    color: '#0000ff',
    dashArray: '',
    fillOpacity: 0.7
  });
}


function onEachFeature(feature, layer) {
  layer.on({
    mouseover: highlightFeature,
    mouseout: resetHighlight,
    // click: zoomToFeature
  });
}

$('select[name="dropdown"]').change(function() {

  var item = $(this).val();
  alert("call the do something function on option " + item);
  //how to make the chosen line highlighted ??

});

I want to draw a map with few routes drawn on it.

I want to have a dropbox with numbers 1,..,n

when an item in the dropbox is chosen, the corresponding route is highlighted on the map.

I have started using "leaflet".

why doesn't my resetStyle() return the lines to their original style?

here is my code:

document.onload = loadMap();

function loadMap() {
  var map = L.map('map').setView([37.8, -96], 4);


  L.tileLayer('https://api.tiles.mapbox./v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="http://openstreetmap">OpenStreetMap</a> contributors,<a href="http://creativemons/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoiZW==========yJ9.3HqHQ4BMRvSPaYe8ToA7YQ'
  }).addTo(map);


  var marker = L.marker([51.5, -0.09]).addTo(map);


  var myLines = [{
    "type": "LineString",
    "properties": {
      "id": "1"
    }
    "coordinates": [
      [-100, 40],
      [-105, 45],
      [-110, 55]
    ]
  }, {
    "type": "LineString",
    "properties": {
      "id": "2"
    }
    "coordinates": [
      [-105, 40],
      [-110, 45],
      [-115, 55]
    ]
  }];

  var myLayer = L.geoJson().addTo(map);
  myLayer.addData(myLines);


  geojson = L.geoJson(myLines, {
    onEachFeature: onEachFeature
  }).addTo(map);

}



function highlightFeature(e) {
  var layer = e.target;

  layer

  layer.setStyle({
    weight: 25,
    color: '#ff3300',
    dashArray: '',
    fillOpacity: 0.7
  });

  if (!L.Browser.ie && !L.Browser.opera) {
    layer.bringToFront();
  }
}

function resetHighlight(e) {
  geojson.resetStyle(e.target);


  layer.setStyle({
    weight: 5,
    color: '#0000ff',
    dashArray: '',
    fillOpacity: 0.7
  });
}


function onEachFeature(feature, layer) {
  layer.on({
    mouseover: highlightFeature,
    mouseout: resetHighlight,
    // click: zoomToFeature
  });
}

$('select[name="dropdown"]').change(function() {

  var item = $(this).val();
  alert("call the do something function on option " + item);
  //how to make the chosen line highlighted ??

});

• javascript
• jquery
• css
• maps
• leaflet

Share Improve this question Follow asked Jan 28, 2016 at 21:41 Elad BendaElad Benda 36.7k9191 gold badges283283 silver badges493493 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

The resetStyle method of L.GeoJSON reset the given layer's style back to the style defined when initializing the L.GeoJSON layer:

Resets the given vector layer's style to the original GeoJSON style, useful for resetting style after hover events.

http://leafletjs./reference.html#geojson-resetstyle

Code example:

var geojsonLayer = new L.GeoJSON(geojson, {
    style: function () {
        return {
            color: 'red'
        }
    },
    onEachFeature: function (feature, layer) {
        layer.on('mouseover', function () {
            this.setStyle({
                color: 'green'
            });
        });
        layer.on('mouseout', function () {
            geojsonLayer.resetStyle(this);
        });
    }
}).addTo(map);

Working example on Plunker: http://plnkr.co/edit/iriGMBYiFRizeXizMF06?p=preview

本文标签： javascriptwhy doesn39t resetStyle of leaflet work for meStack Overflow