分类

单个简单多边形
单个多边形，且有孔
多个多边形，可有孔或无孔

官网说明如下：

示例

1. 单个简单多边形

// 坐标点多边形（二维数组），注意 第一个 与 最后一个点无需一样，会自动闭合
var latlngs = [[31.537628173828125,121.190185546875],[30.878448486328125,121.19430541992188],[30.839996337890625,121.92901611328125],[31.348114013671875,121.8878173828125]
];
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
// 跳到多边形的范围
map.fitBounds(polygon.getBounds());

2. 单个多边形，且有孔

// 坐标点多边形（三维数组），第一个数组是多边形外围，之后是全部是孔
var latlngs = [[// 多边形外围[31.537628173828125,121.190185546875],[30.878448486328125,121.19430541992188],[30.839996337890625,121.92901611328125],[31.348114013671875,121.8878173828125]],[// 第 1 个孔[31.4566,121.2671],[31.3481,121.2382],[31.3934,121.3659]],[// 第 2 个孔[31.1174,121.5637],[30.9828,121.5348],[30.9786,121.6708],[31.1036,121.7738]]
];
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
// 跳到多边形的范围
map.fitBounds(polygon.getBounds());

3. 多个多边形，可有孔或无孔

// 坐标点多边形（四维数组）
var latlngs = [[// 第 1 个多边形[// 多边形外围[31.537628173828125,121.190185546875],[30.878448486328125,121.19430541992188],[30.839996337890625,121.92901611328125],[31.348114013671875,121.8878173828125]],[// 第 1 个孔[31.4566,121.2671],[31.3481,121.2382],[31.3934,121.3659]],[// 第 2 个孔[31.1174,121.5637],[30.9828,121.5348],[30.9786,121.6708],[31.1036,121.7738]]],[// 第 2 个多边形[// 仅有一个无孔的多边形[30.8084,120.5419],[30.4183,120.1821],[30.3287,121.1654],]],[// 第 3 个多边形[// 多边形外围[31.4841,119.8965],[31.5032,120.6326],[31.1215,120.5776],[30.9677,119.9981]],[// 第 1 个孔[31.2781,120.1107],[31.1161,120.0971],[31.1489,120.3717]]]
];
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
// 跳到多边形的范围
map.fitBounds(polygon.getBounds());

《Leaflet 进阶知识点》- L.polygon 多边形绘制详解相关推荐

HTML5 canvas绘制雪花飘落动画（需求分析、知识点、程序编写分布详解）
HTML5 canvas绘制雪花飘落动画(需求分析.知识点.程序编写分布详解) 原文:HTML5 canvas绘制雪花飘落动画(需求分析.知识点.程序编写分布详解) 看到网上很多展示html5雪花飞动 ...
扫描线填充多边形算法详解与代码
扫描线填充多边形算法详解与代码首先给出已知信息:多边形结构体里面包含三个信息:顶点个数,顶点和颜色 class MyPolygon {public:int m_VerticeNumber;CPoin ...
Apollo进阶课程㉓丨Apollo规划技术详解——Motion Planning with Environment
原文链接:进阶课程㉓丨Apollo规划技术详解--Motion Planning with Environment 当行为层决定要在当前环境中执行的驾驶行为时,其可以是例如巡航-车道,改变车道或右转, ...
View绘制详解(三)，扒一扒View的测量过程
所有东西都是难者不会,会者不难,Android开发中有很多小伙伴觉得自定义View和事件分发或者Binder机制等是难点,其实不然,如果静下心来花点时间把这几个技术点都研究一遍,你会发现其实这些东西都 ...
python绘制单线图_CAD制图管道单线图绘制详解.ppt
您所在位置:网站首页 > 海量文档 &nbsp>&nbsp计算机&nbsp>&nbsp计算机辅助设计 CAD制图管道单线图绘制详解.ppt89页本文 ...
Android进阶笔记：Messenger源码详解
Messenger可以理解为一个是用于发送消息的一个类用法也很多,这里主要分析一下再跨进程的情况下Messenger的实现流程与源码分析.相信结合前面两篇关于aidl解析文章能够更好的对aidl有一个 ...
PowerShell攻防进阶篇：nishang工具用法详解
PowerShell攻防进阶篇:nishang工具用法详解导语:nishang,PowerShell下并肩Empire,Powersploit的神器. 开始之前,先放出个下载地址! 下载地址:htt ...
unix/linux命令“ls -l”选项输出结果详解
from: http://hi.baidu.com/hoxily/item/12e2a02d03f77e0942634a8e unix/linux命令"ls -l"选项输出结果详解 ...
Apollo进阶课程㉖丨Apollo规划技术详解——Understand More on the MP Difficulty
原文链接:进阶课程㉖丨Apollo规划技术详解--Understand More on the MP Difficulty EM是一个在已知部分相关变量的情况下,估计未知变量的迭代技术,EM的算法流程 ...

《Leaflet 进阶知识点》- L.polygon 多边形绘制详解

分类

示例

1. 单个简单多边形

2. 单个多边形，且有孔

3. 多个多边形，可有孔或无孔

《Leaflet 进阶知识点》- L.polygon 多边形绘制详解相关推荐

最新文章

热门文章