如何從tileLayer小冊子獲得畫布1.0

我使用Leaflet.VectorGrid plugin來繪製在Leaflet 1.0中通過geojson-vt切片的瓷磚。如何從tileLayer小冊子獲得畫布1.0

我想在繪製時向路徑添加漸變。我在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, 
       } 
      } 
     } 

    });

來源

2016-08-19 Maciej Wójcik

我Leaflet.VectorGrid的創造者。

我的問題是：如何獲得對畫布或其上下文（ctx）的引用來繪製它？

答案是：你的不是。 Leaflet代碼的構造方式是將畫布上下文抽象出來。這種設計的目標是讓用戶專注於幾何形狀而不是渲染，並且通過雙SVG支持提供交叉兼容性。不鼓勵SVG專用或僅限畫布功能。

此外，Leaflet.VectorGrid中的畫布繼承自L.Canvas。請注意，香草L.Canvas確實不是支持沿着線條漸變，所以你應該專注於using a plugin that allows for gradients on polylines，然後才擔心如何使用矢量圖塊進行工作。

這將涉及到如何插件猴子補丁傳單類，順序，以及如何處理類繼承。

一旦你明白了這一點，你將不得不擔心在切片瓦片中實例化的L.GeoJSON s中實例化L.Hotline。

TL; DR：閱讀並理解Leaflet.VectorGrid和Leaflet.Hotline的代碼。

來源

2016-08-19 09:10:14 IvanSanchez

感謝您的回答。它給了我一個思考我的問題的新方法。 –

我在提出申請時接受了您的建議。我使用了你的Leaflet.VectorGrid和一些來自Hotline.js的代碼。但現在我有另一個問題。我想重繪我的VectorGrid圖層。一開始我試圖在VectorGrid上使用簡單的redraw（）函數，但問題是我的瓷磚正在全部移除，然後全部繪製。這兩個函數之間有一個巨大的延遲，所以我有一個「空白」地圖2秒。我想消除這個錯誤。例如，當我縮放VectorGrid重繪沒有任何「空」的時刻。你能幫助我嗎？ –

現在我添加到VectorGrid.js _update方法中，並刪除此片段，其中將tile.current設置爲true或將其推入隊列以進行繪製。但我不知道這是做這件事的好方法 –

如何從tileLayer小冊子獲得畫布1.0

回答

相關問題