问传单:使用鼠标和不透明会产生冲突。
EN

Stack Overflow用户

提问于 2017-11-29 09:36:09

回答 1查看 1.1K关注 0票数 2

我创建了一个函数来鼠标移动一个无色的图层和所有的东西。到目前为止还不错，并且还创建了一个函数，让它回到以前的鼠标。但是，当我使用不透明度时，重置函数不会返回到正常状态，使不透明度处于默认状态(0.7)，而不处于当前的状态。

功能：

function highlightFeature_stComerciais(e) {
            layerStComerciais = e.target;

            layerStComerciais.setStyle({
                weight: 5,
                color: '#666',
                dashArray: ''
            });

            info.update(layerStComerciais.feature.properties);
        }

功能到鼠标输出

function resetHighlight_stComerciais(e) {
            setoresComerciaisOverlay.resetStyle(e.target);
            info.update();
        }

不透明度：

$('#sldOpacity').on('change', function(){
            $('#image-opacity').html(this.value);
            setoresComerciaisOverlay.setStyle({ fillOpacity: this.value })  
        });

默认的不透明度是0.7，假设我把0的不透明度，当我做鼠标对这一层好，但当我鼠标出来，它返回到0.7，我不想这样。为什么我的重置不能以我想要的方式工作？谢谢!

maps

leaflet

javascript

jquery

平台电商解决方案

为客户提供电商客服、电商图片系统识别及搜索的快速搭建方案

回答 1

Stack Overflow用户

发布于 2017-11-29 11:10:01

我猜您使用GeoJSON数据和L.geoJSON工厂构建了向量层，这将返回一个传单GeoJSON层组。

该组上的resetStyle方法重新应用在创建该组时应用的style，如果不提供样式，则重新应用默认的style：

将给定向量层的样式重置为原始的GeoJSON样式，用于在悬停事件后重置样式。

如果稍后更改该组中一个或所有向量层的样式，则在使用resetStyle时它将被重写，并且将应用初始样式。

一个简单的解决方法就是修改GeoJSON层组的style选项。然而，它将影响到它的所有子层。

group.options.style = newStyle;

另一种解决方案是记录每个向量层的新样式，并在您想要恢复以前的状态时使用记录的值，而不是使用组的resetStyle方法。

var map = L.map("map").setView([48.85, 2.35], 12);

var geojson = {
  type: "Feature",
  geometry: {
    type: "Point",
    coordinates: [2.35, 48.85]
  }
};

var point;
var startStyle = {
  color: "red"
};
var newStyle = {
  color: 'green'
};

var group = L.geoJSON(geojson, {
  style: startStyle,
  pointToLayer: function(feature, latlng) {
    point = L.circleMarker(latlng);
    assignStyle(point, startStyle);
    return point;
  }
}).addTo(map);

// Record the style to the individual vector layer if necessary.
function assignStyle(leafletLayer, newStyle) {
  leafletLayer.setStyle(newStyle);
  leafletLayer._recordedStyle = newStyle;
}

// When desired, apply the style that has been previously recorded.
function reassignStyle(leafletLayer) {
  leafletLayer.setStyle(leafletLayer._recordedStyle);
}

document.getElementById('button').addEventListener('click', function(event) {
  event.preventDefault();

  // Either use the wrapper function that records the new style…
  //assignStyle(point, newStyle);

  // Or simply modify the group's style option, if it is acceptable affecting all child layers.
  point.setStyle(newStyle);
  group.options.style = newStyle;
});

group.on({
  mouseover: function(e) {
    e.target.setStyle({
      color: 'blue'
    });
  },
  mouseout: function(e) {
    //reassignStyle(e.layer);
    group.resetStyle(e.layer);
  }
});

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js"></script>

<div id="map" style="height: 100px"></div>
<button id="button">Change color to Green…</button>
<p>…then mouseover and mouseout</p>