如何从tile获取画布Layer Leaflet 1.0

Question

我正在使用Leaflet.VectorGrid插件绘制通过Leaflet 1.0中的geojson-vt切片的切片。

我想在绘制时向路径添加渐变。 我在stackoverflow上找到了用于沿路径添加渐变的代码 ，但它需要画布。

我的问题是：如何获取对画布的引用，或如何在画布上绘制上下文（ ctx ）？

这是我的代码来添加tileLayer：

var tileLayer = L.vectorGrid.slicer(data, {
        rendererFactory: L.canvas.tilee,
        vectorTileLayerStyles: {
            sliced: function(properties, zoom) {                    
                var endColor=70;       

                // var grad = ctx.createLinearGradient(begin[0], begin[1], end[0], end[1]);
                // grad.addColorStop(0, begin[2]);
                // grad.addColorStop(1, end[2]);
                // ctx.strokeStyle = grad;

                return {                        
                    stroke: true,
                    fill: true,
                    color: endColor < 20? 'red' :
                            endColor < 50? 'orange' :
                            endColor < 70? 'yellow' :
                            endColor < 100? 'green' : 'blue',/
                    weight: 5,
                }
            }
        }

    });

Answer 1

我是Leaflet.VectorGrid的创建者。

我的问题是：如何获得对画布的引用，或如何在画布上绘制上下文（ctx）？

答案是：您不会 。 Leaflet代码的结构使抽象画布上下文成为可能。 该设计的目标是让用户专注于几何而不是渲染，并由于具有双重SVG支持而提供了交叉兼容性。 不建议使用仅SVG或仅画布的功能。

此外，Leaflet.VectorGrid中的画布继承自L.Canvas 。 需要注意的是香草L.Canvas 没有对沿线梯度的支持，所以你应该专注于使用插件，允许对折线梯度 ，然后才担心如何使矢量砖的工作。

这将涉及了解两个插件如何猴子修补Leaflet类，以什么顺序以及如何处理类继承。

一旦你明白，你将不必担心实例L.Hotline从内小号L.GeoJSON被切碎的瓷砖中实例秒。

TL; DR：阅读并了解Leaflet.VectorGrid和Leaflet.Hotline的代码。