我正在使用 Leaflet.VectorGrid plugin在 Leaflet 1.0 中绘制通过 geojson-vt 切片的切片。
我想在绘图时为路径添加渐变。我找到了 code在 stackoverflow 上用于沿路径添加渐变,但它需要 Canvas 。
我的问题是:如何获取对 Canvas 的引用,或其上下文 (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 的创建者。
My question is: how to get a reference to the canvas, or its context (ctx) to draw on it?
答案是:您不会。 Leaflet 代码以一种抽象 Canvas 上下文的方式构建。这种设计的目标是让用户专注于几何图形而不是渲染,并通过双 SVG 支持提供交叉兼容性。不鼓励仅使用 SVG 或仅使用 Canvas 的功能。
此外,Leaflet.VectorGrid 中的 Canvas 继承自L.Canvas
。请注意,vanilla L.Canvas
不 支持沿线渐变,因此您应该关注 using a plugin that allows for gradients on polylines ,然后才担心如何使用矢量图 block 使其工作。
这将涉及了解两个插件如何对 Leaflet 类进行猴子修补、以何种顺序以及如何处理类继承。
一旦您理解了这一点,您将不得不担心从切片图 block 中实例化的 L.GeoJSON
中实例化 L.Hotline
。
TL;DR:阅读并理解 Leaflet.VectorGrid 和 Leaflet.Hotline 的代码。
关于javascript - 如何从 tileLayer Leaflet 1.0 获取 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39034728/