带有传单问题的交互式 Choropleth 地图

Question

编辑** 这是 link 到 my website。传单测试一页是目前有效的传单测试页 2 是当我尝试添加交互功能时。

我很难让我的交互式地图真正具有交互性。我正在绘制宾夕法尼亚州各县水井数量的地图。我一直在按照

上的说明进行操作

http://leafletjs.com/examples/choropleth.html#interactive-choropleth-map

我已经设法 find/create 一个包含我需要的所有信息的 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 在做什么。我已经坚持了一段时间。任何想法表示赞赏！

Answer 1

我想通了。有一个声明我忘记包含我的 geojson 变量。

我有

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

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

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

（我本可以发誓我之前尝试过，但它现在起作用了！）

带有传单问题的交互式 Choropleth 地图

Interactive Choropleth Map with Leaflet trouble

html

javascript

gis

geojson

leaflet