使用 d3 和 Leaflet 更改 GeoJSON 功能的不透明度答案

【问题标题】：Changing opacity for GeoJSON feature using d3 and Leaflet使用 d3 和 Leaflet 更改 GeoJSON 功能的不透明度
【发布时间】：2015-01-06 09:08:32
【问题描述】：

我是 d3.js 的新手，并试图在我的 LeafletMap 中使用它。我有一些 GeoJSON 功能，其中包含带有 100 lon/lat coordinates 列表的 LineString 几何，类似于：

{"type":"LineString","coordinates":[[120.490741,-11.045729],[120.4889,-11.04797],..]}.

我需要这条线的最后 2/3 部分慢慢地“fade away"”，使用不透明度。例如，从它的左端开始的线的不透明度是 0.8 的 2/3 长度，然后它变成0.7 表示下一个小节，然后是 0.6、0.5 等等，直到在该行的右端达到 0。

如何使用带有 Leaflet 的 d3.js 来完成？

【问题讨论】：

标签： d3.js leaflet geojson

【解决方案1】：

如果您将LineString 转换为MultiLineString 即可。

Leaflet 将LineString 转换为L.Polyline 和MultiLineString 转换为L.MultiPolyline

在L.MultiPolyline 中，每个线段都由另一个层表示（SVG 术语中的另一个几何图形 (<g><path></path></g>)）。您可以遍历这些图层并为它们设置不同的样式。

示例代码

var latngs = ... // array of arrays of coordinates (see below for sample definition)

var p = L.multiPolyline(latlngs);

p.addTo(map);

p.getLayers().forEach(function(layer, index){
    var opacity = 1 - index / 10; // decreasing the opacity with 0.1 for each line segment
    layer.setStyle({opacity: opacity})
}

结果

var latngs = [
    [
        [6329.8125, -2014.4750909626719],
        [6362.859375, -2013.6042942934673]
    ],
    [
        [6362.859375, -2013.6042942934673],
        [6395.90625, -2018.3907793950361]
    ],
    [
        [6395.90625, -2018.3907793950361],
        [6411.375, -2014.0346123008687]
    ],
    [
        [6411.375, -2014.0346123008687],
        [6452.859375, -2012.977408428527]
    ],
    [
        [6452.859375, -2012.977408428527],
        [6472.546875, -2023.4066591698797]
    ],
    [
        [6472.546875, -2023.4066591698797],
        [6509.8125, -2017.3434450152427]
    ],
    [
        [6509.8125, -2017.3434450152427],
        [6589.265625, -2018.1244586532705]
    ],
    [
        [6589.265625, -2018.1244586532705],
        [6610.359375, -2031.0223863293038]
    ],
    [
        [6610.359375, -2031.0223863293038],
        [6627.234375, -2076.2043224171703]
    ],
    [
        [6627.234375, -2076.2043224171703],
        [6639.1875, -2111.165173368664]
    ],
    [
        [6639.1875, -2111.165173368664],
        [6634.96875, -2138.9089020477704]
    ],
    [
        [6634.96875, -2138.9089020477704],
        [6631.453125, -2151.366836892263]
    ],
    [
        [6631.453125, -2151.366836892263],
        [6628.640625, -2156.8446726342527]
    ],
    [
        [6628.640625, -2156.8446726342527],
        [6655.359375, -2159.428423641068]
    ],
    [
        [6655.359375, -2159.428423641068],
        [6672.9375, -2159.8248203461394]
    ],
    [
        [6672.9375, -2159.8248203461394],
        [6698.953125, -2159.428423641068]
    ],
    [
        [6698.953125, -2159.428423641068],
        [6715.828125, -2159.226699693061]
    ]
]

生成的 SVG 的 XML 表示

<?xml version="1.0"?>
<svg class="leaflet-zoom-animated" width="635" height="500" viewBox="177 127 635 500" style="transform: translate3d(177px, 127px, 0px);">
    <g> <path stroke-linejoin="round" stroke-linecap="round" stroke="#0033ff" stroke-opacity="0.9" stroke-width="5" fill="none" class="leaflet-clickable" d="M381 305L409 304"/> </g>

    <g> <path stroke-linejoin="round" stroke-linecap="round" stroke="#0033ff" stroke-opacity="0.8" stroke-width="5" fill="none" class="leaflet-clickable" d="M409 304L436 308"/> </g>

    <g> <path stroke-linejoin="round" stroke-linecap="round" stroke="#0033ff" stroke-opacity="0.7" stroke-width="5" fill="none" class="leaflet-clickable" d="M436 308L449 304"/> </g>

    <g> <path stroke-linejoin="round" stroke-linecap="round" stroke="#0033ff" stroke-opacity="0.6" stroke-width="5" fill="none" class="leaflet-clickable" d="M449 304L484 303"/> </g>
    ....
    ....
    ....
</svg>

附注：

当使用 L.Polyline 时，整行只是单个 SVG 几何 (<g><path></path><g>)，我认为不可能实现您想要的。

【讨论】：