编辑 **这里是我的网站链接。目前为止,Leaflet测试页面一已经可以正常使用,而 Leaflet 测试页面二则是我尝试添加交互功能的页面。
我在让我的交互式地图变得真正交互方面遇到了困难。我正在制作宾夕法尼亚州各县井数的地图。我遵循了以下网址上的指示:
http://leafletjs.com/examples/choropleth.html#interactive-choropleth-map
我成功找到或创建了一个包含所需信息的 GeoJSON 文件,并且可以根据属性数据显示颜色,但是当我尝试使它交互时(悬停时高亮显示县界),它就无法正常工作。
var map = L.map('map').setView([40.6473, -99.84375], 5);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
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>',
id: 'examples.map-i875mjb7'
}).addTo(map);
// start GeoJson
function base (feature,layer){
layer.bindPopup("<h1 class='info'> Hi, I'm a box</h1><p class='info2'>" + feature.properties.count_ + "</p> <p class='info2'>" + feature.properties.name + "</p>");
};
function getColor(d) {
return d > 1000 ? '#800026' :
d > 500 ? '#BD0026' :
d > 200 ? '#E31A1C' :
d > 100 ? '#FC4E2A' :
d > 50 ? '#FD8D3C' :
d > 20 ? '#FEB24C' :
d > 10 ? '#FED976' :
'#FFEDA0';
}
function style(feature) {
return {
fillColor: getColor(feature.properties.count_),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}
L.geoJson(wcc, {style: style}).addTo(map);
//good up to here
当我尝试添加下一个处理交互功能的代码块时,地图无法加载。
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
}
function resetHighlight(e) {
geojson.resetStyle(e.target);
}
我对这一切都很新奇,希望这是些简单的东西。我确实不太理解e.target
在做什么。我已经卡在这里很长时间了。欢迎提出任何想法!