Leaflet中使用leaflet.polylineDecorator插件绘制箭头线及虚线矩形

最新推荐文章于 2024-02-19 13:45:02 发布
最新推荐文章于 2024-02-19 13:45:02 发布
阅读量8.1k 收藏 10
点赞数
分类专栏： GIS相关 文章标签： leaflet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/124033450
版权

场景

Leaflet快速入门与加载OSM显示地图：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 

在上面的基础上怎样绘制箭头、虚线矩形。

Leaflet.PolylineDecorator插件地址：

https://github.com/bbecquet/Leaflet.PolylineDecorator

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、下载插件并引入依赖

<script type="text/javascript" src="./js/leaflet.polylineDecorator.js"></script>

2、绘制箭头

        //绘制图层
        var drawnItems = new L.FeatureGroup();
                    //添加绘制图层
                    map.addLayer(drawnItems);

        //1.绘制线
        var arrow = L.polyline([[36.09, 120.35], [36.10, 120.38]], {
            //颜色
            color: 'red'
        }).addTo(drawnItems);
        //添加箭头
        var arrowHead = L.polylineDecorator(arrow, {
            //添加模式
            patterns: [{
                //模式符号的偏移位置
                offset: '100%',
                //模式符号的重复间隔
                repeat: 0,
                //符号实例
                symbol: L.Symbol.arrowHead({
                    //符号大小
                    pixelSize: 15,
                    //符号样式
                    pathOptions: {
                        //是否显示边线
                        stroke: true
                    }
                })
            }]
        }).addTo(drawnItems);

3、绘制虚线矩形

        //2.绘制虚线矩形
        var pathPattern = L.polylineDecorator([[36.11, 120.30], [36.11, 120.33], [36.14, 120.33], [36.14, 120.30], [36.11, 120.30]], {
            //添加模式
            patterns: [{
                //模式符号的偏移位置
                offset: 12,
                //模式符号的重复间隔
                repeat: 25,
                //符号实例
                symbol: L.Symbol.dash({
                    //符号大小
                    pixelSize: 10,
                    //符号样式
                    pathOptions: {
                        //颜色
                        color: '#f00',
                        //线宽
                        weight: 2
                    }
                })
            },
                {
                    //模式符号的偏移位置
                    offset: 0,
                    //模式符号的重复间隔
                    repeat: 25,
                    //符号实例
                    symbol: L.Symbol.dash({
                        //符号大小
                        pixelSize: 0
                    })
                }
            ]
        }).addTo(drawnItems);

4、绘制飞行航线图

        //3.绘制图案
        var pathPattern = L.polylineDecorator([[36.15, 120.38], [36.14, 120.39], [36.13, 120.42], [36.11, 120.44], [36.09, 120.49]], {
            //添加模式
            patterns: [
                {
                    //模式符号的偏移位置
                    offset: 0,
                    //模式符号的重复间隔
                    repeat: 10,
                    //符号实例
                    symbol: L.Symbol.dash({
                        //符号大小
                        pixelSize: 5,
                        //符号样式
                        pathOptions: {
                            //颜色
                            color: 'blue',
                            //线宽
                            weight: 1,
                            //透明度
                            opacity: 1
                        }
                    })
                },
                {
                    //模式符号的偏移位置
                    offset: '0%',
                    //模式符号的重复间隔
                    repeat: '20%',
                    //符号实例
                    symbol: L.Symbol.marker({
                        //是否允许旋转
                        rotate: true,
                        //标记显示样式
                        markerOptions: {
                            //图标
                            icon: L.icon({
                                //图标地址
                                iconUrl: './images/icon_plane.png',
                                //图标位置
                                iconAnchor: [16, 16]
                            })
                        }
                    })
                }
            ]
        }).addTo(drawnItems);

5、完整示例代码

​
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>leaflet绘制箭头和虚线矩形</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <style>
        html,
        body,
        #map {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script type="text/javascript" src="./js/leaflet.polylineDecorator.js"></script>
    <script type="text/javascript">
        var map = L.map('map').setView([36.09, 120.35], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: ''
        }).addTo(map);

        //绘制图层
        var drawnItems = new L.FeatureGroup();
                    //添加绘制图层
                    map.addLayer(drawnItems);

        //1.绘制线
        var arrow = L.polyline([[36.09, 120.35], [36.10, 120.38]], {
            //颜色
            color: 'red'
        }).addTo(drawnItems);
        //添加箭头
        var arrowHead = L.polylineDecorator(arrow, {
            //添加模式
            patterns: [{
                //模式符号的偏移位置
                offset: '100%',
                //模式符号的重复间隔
                repeat: 0,
                //符号实例
                symbol: L.Symbol.arrowHead({
                    //符号大小
                    pixelSize: 15,
                    //符号样式
                    pathOptions: {
                        //是否显示边线
                        stroke: true
                    }
                })
            }]
        }).addTo(drawnItems);

        //2.绘制虚线矩形
        var pathPattern = L.polylineDecorator([[36.11, 120.30], [36.11, 120.33], [36.14, 120.33], [36.14, 120.30], [36.11, 120.30]], {
            //添加模式
            patterns: [{
                //模式符号的偏移位置
                offset: 12,
                //模式符号的重复间隔
                repeat: 25,
                //符号实例
                symbol: L.Symbol.dash({
                    //符号大小
                    pixelSize: 10,
                    //符号样式
                    pathOptions: {
                        //颜色
                        color: '#f00',
                        //线宽
                        weight: 2
                    }
                })
            },
                {
                    //模式符号的偏移位置
                    offset: 0,
                    //模式符号的重复间隔
                    repeat: 25,
                    //符号实例
                    symbol: L.Symbol.dash({
                        //符号大小
                        pixelSize: 0
                    })
                }
            ]
        }).addTo(drawnItems);

        //3.绘制图案
        var pathPattern = L.polylineDecorator([[36.15, 120.38], [36.14, 120.39], [36.13, 120.42], [36.11, 120.44], [36.09, 120.49]], {
            //添加模式
            patterns: [
                {
                    //模式符号的偏移位置
                    offset: 0,
                    //模式符号的重复间隔
                    repeat: 10,
                    //符号实例
                    symbol: L.Symbol.dash({
                        //符号大小
                        pixelSize: 5,
                        //符号样式
                        pathOptions: {
                            //颜色
                            color: 'blue',
                            //线宽
                            weight: 1,
                            //透明度
                            opacity: 1
                        }
                    })
                },
                {
                    //模式符号的偏移位置
                    offset: '0%',
                    //模式符号的重复间隔
                    repeat: '20%',
                    //符号实例
                    symbol: L.Symbol.marker({
                        //是否允许旋转
                        rotate: true,
                        //标记显示样式
                        markerOptions: {
                            //图标
                            icon: L.icon({
                                //图标地址
                                iconUrl: './images/icon_plane.png',
                                //图标位置
                                iconAnchor: [16, 16]
                            })
                        }
                    })
                }
            ]
        }).addTo(drawnItems);
    </script>
</body>

</html>

​

霸道流氓气质
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Leaflet.curve:一个用于绘制贝塞尔曲线和其他复杂形状的Leaflet插件
05-06
单张曲线 一个用于绘制贝塞尔曲线和其他复杂形状的插件。 （） 用法 如果直接使用，请在Leaflet之后包含插件： [removed][removed] [removed][removed] （如果使用画布和动画进行渲染，则包含 。） 如果使用Node.js，请安装并导入： yarn add @elfalem/leaflet-curve import L from 'leaflet' import '@elfalem/leaflet-curve' 添加一条包含贝塞尔曲线和直线的路径： var path = L.curve(['M',[50.54136296522163,28.520507812500004], 'C',[52.214338608258224,28.564453125000004],
lealfet --带箭头的线
who_become_gods的博客
09-28 920
如果你本身地图就是用插件写的想要一个带箭头的路径 安装插件 vue2-leaflet-polylinedecorator import Vue2LeafletPolylineDecorator from "vue2-leaflet-polylinedecorator" components: { "v-polyline-decorator": Vue2LeafletPolylineDecorator } 组件使用 <v-polyline-decorator :paths="w
【vue+leaflet】vue项目中使用leaflet绘制室内平面图、leaflet.pm在平面图中绘制点、线、面图层(一)
$
02-19 2852
到这里就可以实现效果图所展示的功能了,下节详细说明各个模块及事件函数的功能.因为我是单个页面需要所有就局部引入了,也可以放全局里面引入。所有示例代码已上传,
Leaflet.Geodesic:使用传单绘制测地线的附加组件
05-02
小叶大地 用于绘制和圆。 测地线是地球表面上两个给定位置之间的最短路径。 它基于实现的实现最高的精度。 将插件添加到您的项目 Leaflet.Geodesic可通过CDN获得。 之后，将以下代码段添加到html文件中。 <!-- Make sure you put this AFTER leaflet.js --> < script src =" https://cdn.jsdelivr.net/npm/leaflet.geodesic " > </ script > Leaflet.Geodesic可从 ， jsDelivr和npmjs获得。 使用npm i leaflet.geodesic将其添加到您的nodejs-project中。 如果可能，将插件固定到特定版本，然后使用Subresource Integrity 。 检查发布页面以获取最新版本，链接和校验和。 可以通过n
60.（leaflet篇）leaflet虚线.zip
12-29
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/122217570
64.（leaflet篇）leaflet线段箭头.zip
01-10
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/122410758
前端项目-leaflet-polylinedecorator.zip
09-03
前端项目-leaflet-polylinedecorator,JS地图库小册子的插件，允许在多段线上定义图案（如虚线、箭头、图标等）。
leaflet 绘制带箭头的线条（路径）
zcylyzhi4的博客
03-30 6339
最近接到项目需求，需要在网页上实时展示APP用户巡检的轨迹，这个需求很简单，直接用leaflet画polyline就可以满足；很快便出了一版效果很项目经理，但是项目经理一看，说：这个和百度地址的路径展示差距太大，要求实现的效果和百度地图一样。OK，经过请教百度老师，发现leaflet的polylineDecorator可以满足此需求。经过实践，效果还不错，故分享出来，供参考和指导。 1、引入 leaflet.min.js 和 leaflet.polylineDecorator.js 访问polylineDe
leaflet 绘制带箭头的线（虚线，实线）
hhhhh_jy的博客
03-26 8805
先加载leaflet地图 引用leaflet 插件 leaflet-polylinedecorator polyline = L.polyline(tempLatLngArr, { color: '#368fe9', draggable: 'true', dashArray: '15' ...
leaflet-线的绘制与带箭头的线
s_9527_s的博客
03-15 5695
1.创建空的图层组 this.xiangroup = L.featureGroup([]) //创建图层 this.map.addLayer(this.xiangroup) 2.绘制,使用L.polyline（记住两点一线，如果只有一个点的经纬度，是没有线的） var latlngs = [ //线中点的经纬度点 [38, 0], [38, 180], [0, 0] ] this.polyline = L.polyline(latlngs, { color: 'r...
项目中关于leaflet遇到的问题及解决方案总结
Hi-Sun的博客
03-25 1730
1、如何去除container右下角的leaflet链接 在node_modules\leaflet\dist\leaflet-src.js中改变两个布朗值，更改为autoPan:false autoClose:true 2、如何更改线条的样式，包括加箭头 颜色等 使用leaflet-polylinedecorator，在GitHub上有该插件的详细描述，安装以后有一个example.j...
59.（leaflet篇）leaflet动态画线.zip
12-24
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/122121747
leaflet.polylineDecorator.js
03-15
leaflet.polylineDecorator.js
【vue+leaflet】vue使用leaflet.pm保存绘制后的图层的点位信息、图层回显、平面图切换、地图事件函数、图层事件
最新发布
02-22
【vue+leaflet】vue使用leaflet.pm保存绘制后的图层的点位信息、图层回显、平面图切换、地图事件函数、图层事件函数说明(二)cv可用 【vue+leaflet】vue使用leaflet.pm保存绘制后的图层的点位信息、图层回显、平面图切换、地图事件函数、图层事件函数说明(二)cv可用 【vue+leaflet】vue使用leaflet.pm保存绘制后的图层的点位信息、图层回显、平面图切换、地图事件函数、图层事件函数说明(二)cv可用 【vue+leaflet】vue使用leaflet.pm保存绘制后的图层的点位信息、图层回显、平面图切换、地图事件函数、图层事件函数说明(二)cv可用 【vue+leaflet】vue使用leaflet.pm保存绘制后的图层的点位信息、图层回显、平面图切换、地图事件函数、图层事件函数说明(二)cv可用 【vue+leaflet】vue使用leaflet.pm保存绘制后的图层的点位信息、图层回显、平面图切换、地图事件函数、图层事件函数说明(二)cv可用 【vue+leaflet】vue使用leaflet.pm保存绘制后的图层的点位信息、图层
Leaflet.LabelTextCollision:Leaflet.LabelTextCollision是一个LeafletJS插件，用于在矢量数据上显示标签，同时避免标签冲突
05-22
Leaflet.LabelTextCollision Leaflet.LabelTextCollision是一个插件，用于在矢量数据上显示标签，同时避免标签冲突。 支持Leaflet 1.0.0+分支。 为避免标签重叠，此插件隐藏了一些标签。 首先定义的标签将优先于最后定义的标签，因此请从最重要的标签到最不重要的标签进行排列。 L.LabelTextCollision实现了一个L.Renderer基于L.Canvas ，以不产生过量可能减慢渲染的浏览器的DOM元素。 演示 查看 用法示例 创建一个新的L.LabelTextCollision实例，指定碰撞标志选项。 使用地图的renderer选项强制使用该实例渲染矢量数据 var labelTextCollision = new L.LabelTextCollision({ collisionFlg : true }); v
QGIS中怎样实现数据坐标系转换
BADAO_LIUMANG_QIZHI的博客
04-12 8158
场景 QGIS怎样设置简体中文以及新建可编辑的多边形的图层： QGIS怎样设置简体中文以及新建可编辑的多边形的图层_霸道流氓气质的博客-CSDN博客 在上面的基础上怎样进行坐标系转换(投影转换)。 注： 博客：霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1 、左边菜单栏找到XYZ Tiles下的OpenStreetMap,双击进入编辑 2、右键属性可以查看图层属性，CRS
Leaflet快速入门与加载OSM显示地图
BADAO_LIUMANG_QIZHI的博客
01-03 7082
场景 Leaflet Leaflet 是一个为建设交互性好适用于移动设备地图，而开发的现代的、开源的 JavaScript 库。 代码仅有几十KB，但它具有开发在线地图的大部分功能。Leaflet设计坚持简便、高性能和可用性好的哲学思想， 在所有主要桌面和移动平台能高效运作，在现代浏览器上会利用HTML5和CSS3的优势，同时也支持旧的浏览器访问。 支持插件扩展，有一个友好、易于使用的API文档和一个简单的、可读的源代码。 Leaflet强大的开源库插件涉及到地图应用的各个方面包括地图服务，数据提供，数
Java+GeoTools(开源的Java GIS工具包)快速入门-实现读取shp文件并显示
BADAO_LIUMANG_QIZHI的博客
04-25 6945
GeoTools 是一个开源的 Java GIS 工具包，可利用它来开发符合标准的地理信息系统。GeoTools 提供了 OGC (Open Geospatial Consortium) 规范的一个实现来作为他们的开发。参考其quick start教程，实现集成到maven项目中并运行示例代码。
leaflet.draw中绘制完marker界面跳出弹框
05-30
要想在leaflet.draw中绘制完marker后弹出一个弹框，可以使用leaflet的popup方法，具体实现步骤如下： 1. 在绘制marker的时候，设置marker的popup属性为空，即: ``` var marker = L.marker(latlng, { draggable: true, popup: '' }).addTo(map); ``` 2. 给marker添加dragend事件，当marker位置改变时触发该事件，在事件处理函数中使用marker的bindPopup方法绑定一个弹框: ``` marker.on('dragend', function (e) { e.target.bindPopup('弹框内容').openPopup(); }); ``` 这样，当marker位置改变时，就会在地图上弹出一个带有自定义内容的弹框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霸道流氓气质

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值