Question

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

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

我需要使用不透明度慢慢地将此行的最后2/3部分放到＆＃34; fade away"。例如，从它的左端开始的线的不透明度对于长度的2/3是0.8，然后对于下一个小部分变为0.7，然后是0.6,0.5，依此类推，直到它达到0。右边的那一行。

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

Answer 1

如果您将LineString转换为MultiLineString，则可以执行此操作。

宣传单将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})
}

<强>结果

Fading line

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几何（<g><path></path><g>），我认为不可能达到你想要的效果。

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

1 个答案: