Question

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

我想在绘图时为路径添加渐变。我在stackoverflow上找到了code，用于沿路径添加渐变，但它需要画布。

我的问题是：如何获取画布或其上下文（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。请注意，vanilla L.Canvas 不支持沿线渐变，因此您应该专注于using a plugin that allows for gradients on polylines，然后才会担心如何使用矢量切片。< / p>

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

一旦你理解了这一点，就必须担心在切片的瓷砖中实例化的L.Hotline中实例化L.GeoJSON。

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

如何从tileLayer Leaflet 1.0获取画布

1 个答案: