onEachFeature中的GeoJSON方法
onEachFeature中的GeoJSON方法
提问于 2018-07-25 08:05:58
Vue2Leaflet是一个在Vue2框架中实现Leaflet的库；能够在地图上显示GeoJSON对象。
对于多个GeoJSON行，我希望有一个影响其他行的样式的鼠标单击事件(例如，它切换了一个selectedLineId变量)。我设法在鼠标悬停时更改了geojson线的样式；请参见此JSFiddle。
核心是onEachFeature，它将鼠标悬停事件添加到每个功能上。但是我不知道如何在这里运行Vue方法；
function onEachFeature (feature, layer) {
layer.on('mouseover', function (e) {
e.target.setStyle({
color: "#FF0000"
});
});
layer.on('mouseout', function (e) {
e.target.setStyle({
color: "#000000"
});
});
}回答 1
Stack Overflow用户
发布于 2018-07-25 08:41:13
您可以将onEachFeature函数bind到您的Vue对象：
data() {
return {
// ...
lines: {
geojson: geojsondata,
options: {
onEachFeature: onEachFeature.bind(this),
style: {
color: "#000000"
}
}
}
}
}然后，onEachFeature中的this将引用您的Vue对象：
function onEachFeature (feature, layer) {
var v = this;
layer.on('mouseover', function (e) {
// assuming you have a getColor method defined
e.target.setStyle({
color: v.getColor()
});
});
layer.on('mouseout', function (e) {
e.target.setStyle({
color: "#000000"
});
});
}这是一个更新的提琴：https://jsfiddle.net/qywaz1h8/96/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51513848
复制
相似问题
模式不会隐藏在JS、jQuery或CSS中
ajaxStop中的关闭模式
Jquery ajaxStop
ajaxStop函数中的Ajax函数
jquery::ajaxStop()与jquery::ajaxComplete()
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
