交互式 Choropleth 地图 - 突出显示 - getcolor 函数

Question

我正在尝试创建一张自行车路线图，它将从 geojson 文件的属性中获取颜色。它基于交互式 Choropleth 地图。我现在遇到的问题是突出显示。这部分代码在 geojson 属性中检查路由的颜色：

function getColor(d) {
    return d == 'red' ? 'red' :
           d == 'blue' ? 'blue' :
           d == 'green' ? 'green' :
           d == 'black' ? 'black' :
           d == 'yellow' ? 'yellow' :
                'orange';
}

function style(feature) {
    return {
        weight: 2,
        opacity: 1,
        color: getColor(feature.properties.colour),
        dashArray: '3',
        fillOpacity: 0.7,

    };
}

它工作正常但是当我尝试使用相同的功能 "get color" 突出显示时 :

function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle({
        weight: 5,
        color: getColor(feature.properties.colour),
        dashArray: '',
        fillOpacity: 0.7
    });

它不会以 geojson 属性的颜色突出显示。这可能是一些小问题，但我还在学习，我不明白。有人可以解释一下并指出解决方案吗？非常感谢！这是一个工作示例（当然还没有完全工作，因为我还在学习）：

http://members.upcpoczta.pl/w.racek/mapa.html

谢谢！

Answer 1

在您的 highlightFeature 方法中，您引用 feature 的 setStyle 方法不存在。该功能在 e.target.feature 中定义。所以这会起作用：

function highlightFeature(e) {
    e.target.setStyle({
        weight: 5,
        color: getColor(e.target.feature.properties.colour),
        dashArray: '',
        fillOpacity: 0.7
    });
}

但是由于您没有更改颜色（和不透明度），所以您最好将它们完全排除在外，这也解决了问题:)

交互式 Choropleth 地图 - 突出显示 - getcolor 函数

Interactive Choropleth Map - Highlighting - getcolor function

leaflet

highlight

interactive