Leaflet - 如何根据通用属性设置不同的 geoJson 功能？答案

【问题标题】：Leaflet - How do I style a different geoJson feature based on common attributes?Leaflet - 如何根据通用属性设置不同的 geoJson 功能？
【发布时间】：2014-04-28 19:13:31
【问题描述】：

我正在尝试在 Leaflet 中单击点图层时设置折线图层的样式。这两个图层目前都是 geoJson 格式，所以我通过“feature.properties”访问它们的属性。

我可以获得选定点要素的“名称”属性，并且可以在鼠标事件上单独突出显示折线要素，但我不知道如何调用函数以突出显示具有相同属性的折线要素。

这是我添加点图层并获取名称属性的代码：

//Add geoJson point layer
var points = L.geoJson(geoJsonPoints, {
    pointToLayer: function (feature, latlng) {
        var iconType = 'images/'+feature.properties.Type+'.png';
        var marker = L.marker(latlng,{
                        icon: L.icon({iconUrl: iconType})
            });     

        marker.on("click", function (e) {
            var ptID = feature.properties.Name;
          //Call function to highlight line feature
            highlightFeature(ptID);
            });

        return marker;
        },

    onEachFeature: onEachPointFeature}
    );

这是我的多段线样式代码：

//Create polyline highlight style
var highlightStyle = { 
        "color": "#2262CC",
        "weight": 7,
        "opacity": 1
    };

//Highlight polyline features on event
function highlightFeature(e) {
        var layer = e.target;
        // Change the style to the highlighted version
        layer.setStyle(highlightStyle);

        if (!L.Browser.ie && !L.Browser.opera) {
            layer.bringToFront();
        }       
    };

//Reset polyline style
function resetHighlight(e){
        var layer = e.target;
        layer.setStyle(defaultStyle); 
    };

【问题讨论】：

highlightFeature(e) 在这种情况下似乎不正确。您正在使用您的 ptID 调用该函数。所以var layer = e.target; 不起作用。您可能可以使用 Leaflet Data Visualization Framework 来解决您的问题。 github.com/humangeo/leaflet-dvf
正确。我试图确定如何修改我的事件。最终使用全局变量和外部函数返回折线样式。感谢您提供 DVF 链接！

标签： javascript leaflet geojson

【解决方案1】：

在我的例子中，我使用 php 从 postgres 中提取数据，并根据公共属性（属性）在生成将添加到地图的 gejson 时包含每个点的颜色。

PHP

$colors = array('1' => '#00CC00', '2' => '#FFD700');

// Loop through (iterate) all our records and add them to our array
while ($row = @pg_fetch_assoc($result))
{
    $properties = $row;        

    //exclude the coordinates from properties for the popup
    unset($properties['latitud']);
    unset($properties['longitud']);

    //add the color to each marker depending on the attribute grupo
    $properties ['color'] = $colors[$properties['grupo']];

    $feature = array(
        'type' => 'Feature',            
        'geometry' => array(
            'type' => 'Point',
            'coordinates' => array(
                floatval($row['longitud']),
                floatval($row['latitud'])
            )
        ),
        'properties' => $properties
    );

    array_push($geojson['features'], $feature);
}

然后加载到我的传单地图中：

L.geoJson(marker, {
    style: function (feature) {
        return {color: feature.properties.color};
    },
    pointToLayer: function (feature, latlng) {
    return new L.CircleMarker(latlng, {radius: 5, fillOpacity: 0.55});
    }
}).addTo(markers);

希望对您有所帮助，如果您有任何问题，请告诉我。
维托

【讨论】：