《Leaflet 基础知识点》- 绘制圆、线、矩形和多边形

最新推荐文章于 2024-07-05 11:11:56 发布

AvatarGiser

最新推荐文章于 2024-07-05 11:11:56 发布

阅读量4.4k

点赞数 1

分类专栏： Leaflet 基础知识点文章标签： leaflet 绘制

本文链接：https://blog.csdn.net/sinat_31213021/article/details/118728848

版权

Leaflet 基础知识点专栏收录该内容

21 篇文章 37 订阅

订阅专栏

该博客介绍了如何使用Leaflet库在地图上绘制矢量图形，包括圆、线、矩形和多边形。示例代码展示了如何创建这些图形并调整其样式，同时提供了适配图形范围的地图视图。文章还提到了复杂多边形的绘制，并给出了相关资源链接以获取更多信息。

摘要由CSDN通过智能技术生成

前言

注意绘制的都是矢量图层，所以在 Vector Layers 分类下：

绘制

圆

官网API

示例

// 圆：半径 radius 的单位为米
var circle = L.circle([31.537628173828125,121.190185546875], {radius: 2000}).addTo(map);
// 跳到圆的范围
map.fitBounds(circle.getBounds());

效果

线

官网API

示例

// 线：坐标点
var latlngs = [
    [31.537628173828125,121.190185546875],
    [30.878448486328125,121.19430541992188],
    [30.839996337890625,121.92901611328125]
];
// 绘制且添加
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
// 跳到线的范围
map.fitBounds(polyline.getBounds());

效果

矩形

官网API

示例

// 矩形：坐标点 [[ymin, xmin], [ymax, xmax]]
var bounds = [[30.894075744803956, 121.69670937773769],[31.436795822500894, 122.45965784374343]];
// 绘制且添加
var rectangle = L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);
// 跳到矩形的范围
map.fitBounds(rectangle.getBounds());

效果

多边形

官网API，这是一个简单的多边形，复杂的可移步《Leaflet 进阶知识点》- L.polygon 多边形绘制详解

示例

// 多边形：坐标点，注意 第一个 与 最后一个点是无需一样，会自动闭合
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());