Изменение непрозрачности для функции GeoJSON с использованием d3 и листка

Question

Я новичок в d3.js и пытаюсь использовать его в моей Листовке. У меня есть некоторая GeoJSON особенность, которая содержит геометрию LINESTRING со списком 100 lon/lat coordinates, что-то вроде:.

{"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 на правом конце линии.

Как это сделать, используя d3.js с листом?

Answer 1

Вы можете сделать это, если вы конвертируете LineString в MultiLineString.

листовка преобразует LineString в L.Polyline и MultiLineString в L.MultiPolyline

В L.MultiPolyline каждый отрезок представлен другой слой (другая геометрия (<g><path></path></g>) в терминах 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] 
    ] 
] 

XML представление результирующего SVG

<?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 (<g><path></path><g>), и я не думаю, что можно добиться того, что вы хотите.