如何获得画布从tileLayer传单1.0

How to get canvas from tileLayer Leaflet 1.0

本文关键字:传单 tileLayer 何获得      更新时间:2023-09-26

我使用的是传单。VectorGrid插件绘制通过geojson-vt切片的瓷砖在小册子1.0。

我想添加一个渐变的路径,而绘制。我在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,
                }
            }
        }
    });

我是Leaflet.VectorGrid的创建者。

我的问题是:如何获得对画布的引用,或其上下文(ctx)来绘制它?

答案是:你。传单代码的结构方式抽象了画布上下文。这种设计的目标是让用户专注于几何图形而不是呈现,并通过双重SVG支持提供交叉兼容性。不建议使用仅支持svg或画布的功能。

此外,帆布在传单。VectorGrid继承自L.Canvas。请注意,香草L.Canvas有沿线渐变的支持,所以你应该专注于使用一个插件,允许在折线上的渐变,然后才担心如何使其工作与矢量瓷砖。

这将涉及到理解这两个插件如何猴式修补传单类,以什么顺序,以及如何处理类继承。

一旦您理解了这一点,您将不得不担心如何从在切片块中实例化的L.GeoJSON中实例化L.Hotline s。

TL;DR:阅读并理解传单的代码。矢量网格和传单热线