基于leaflet-polygon.fillPattern的面状对象图片填充实现

最新推荐文章于 2025-03-04 18:31:00 发布

夜郎king

最新推荐文章于 2025-03-04 18:31:00 发布

阅读量7.5k

点赞数 39

分类专栏： leaflet 文章标签： Leaflet图片渲染 Polygon图片渲染 Leaflet svg图片渲染

本文链接：https://blog.csdn.net/yelangkingwuzuhu/article/details/143126236

版权

leaflet 专栏收录该内容

93 篇文章

订阅专栏

二、leaflet-polygon.fillPattern.js简介

1、关于leaflet-polygon.fillPattern.js

前言

在很多WebGIS可视化中，面即Polygon对象是非常常见的一种对象。也非常常见，而常见于Polygon对象的样式控制来说，比如在地理围栏中，我们使用Polygon来标识边界，当有外部的物体进入标识的边界时就会有提醒。而在Leaflet官方提供的面数据的样式控制里面，您可以看到，它本身没有对面状数据进行样式填充的处理。如果您刚好碰到这个需求，又想在进行面数据的展示时，想填充图片到面数据中，又应该怎么实现呢。

本文讲解一种基于leaflet-polygon.fillPattern的扩展实现，基于leaflet-polygon.fillPattern来实现指定图片对面对象的填充。文章首先介绍leaflet中polygon对象的官网属性，其次介绍leaflet-polygon.fillPattern这个扩展包的扩展属性和方法，最后详细说明如何基于leaflet-polygon.fillPattern进行图片的填充实战。通过本文您不仅对polygon的样式填充更加熟悉，同时对leaflet-polygon.fillPattern这个组件怎么使用更加熟悉。如果您感兴趣，还请批评指教。

一、官网的Polygon属性

在进行扩展的组件介绍之前，我们先来看一下在Leaflet当中，对Polygon对象的属性如何进行设置，首先来看一下Polygon的类继承关系，了解继承关系对于掌握其属性的设置有非常的帮助。

通过上图中的继承体系可以看到，Polygon对象是扩展了Polyline，而Polyline又扩展自Path，而Path扩展自Layer对象。因此我们首先来看一下在Polygon当中，分别从不同的父类继承了哪些属性。在这么多的属性当中会不会隐藏着哪个参数是打开图片填充的钥匙呢？

1、从Polyline继承的属性

本身Polygon对象没有定义属性，因此来看一下其从直接父类Polyline继承的属性有哪些？通过在官网中查找可以看到其属性如下：

选项	类型	默认值	说明
`smoothFactor`	`Number`	`1.0`	在每个缩放级别简化多段线的程度。更多意味着更好的性能和更平滑的外观，而更少意味着更精确的表现。
`noClip`	`Boolean`	`false`	禁用折线剪裁。

2、从Path继承的属性

接着介绍一下从Path继承来的属性，如下表所示：

选项	类型	默认值	说明
`stroke`	`Boolean`	`true`	是否沿路径绘制边框。把它设置为`false` ，可以禁用多边形或圆形的边框。
`color`	`String`	`'#3388ff'`	Stroke（描边）颜色
`weight`	`Number`	`3`	Stroke（描边）宽度，单位：像素
`opacity`	`Number`	`1.0`	Stroke（描边）的不透明度
`lineCap`	`String`	`'round'`	定义描边结束时使用的形状的字符串。
`lineJoin`	`String`	`'round'`	定义在描边转角处使用的形状的字符串。
`dashArray`	`String`	`null`	一个定义描边的点画线的图案范式的字符串。在一些旧的浏览器中，对 Canvas-powered 图层不起作用。
`dashOffset`	`String`	`null`	一个字符串，它定义了进入 dash 范式的距离，以 dash 开始。在一些旧的浏览器中，对 Canvas-powered 图层不起作用。
`fill`	`Boolean`	`depends`	是否对路径进行颜色填充。设置为 `false` 可以禁止对多边形或圆形的填充。
`fillColor`	`String`	`*`	填充颜色。默认为 color 选项的值。
`fillOpacity`	`Number`	`0.2`	填充的不透明度。
`fillRule`	`String`	`'evenodd'`	一个字符串，定义形状的内部区域是如何被确定的。
`bubblingMouseEvents`	`Boolean`	`true`	当为 `true`时，这个路径上的鼠标事件将在地图上触发相同的事件 (除非使用 L.DomEvent.stopPropagation )。
`renderer`	`Renderer`		在这个路径上使用这个特定的 Renderer（渲染器）实例。优先于地图的 default renderer（默认渲染器）。
`className`	`String`	`null`	在一个元素上设置的自定义类名。仅适用于 SVG 渲染器。

3、继承自layer的属性

在最上层来看一下，继承自layer的属性，这里的layer。包括 Interactive layer和layer对象。这里将这两个layer对应的属性进行合并说明。

选项	类型	默认值	说明
`pane`	`String`	`'overlayPane'`	默认情况下，该图层将被添加到地图的 overlay pane（覆盖窗格）中。覆盖该选项将导致该图层被默认放置在另一个窗格中。
`attribution`	`String`	`null`	归属控制中要显示的字符串，例如 "© OpenStreetMap 贡献者"。它描述了图层数据，通常是对版权所有者和瓦片提供者的法律义务。
interactive	boolean	true	如果是 `false`, 该图层将不会发出鼠标事件，而是作为底层地图的一部分。

通过以上的属性表格可以看到，我们可以对Polygon对象进行颜色等样式进行控制，但是唯独没有找到有图片的填充。由此我们开始博文的第二部分，基于Polygon对象实现图片样式的填充。

二、leaflet-polygon.fillPattern.js简介

正式由于Leaflet原生的解决方案中不支持图片的填充渲染，因此需要我们自己来进行样式的扩展。在社区中可以找到这么一个扩展组件。已经帮我们实现了以上的功能，它就是leaflet-polygon.fillPattern.js。大家可以在github上找到它的源码。

1、关于leaflet-polygon.fillPattern.js

leaflet-polygon.fillPattern.js的源代码比较简单，没有复杂的架构，也没有复杂的逻辑。只有一个源代码程序。所以大家可以直接到github上下载其源代码来进行研究。leaflet-polygon-fillPattern传送门。

可以看到，这是一个可以使用图片进行填充面对象的polygon扩展包。在其中实现了图片的设置。为此我们将源代码clone下来，看一下它究竟是如何实现这些功能的。

2、关键方法解析

打开下载下来的源代码，可以看到整个源码有5KB。代码的总行数也不多，只有109行。这里先将核心代码打开，如下所示：

主要的方法有两个，一个是_updateStyle(layer),另一个是__fillPattern（layer）。在第41行的代码中可以看到:

if (typeof(options.fill) == "string" &&
     options.fill.match(/^url\(/)) {
     // here what we add
     this.__fillPattern(layer);
}

即在传入的属性中，包含了fill并且fille属性使用了url的前缀时，即使用__fillPattern的方式进行填充。其核心的原理是传入图片，然后在创建Polygon对象时，动态创建svg对象，然后将图片作为图源渲染到svg中，以此来实现我们的图片覆盖。

三、如何与Leaflet集成与成果展示

在上一节中，详细叙述了图片渲染填充组件的相关API和渲染原理。本节将重点讲述如何在Leaflet进行图片的引入继承。最后展示渲染的成果。

1、创建面对象及设置样式

对于如何在Leaflet中创建Polygon对象，其实比较简单，这里不再进行赘述。提供核心的方法和代码供大家参考，首先是样式的定义：

var style = {"color":"yellow",fill:'url(/2d/images/image.gif)',"fillOpacity":"0.15"};

请大家注意，在这个样式的设置过程中，fill这个属性需要且必须要以url开头，否则无法完成图片的引入。

其次根据面的坐标信息来进行对象的创建，并且让上面的style样式进行样式赋值。代码如下所示：

L.polygon([
	[25.2572222,120.4888889],
	[24.8416667,120.0958333],
	[25.0755556,119.8561111],
	[25.47,120.2416667]
],style).addTo(map).bindPopup("区域一.");

2、成果展示

创建好面对象，并设置style样式后，我们来看一下实际的页面效果。成果如下所示：

上图是使用了图片来进行渲染之后的效果，可以看到在每个区域中都使用了条形的图形填充。我们可以把区域进行放大，可以看到在标记的范围内，依然进行了扩展。如下图所示：

打开网络跟踪器，可以看到在资源请求时请求了图片资源。

为了对比图片渲染前后的效果差别，我们对样式进行调整，代码如下：

var style = {"color":"yellow",fillColor:'red',"fillOpacity":"0.15"};

此时的效果如下图所示：

放大同一个位置的区域信息，可以看到原来的图片填充，现在已经被红色进行覆盖了。

这样对比的效果就比较明显，也可以看到使用图片来渲染Polygon对象的功能已经实现。

3、调用过程分析

对于图片的渲染过程比较简单，为了让大家更加熟悉整个渲染过程，这里对程序调用过程进行一个简单的说明。来看样式的设置，在创建Polygon对象之后，在设置Style时，调用_updateStyle方法，如下图所示，

在上面的断点跟踪器中可以看到，通过layer对象的option传入了color和fill等属性值。这里就是需要注意的点，在传入图片时，一定要注意使用url来指定图源的地址。如果不想要使用图片来填充，那就不要使用url这个标记。

在需要进行图片图片的地方调用创建svg的方法来渲染图片，如下所示：

以此循环，在每个Polygon对象生成并设置样式时调用上述的方法进行图像的渲染。

四、总结

以上就是本文的主要内容，本文讲解一种基于leaflet-polygon.fillPattern的扩展实现，基于leaflet-polygon.fillPattern来实现指定图片对面对象的填充。文章首先介绍leaflet中polygon对象的官网属性，其次介绍leaflet-polygon.fillPattern这个扩展包的扩展属性和方法，最后详细说明如何基于leaflet-polygon.fillPattern进行图片的填充实战。通过本文您不仅对polygon的样式填充更加熟悉，同时对leaflet-polygon.fillPattern这个组件怎么使用更加熟悉。行文仓促，定有许多不足之处，如有不足，还请各位专家博主在评论区留下真知灼见，不才不胜感激。