[英]why doesn't resetStyle of leaflet work for me?
I want to draw a map with few routes drawn on it. 我想画一张地图,上面画了几条路线。
I want to have a dropbox with numbers 1,..,n 我想要一个数字为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? 为什么我的
resetStyle()
不将线条恢复为原始样式?
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.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">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 ?? });
The resetStyle
method of L.GeoJSON
reset the given layer's style back to the style defined when initializing the L.GeoJSON
layer: resetStyle
方法L.GeoJSON
定层的样式重置回初始化L.GeoJSON
层时定义的样式:
Resets the given vector layer's style to the original GeoJSON style, useful for resetting style after hover events.
将给定的矢量层样式重置为原始的GeoJSON样式,这对于在悬停事件之后重置样式很有用。
http://leafletjs.com/reference.html#geojson-resetstyle http://leafletjs.com/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 在Plunker上的工作示例: http ://plnkr.co/edit/iriGMBYiFRizeXizMF06?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.