[英]Leaflet & GeoJson: can't get toolTip to work
基于 GeoJSON 文件制作了欧洲地图,突出显示多边形并点击 URL。
我想在多边形中放置标签(国家/地区代码)并有一种方法可以使 toolTips 工作。
我的代码是这样的:
var geojson;
var lat = 50.0755381;
var long = 14.43780049999998;
url = "europe.js"
var map = L.map('map').setView([lat, long], 4);
// Set background to fully transparent, would prefer to have this white, with no background.
L.tileLayer(' https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoibmlja255ciIsImEiOiJjajduNGptZWQxZml2MndvNjk4eGtwbDRkIn0.L0aWwfHlFJVGa-WOj7EHaA', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
opacity: 0,
id: 'mapbox.dark'
}).addTo(map);
//setting default style
var style =({
weight: 1,
color: '#ffffff',
fillColor: '#12CBDA',
dashArray: '',
fillOpacity: 0.6
});
// getting data from the geojson....
// I have the property fields: name, code, url, coverage and text
// the geometry data is correctly used and hover works nicely
// below I've also succeeded in getting the link to url to work
// I want to parse the name (as header) and text properties to a toolTip
// Ideally I would put the country code on the map as a label
var layer = new L.GeoJSON(countries_data, { style: style,
onEachFeature: function (feature, layer) {
layer.on('mouseover', function () {
this.setStyle({
'fillColor': '#015270',
'color': '#015270',
'opacity': 0.8,
'weight': 2
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
this.bindTooltip("some text");
}
},
layer.on('mouseout', function () {
this.setStyle(style);
this.bringToBack();
}));
layer.on('click', function () {
window.location = feature.properties.url;
});
}
}).addTo(map);
感谢您的建议!
不要在mouseover
事件中添加工具提示:
ar layer = new L.GeoJSON(countries_data, { style: style,
onEachFeature: function (feature, layer) {
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
this.bindTooltip("some text");
}
layer.on('mouseover', function () {
this.setStyle({
'fillColor': '#015270',
'color': '#015270',
'opacity': 0.8,
'weight': 2
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
},
layer.on('mouseout', function () {
this.setStyle(style);
this.bringToBack();
}));
layer.on('click', function () {
window.location = feature.properties.url;
});
}
}).addTo(map);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.