如何從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的代碼。