与 Leaflet 交互式区域地图问题

Question

编辑 **这里是我的网站链接。目前为止，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 &copy; <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在做什么。我已经卡在这里很长时间了。欢迎提出任何想法！

- franchyze923

---

如果地图根本没有加载，我想知道您的javascript代码中是否存在语法错误。您在开发者控制台中是否看到任何错误？ - curpa

如果您提供给我们一个链接到您的页面或创建一个fiddle，我们可以查看到底出了什么问题。 - muzaffar

我已经添加了一个链接到我的网站。谢谢。 - franchyze923

Answer 1

我明白了...有一条语句中，我忘记包含我的geojson变量。

我有：

var geojson;
// ... our listeners
geojson = L.geoJson(...);

我需要包含我的geojson变量名称

var geojson;
// ... our listeners
geojson = L.geoJson(wcc);

我本来以为我之前尝试过了，但现在它可以工作了！

- franchyze923