首页 > 其他分享 >vue3 + leaflet@1.94---带箭头的轨迹线

vue3 + leaflet@1.94---带箭头的轨迹线

时间:2025-01-22 20:58:44浏览次数:3  
标签:leaflet drawnItems weight 符号 color --- 箭头 120.35 vue3

在这里插入图片描述

import 'leaflet-polylinedecorator' // 箭头线(引入第三方插件)

onMounted(() => {
  window.customMap = mapInit.initMap({
    target: 'map-container',
    coordinate: [36.09, 120.35]
  })
  const drawnItems = new L.FeatureGroup()
  window.customMap.addLayer(drawnItems)
  // 绘制箭头
  const arrow = L.polyline(
    [
      [36.09, 120.35],
      [36.1, 120.38]
    ],
    {
      // 颜色
      color: 'rgba(0,156,106,1)',
      weight: 10
    }
  ).addTo(drawnItems)
  L.polylineDecorator(arrow, {
    patterns: [
      {
        // 模式符号的偏移位置
        offset: 10,
        // 模式符号的重复间隔
        repeat: 30,
        // 符号实例
        symbol: L.Symbol.arrowHead({
          // 符号大小
          pixelSize: 7,
          polygon: false,
          // 符号样式
          pathOptions: {
            // 是否显示边线
            stroke: true,
            weight: 2,
            color: '#fff'
          }
        })
      }
    ]
  }).addTo(drawnItems)
})

标签:leaflet,drawnItems,weight,符号,color,---,箭头,120.35,vue3
From: https://blog.csdn.net/QDxin_xyz/article/details/145310468

相关文章

  • Spring-AOP(面向切面编程)
    Spring-AOP(面向切面编程)面向切面编程(AspectOrientedProgramming-AOP)是面向对象编程(ObjectOrientedProgramming-OOP)的一种补充,二者是互补的编程范式。在OOP中,关键单元是类,而在AOP中关键单元则是横切关注点。面向对象编程关注于将现实世界中的实体抽象为对象,并通过对象......
  • 理解智能合约中的 SPDX-License-Identifier 注释与常用开源协议
    简介在开发智能合约时,我们常常会看到//SPDX-License-Identifier:MIT这样的注释,它看似简单,却承载了重要的信息。今天,我们将深入探讨这一注释的作用,以及智能合约常用的开源许可证。1.什么是//SPDX-License-Identifier:MIT注释?//SPDX-License-Identifier:MIT是一种标准的......
  • percona-toolkit系列工具(三)之pt-osc使用介绍
    一、pt-osc介绍mysql大表DDL一直是数据库运维当中的痛点,在实际运维过程中,我们一般有三种选择:1、原生onlineddl2、pt-online-schema-change工具3、ghost工具本文我们主要介绍pt-online-schema-change工具的使用pt-online-schema-change的工作原理是创建要更改的表的空副本......
  • Java初学者笔记-11、反射注解动态代理
    Junit单元测试针对最小的功能单元:方法,编写测试代码对其进行正确性测试。Junit单元测试框架:可以用来对方法进行测试,它是第三方公司开源出来的(很多开发工具已经集成了Junit框架,比如IDEA)。可以灵活的编写测试代码,可以针对某个方法执行测试,也支持一键完成对全部方法的自动化测试,且各......
  • DL00461-深度学习算法变压器红外测温过热缺陷检测
    完整gou买链接:https://item.taobao.com/item.htm?ft=t&id=881079880820本系统以Dji指定型号无人机拍摄的红外图像作为原始输入,基于YOLOv9算法训练红外套管目标检测与分割模型。结合Dji测温SDK,系统实时获取目标区域的最大温度值,从而实现红外套管与接线端区域的最大温度测定。该......
  • 关于期望线性性与min-max容斥
    #关于期望线性性与min-max容斥#——gym102978HHarshComments题解##题目:有$n$个$A$物品,价值为$a_i$,$m$个$B$物品,价值为$b_i$。每次按价值加权等概率删掉一个物品($val$/剩余$sum$),求删完$A$物品的期望步数,对$99824353取模$。$n,m,a_i\le100$。##题解:......
  • Linux基础05-指令篇之权限管理【入门级】
    Linux基础主要内容权限管理通配符权限管理指令修改文件/目录的拥有者或者组执行权限:root语法:chown[选项]...[所有者][:[组名]]文件或者目录路径...选项:-c:显示更改部分的信息-f:忽略错误信息-h:修复符号链接==-R:==处理指定目录以及其目录中的所有文件-v:显......
  • Linux基础07-指令篇之vim编辑器【入门级】
    Linux基础Vim编辑器Vim定义本质上我们用Linux自带的编辑器叫做Vi编辑器(类似于记事本,一般用来做文件的编辑),名字取自Visual,它是一个全屏幕文本编辑器(程序)。在Linux系统中Vi是最常用的编辑程序,它的文本编辑功能十分强大,但是使用起来比较复杂。Vim是Vi的增强版,所以Vi的功能Vi......
  • Linux基础06-指令篇之打包压缩解压缩【入门级】
    Linux基础内容提要压缩、打包、解压缩权限说明权限的类型权限的数值普通文件目录/文件夹r:可读4cat,less,more,head,tail等lsw:可写2>(覆盖写入),>>(追加写入),touch,rmmkdir,rmdir,mv(重命名)x:可执行1./文件名(可执行文件)cd,cp,mv(移动)-:无权限0无操作无操作压缩与解压缩压......
  • uni-app+egg.js实战直播app全栈开发
    uni-app实战直播app全栈开发1.课程介绍(买前必看).mp42h-9-4h18-uni-app+egg.js实战直播app全栈开发·node.js直播服务器搭建socket.io实时送礼物、实时弹幕功能·全栈开发兼容Android、ioS、小程序等9.登录注册页开发1.项目介绍10.个人中心页开发2.环境搭建和项目创建11.eg......