如何在Mapbox Map中重置多边形的样式?

时间:2017-01-28 23:30:11

标签: javascript html leaflet mapbox mapbox-gl-js

当“鼠标输出”发生时,我无法重置多边形的样式。

以下是我目前的代码:

countriesLayer是不同国家坐标的geoJson数据的变量。

正如您所看到的,有4个函数:highlightFeature,resetHighlight,zoomToFeature和lastOnEachFeature。

我对其他3个功能没有任何问题,但“resetHighlight”......

根据Mapbox文档,它说我只需要使用geojson.resetStyle,但它似乎不起作用。

有谁可以帮我解决这个问题?

<script>
    L.mapbox.accessToken = 'pk.eyJ1IjoidGhsZWUxMTIyIiwiYSI6ImNpeWdyd2tycDAzZTUzMm12eDcybjJocTgifQ.r1njnGgI95MNlwVBTm1slw';
    var map = L.mapbox.map('map') 
        .setView([16.541430, 7.558594], 3);

    // Use styleLayer to add a Mapbox style created in Mapbox Studio
    L.mapbox.styleLayer('mapbox://styles/thlee1122/ciyhpbj15003d2sluqt6ylrqa', {zoomControl: false}).addTo(map);

    //Disable zooming and scrolling
    map.dragging.disable();
    map.touchZoom.disable();
    map.doubleClickZoom.disable();
    map.scrollWheelZoom.disable();
  
  L.geoJSON(countriesLayer, {
      style: function(feature) {
        switch(feature.properties.title) {
          case 'France': return {
            color: "#3ca0d3" 
          };
          case 'China': return {
            color: "#f86767"
          };
          case "Korea": return {
            color: "#e7857f"
          };
          case "Span": return {
            color: "#fa946e"
          };
          case "United States of America": return {
            color: "#9c89cc"
          }
        }
      },

      onEachFeature: countriesOnEachFeature
    }).addTo(map);
  
    function highlightFeature(e) {
      var layer = e.target;
      layer.setStyle(
        {
          weight: 5,
          color: 'black',
          fillColor: 'grey',
          fillOpacity: 0.2
        }
      )

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

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

    function zoomToFeature(e) {
      map.fitBounds(e.target.getBounds())
    }

    function countriesOnEachFeature(feature, layer) {
      layer.on(
        {
          mouseover: highlightFeature,
          mouseout: resetHighlight,
          click: zoomToFeature  
        }
      )
    }
</script>

0 个答案:

没有答案