如何从 tileLayer Leaflet 1.0 获取 canvas

Question

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

我想在绘图时为路径添加渐变。我在 Whosebug 上发现 code 用于沿路径添加渐变，但它需要 canvas。

我的问题是：如何获取对 canvas 或其上下文 (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 的创造者。

My question is: how to get a reference to the canvas, or its context (ctx) to draw on it?

答案是：你不会。 Leaflet 代码的结构将 canvas 上下文抽象化。这种设计的目标是让用户专注于几何图形而不是渲染，并通过双 SVG 支持提供交叉兼容性。不鼓励仅使用 SVG 或 canvas- 功能。

此外，canvas在Leaflet.VectorGrid中继承自L.Canvas。请注意，vanilla L.Canvas not 支持沿线的渐变，因此您应该关注 using a plugin that allows for gradients on polylines，然后才担心如何使用矢量进行渐变瓷砖。

这将涉及了解两个插件如何对 Leaflet classes 进行 monkey-patch，顺序是什么，以及如何处理 class 继承。

一旦你理解了这一点，你将不得不担心从 L.GeoJSONs 中实例化 L.Hotlines，这些 L.GeoJSONs 在切片图块中实例化。

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

如何从 tileLayer Leaflet 1.0 获取 canvas

How to get canvas from tileLayer Leaflet 1.0

html

javascript

canvas

leaflet