Question

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

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

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

//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); 
    };

Answer 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);

我希望这会对你有所帮助，如果你有疑问，请告诉我维托

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

1 个答案: