[英]How to get canvas from tileLayer Leaflet 1.0
I'm using the Leaflet.VectorGrid plugin to draw tiles sliced via geojson-vt in Leaflet 1.0. 我正在使用Leaflet.VectorGrid插件绘制通过Leaflet 1.0中的geojson-vt切片的切片。
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.
我在stackoverflow上找到了用于沿路径添加渐变的代码 ,但它需要画布。
My question is: how to get a reference to the canvas, or its context ( ctx
) to draw on it? 我的问题是:如何获取对画布的引用,或如何在画布上绘制上下文(
ctx
)?
Here is my code to add a tileLayer: 这是我的代码来添加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. 我是Leaflet.VectorGrid的创建者。
My question is: how to get a reference to the canvas, or its context (ctx) to draw on it?
我的问题是:如何获得对画布的引用,或如何在画布上绘制上下文(ctx)?
The answer is: you don't . 答案是:您不会 。 The Leaflet code is structured in a way that abstracts the canvas context away.
Leaflet代码的结构使抽象画布上下文成为可能。 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支持而提供了交叉兼容性。 SVG-only or canvas-only features are discouraged.
不建议使用仅SVG或仅画布的功能。
Furthermore, canvases in Leaflet.VectorGrid inherit from L.Canvas
. 此外,Leaflet.VectorGrid中的画布继承自
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. 需要注意的是香草
L.Canvas
没有对沿线梯度的支持,所以你应该专注于使用插件,允许对折线梯度 ,然后才担心如何使矢量砖的工作。
That will involve understanding how both plugins monkey-patch the Leaflet classes, in which order, and how the class inheritances are handled. 这将涉及了解两个插件如何猴子修补Leaflet类,以什么顺序以及如何处理类继承。
And once you have understand that, you will have to worry about instantiating L.Hotline
s from within the L.GeoJSON
s that are instantiated within the sliced tiles. 一旦你明白,你将不必担心实例
L.Hotline
从内小号L.GeoJSON
被切碎的瓷砖中实例秒。
TL;DR: Read and understand the code for Leaflet.VectorGrid and Leaflet.Hotline. TL; DR:阅读并了解Leaflet.VectorGrid和Leaflet.Hotline的代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.