问题描述:

I'm using the Leaflet.VectorGrid plugin to draw tiles sliced via geojson-vt in Leaflet 1.0.

I want to add a gradient to paths while drawing. I found code on stackoverflow for adding gradient along a path but it needs a canvas.

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

Here is my code to add a 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,

}

}

}

});

网友答案:

I'm the creator of Leaflet.VectorGrid.

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

The answer is: you don't. The Leaflet code is structured in a way that abstracts the canvas context away. The goal of this design is to let the user focus on the geometries and not on the rendering, and provide cross-compatibility thanks to dual SVG support. SVG-only or canvas-only features are discouraged.

Furthermore, canvases in Leaflet.VectorGrid inherit from L.Canvas. Note that vanilla L.Canvas does not have support for gradients along lines, so you should focus on using a plugin that allows for gradients on polylines, and only then worry about how to make that work with vector tiles.

That will involve understanding how both plugins monkey-patch the Leaflet classes, in which order, and how the class inheritances are handled.

And once you have understand that, you will have to worry about instantiating L.Hotlines from within the L.GeoJSONs that are instantiated within the sliced tiles.

TL;DR: Read and understand the code for Leaflet.VectorGrid and Leaflet.Hotline.

相关阅读:
Top