D3.js 使用d3和传单更改GeoJSON功能的不透明度

我刚接触过

d3.js

，并试图在我的地图中使用它。我有一些GeoJSON功能，其中包含线串几何体，带有

100 lon/lat坐标列表

，类似于：

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

我需要这行的最后2/3部分使用不透明度慢慢地“

淡出”

。例如，对于长度的2/3，从其左端开始的线的不透明度为0.8，然后对于下一个小截面，它变为0.7，然后变为0.6、0.5，依此类推，直到它在线的右端达到0

---

如何使用d3.js和传单来实现这一点？

如果您将

行字符串

转换为

多行字符串

，就可以实现这一点

传单将

LineString

转换为

L.Polyline

并将

multilestring

转换为

L.Polyline

在

L.MultiPolyline

中，每个线段由另一层（SVG术语中的另一个几何体（

）表示）。您可以在这些层中循环并为其设置不同的样式

示例代码

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>

....
....
....

p.S.：

当使用

L.Polyline

时，整条线只是一个SVG几何体（

），我认为不可能达到您想要的效果