您现在的位置是:首页 > 正文

Vue+Leaflet:让marker(小车)在地图上动起来

2024-04-01 01:08:18阅读 1

一,没有航向角,利用leaflet的原生api

    showTraceClick() {
        //删除marker
      if (this.Marker) {
        this.map.removeLayer(this.Marker);
      }
      var carIcon = L.icon({
        iconUrl: car,
        iconSize: [15, 24],
        iconAnchor: [12, 20],
        popupAnchor: [0, 0],
      });

        //初始化marker
      this.Marker = L.marker(this.latlngs[0], {
        icon: carIcon,
      }).addTo(this.map);

      var i = 0;
        //每隔一段时间重新设置marker的经纬度
      this.timer = setInterval(() => {
        i += 1;
        this.Marker.setLatLng(this.latlngs[i]);
        if (i == this.latlngs.length - 1) {
          clearInterval(this.timer);
        }
      }, this.time);
    },

二,带航向角,利用leaflet.animatedMarker插件中的animatedMarker.pushPosition()

    showTraceClick() {
      if (this.animatedMarker) {
        this.map.removeLayer(this.animatedMarker);
      }
      var carIcon = L.icon({
        iconUrl: car,
        iconSize: [20, 15],
        iconAnchor: [19, 13],
      });
      this.animatedMarker = L.animatedMarker(
        { lat: this.latlngs[0][0], lng: this.latlngs[0][1] },
        {
          icon: carIcon,
        }
      ).addTo(this.map);
      var i = 0;
      this.timer = setInterval(() => {
        i += 1;
        this.animatedMarker.pushPosition(
          { lat: this.latlngs[i][0], lng: this.latlngs[i][1] },
          null
        );

        this.animatedMarker
          .bindPopup(
            `<br>纬度:${this.latlngs[i][0].toFixed(3)},
            经度:${this.latlngs[i][1].toFixed(3)}</br><br>速                                
度:${this.speedList[i].toFixed(3)},里程:${this.mileageList[i].toFixed(3)}</br>`
          )
          .openPopup();
        if (i == this.latlngs.length - 1) {
          clearInterval(this.timer);
        }
      }, this.time);
    },

网站文章

  • windwos10上安装tomcat(详细步骤).............

    windwos10上安装tomcat(详细步骤).............

    一、下载tomcat用浏览器打开tomcat官网:http://tomcat.apache.org/在左侧的导航栏Download下方选择最新的Tomcat 9,点击页面下方的“ 64-bit Windows zip (pgp, md5, sha1)“进行下下载完成二、安装tomcat解压后即可使用三、配置环境变量配置jdk的环境变量(略) 在系统变量里新...

    2024-04-01 01:08:10
  • 检查http流量

    常用的主要工具: Wireshark 和 Charles Proxy 。主要作用。我们不需要修改代码对其进行调试操作。

    2024-04-01 01:07:45
  • python中的数据存储-json

    python中的数据存储-json

    很多程序都要求用户输入某种信息, 程序都把用户提供的信息存储在列表和字典等数据结构中, 用户关闭程序时,你几乎总是要保存他们的信息: 一种简单的方式是使用模块json来存储数据 (在python中使用json的时候,主要也就是使用json模块,json是以一种良好的格式来进行数据交互) 模块json让你能够将简单的python数据结构转存到文件中, 并在程序再次运行时加载该文件中的数据...

    2024-04-01 01:07:37
  • HttpServletResponse之getWriter()和getOutputStream()不能同时调用

    HttpServletResponse之getWriter()和getOutputStream()不能同时调用

    利用ServletResponse的OutputStream可以向客户端返回字节流、输出文件。本来想利用PrintWriter()向客户端输出提示信息,程序运行出错:java.lang.IllegalStateException: getOutputStream() has already been called for this response查看API:http://tomcat.a...

    2024-04-01 01:07:29
  • 新手必备 | 史上最全的PyTorch学习资源汇总

    新手必备 | 史上最全的PyTorch学习资源汇总

    目录: PyTorch学习教程、手册 PyTorch视频教程 PyTorch项目资源 -NLP&amp;PyTorch实战 -CV&amp;PyTorch实战 PyTorch论文推荐 Pytorch书籍推荐 一、PyTorch学习教程、手册 (1)PyTorch英文版官方手册:https://p...

    2024-04-01 01:07:03
  • 焊接计算机模拟定义,一种焊接过程气孔形成与演变的二维计算机模拟方法技术...

    本发明专利技术公开了一种焊接过程气孔形成与演变的二维计算机模拟方法,属于焊接过程数值模拟技术领域。本方法首先对实际条件进行简化及模型初始化,随后建立微观组织演变模型、气孔形核与演变模型,并将两种模型进...

    2024-04-01 01:06:50
  • 资料员计算机知识大全,最新资料员专业基础知识

    资料员专业基础知识(一)建筑识图一、单选1、常用的A2工程图纸的规格是(420×594)。2、1号图纸图符是(0)号图纸图幅的对裁。3、我国横式图纸会签栏通常处于(图框外左上角)。4、工程图中,若粗实...

    2024-04-01 01:06:43
  • crontab(二),Cron服务

    http://blog.163.com/hai_binbin@126/blog/static/1213886092009989240271/ crontab命令 2007-06-01 13:56:49| 分类: Linux|字号 订阅 crontab命令   crontab命令用于安装、删除或者列出用于驱动cron后台进程的

    2024-04-01 01:06:16
  • 类与对象编程

    类与对象编程

    在上面的示例中,我们定义了一个名为"Student"的子类,它继承了Person类的属性和方法,并新增了一个名为"major"的属性和一个名为"setMajor"的方法。在上述示例中,我们定义了一个名...

    2024-04-01 01:06:11
  • 如何获取HTML元素对应JavaScript对象

    <body> <div id="a" class="s"> <span id="d"></span> <b class="f"></b> </div> <i class="f"></i> <a name="g"></a> <a name="g"></a> <span id="h"></span&gt.

    2024-04-01 01:06:04