Question

编辑**以下是my website的链接。 Leaflet测试一页到目前为止是有效的，传单测试第2页是我尝试添加交互功能的时候。

我很难让我的互动地图实际上是互动的。我正在绘制PA县的井数量图。我一直在关注

的说明

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正在做什么。我已经坚持了一段时间。任何想法都表示赞赏！

Answer 1

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

我有

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

我需要包含我的geojson var名称

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

（我可以发誓我早些时候尝试过，但它现在正在工作！）

与传单故障的交互式等值线图

1 个答案: