vue+mapboxgl 运行轨迹循环

最新推荐文章于 2024-04-28 09:16:46 发布
最新推荐文章于 2024-04-28 09:16:46 发布
阅读量1.8k 收藏 10
点赞数 3
分类专栏： mapbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xm_w_xm/article/details/111039520
版权

   最终的样子

+

mapboxgl 官网的例子 ：https://docs.mapbox.com/mapbox-gl-js/example/animate-a-line/ 

turf.js  官网：http://turfjs.org/

requestAnimationFrame  详解   我觉得写的很好：https://www.jianshu.com/p/fa5512dfb4f5

一、实现思路

1、绘制线

2、绘制一个点，将线的第一个点赋值给点

3、将geometry中线的每个节点值 赋值给点

<template>
  <div class="hello">
    <div id="map" style="width: 100%; height: 100%"></div>
  </div>
</template>
 
<script>
export default {
  name: "Map",
  data() {
    return {};
  },
  methods: {
    initmap() {
      mapboxgl.accessToken =
        "pk.eyJ1IjoiMTU5MzU3MyIsImEiOiJjamw3bW85dHkwbXlvM3ZzMm5iZnZ6bWJpIn0.W6_MGVjNaImIybFdMJBMpg";
      let initMap = new mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/mapbox/streets-v11",
        zoom: 3, //缩放层级
        center: [108.420679, 36.772537], //进入后展现的中心点
      });
      return initMap;
    },
  },
  mounted() {
    window.map = this.initmap();
    let coor = [
      [74.91932166254529, 43.34799143293915],
      [78.82968043376917, 35.32100587068976],
      [82.20680846345789, 43.283329636323145],
      [84.60634680034286, 35.46590128939705],
      [88.60557736181482, 42.82877118912947],
      [92.07157718176103, 34.07894110138169],
      [100.86988441701243, 42.95898883351077],
      [109.31270449123406, 31.766651099437112],
      [127.53142149351078, 41.17789211364973],
      [135.8853697774751, 33.33965831774536],
      [142.3730104660895, 43.283329636323145],
      [148.94952294496136, 37.39631064993182],
      [152.94875350643326, 44.753129575870986],
    ];
    let origin = coor[0];
    var route = {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          geometry: {
            type: "LineString",
            coordinates: coor,
          },
        },
      ],
    };
    var point = {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          properties: {},
          geometry: {
            type: "Point",
            coordinates: origin,
          },
        },
      ],
    };

    map.on("load", function () {
      map.addSource("route", {
        type: "geojson",
        data: route,
      });

      map.addSource("point", {
        type: "geojson",
        data: point,
      });

      map.addLayer({
        id: "route",
        source: "route",
        type: "line",
        paint: {
          "line-width": 2,
          "line-color": "#007cbf",
        },
      });

      map.addLayer({
        id: "point",
        source: "point",
        type: "symbol",
        layout: {
          "icon-image": "airport-15",
          "icon-rotate": ["get", "bearing"],
          "icon-rotation-alignment": "map",
          "icon-allow-overlap": true,
          "icon-ignore-placement": true,
        },
      });
      console.log(map, map.getStyle(), "map");
      let that = this;
      var steps = 10000;
      var counter = 0;
      function animate() {
        debugger;
        if (counter == coor.length) {
          cancelAnimationFrame(requestAnimationFrame(animate));
          point.features[0].geometry.coordinates = [];
          point.features[0].geometry.coordinates = origin;
          map.getSource("point").setData(point);
          counter = -1;
        } else {
          point.features[0].geometry.coordinates = coor[counter];
          if (counter < coor.length - 1) {
            point.features[0].properties.bearing = turf.bearing(
              turf.point(coor[counter >= steps ? counter - 1 : counter]),
              turf.point(coor[counter >= steps ? counter : counter + 1])
            );
          } else {
            point.features[0].properties.bearing = turf.bearing(
              turf.point(coor[counter >= steps ? counter - 3 : counter - 2]),
              turf.point(coor[counter >= steps ? counter - 2 : counter - 1])
            );
          }
          if (point.features[0].properties.bearing != 0) {
            console.log(map, map.getSource("point"), "map", point);
            console.log(map.getStyle(), map.getSource("point"), "map", point);
            map.getSource("point").setData(point);
          }
        }
        counter++;
        requestAnimationFrame(animate);
      }
      animate(counter);
    });
  },
};
</script>
 
<style scoped>
.hello {
  width: 100%;
  height: 100%;
}
</style>

是不是很快，原因是我们数据的节点很少，我们需要将线的细化，这里用到的是  turf.lineChunk  转之后发现他不是标准的geometry 线数据

<template>
  <div class="hello">
    <div id="map" style="width: 100%; height: 100%"></div>
  </div>
</template>
 
<script>
export default {
  name: "Map",
  data() {
    return {};
  },
  methods: {
    initmap() {
      mapboxgl.accessToken =
        "pk.eyJ1IjoiMTU5MzU3MyIsImEiOiJjamw3bW85dHkwbXlvM3ZzMm5iZnZ6bWJpIn0.W6_MGVjNaImIybFdMJBMpg";
      let initMap = new mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/mapbox/streets-v11",
        zoom: 3, //缩放层级
        center: [108.420679, 36.772537], //进入后展现的中心点
      });
      return initMap;
    },
  },
  mounted() {
    window.map = this.initmap();
    let coor_old = [
      [74.91932166254529, 43.34799143293915],
      [78.82968043376917, 35.32100587068976],
      [82.20680846345789, 43.283329636323145],
      [84.60634680034286, 35.46590128939705],
      [88.60557736181482, 42.82877118912947],
      [92.07157718176103, 34.07894110138169],
      [100.86988441701243, 42.95898883351077],
      [109.31270449123406, 31.766651099437112],
      [127.53142149351078, 41.17789211364973],
      [135.8853697774751, 33.33965831774536],
      [142.3730104660895, 43.283329636323145],
      [148.94952294496136, 37.39631064993182],
      [152.94875350643326, 44.753129575870986],
    ];
    let route = {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          geometry: {
            type: "LineString",
            coordinates: coor_old,
          },
        },
      ],
    };

    let routelineChunk = turf.lineChunk(route.features[0], 50, {
      units: "miles",
    });
    // 将转好后的geometry拼接成正常的数据
    let coor = [];
    routelineChunk.features.forEach((el) => {
      el.geometry.coordinates.forEach((yo) => {
        coor.push(yo);
      });
    });
    route.features[0].geometry.coordinates = coor;
    let origin = coor[0];
    let point = {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          properties: {},
          geometry: {
            type: "Point",
            coordinates: origin,
          },
        },
      ],
    };

    map.on("load", function () {
      map.addSource("route", {
        type: "geojson",
        data: route,
      });

      map.addSource("point", {
        type: "geojson",
        data: point,
      });

      map.addLayer({
        id: "route",
        source: "route",
        type: "line",
        paint: {
          "line-width": 2,
          "line-color": "#007cbf",
        },
      });

      map.addLayer({
        id: "point",
        source: "point",
        type: "symbol",
        layout: {
          "icon-image": "airport-15",
          "icon-rotate": ["get", "bearing"],
          "icon-rotation-alignment": "map",
          "icon-allow-overlap": true,
          "icon-ignore-placement": true,
        },
      });
      let that = this;
      let steps = 10000;
      let counter = 0;
      function animate() {
        debugger;
        if (counter == coor.length) {
          cancelAnimationFrame(requestAnimationFrame(animate));
          point.features[0].geometry.coordinates = [];
          point.features[0].geometry.coordinates = origin;
          map.getSource("point").setData(point);
          counter = -1;
        } else {
          point.features[0].geometry.coordinates = coor[counter];
          if (counter < coor.length - 1) {
            point.features[0].properties.bearing = turf.bearing(
              turf.point(coor[counter >= steps ? counter - 1 : counter]),
              turf.point(coor[counter >= steps ? counter : counter + 1])
            );
          } else {
            point.features[0].properties.bearing = turf.bearing(
              turf.point(coor[counter >= steps ? counter - 3 : counter - 2]),
              turf.point(coor[counter >= steps ? counter - 2 : counter - 1])
            );
          }
          if (point.features[0].properties.bearing != 0) {
            map.getSource("point").setData(point);
          }
        }
        counter++;
        requestAnimationFrame(animate);
      }
      animate(counter);
    });
  },
};
</script>
 
<style scoped>
.hello {
  width: 100%;
  height: 100%;
}
</style>

线的数据是一样的，移动的数据是空的，我们将每次都push更新数据

最终的代码

<template>
  <div class="hello">
    <div id="map" style="width: 100%; height: 100%"></div>
  </div>
</template>
 
<script>
export default {
  name: "Map",
  data() {
    return {};
  },
  methods: {
    initmap() {
      mapboxgl.accessToken =
        "pk.eyJ1IjoiMTU5MzU3MyIsImEiOiJjamw3bW85dHkwbXlvM3ZzMm5iZnZ6bWJpIn0.W6_MGVjNaImIybFdMJBMpg";
      let initMap = new mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/mapbox/streets-v11",
        zoom: 3, //缩放层级
        center: [108.420679, 36.772537], //进入后展现的中心点
      });
      return initMap;
    },
  },
  mounted() {
    window.map = this.initmap();
    let coor_old = [
      [74.91932166254529, 43.34799143293915],
      [78.82968043376917, 35.32100587068976],
      [82.20680846345789, 43.283329636323145],
      [84.60634680034286, 35.46590128939705],
      [88.60557736181482, 42.82877118912947],
      [92.07157718176103, 34.07894110138169],
      [100.86988441701243, 42.95898883351077],
      [109.31270449123406, 31.766651099437112],
      [127.53142149351078, 41.17789211364973],
      [135.8853697774751, 33.33965831774536],
      [142.3730104660895, 43.283329636323145],
      [148.94952294496136, 37.39631064993182],
      [152.94875350643326, 44.753129575870986],
    ];
    let route = {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          geometry: {
            type: "LineString",
            coordinates: coor_old,
          },
        },
      ],
    };
    let routeMove = {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          geometry: {
            type: "LineString",
            coordinates: [],
          },
        },
      ],
    };
    let speed = 50; // 运行速度
    let routelineChunk = turf.lineChunk(route.features[0], speed, {
      units: "miles",
    });
    // 将转好后的geometry拼接成正常的数据
    let coor = [];
    routelineChunk.features.forEach((el) => {
      el.geometry.coordinates.forEach((yo) => {
        coor.push(yo);
      });
    });
    route.features[0].geometry.coordinates = coor;
    let origin = coor[0];
    let point = {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          properties: {},
          geometry: {
            type: "Point",
            coordinates: origin,
          },
        },
      ],
    };

    map.on("load", function () {
      map.addSource("route", {
        type: "geojson",
        data: route,
      });
      map.addSource("routeMove", {
        type: "geojson",
        data: routeMove,
      });
      map.addSource("point", {
        type: "geojson",
        data: point,
      });
      map.addLayer({
        id: "route",
        source: "route",
        type: "line",
        paint: {
          "line-width": 10,
          "line-color": "#F22C2C",
          "line-opacity": 0.3,
        },
        layout: {
          "line-cap": "round",
          "line-join": "round",
        },
      });
      map.addLayer({
        id: "routeMove",
        source: "routeMove",
        type: "line",
        paint: {
          "line-width": 2,
          "line-color": "#007cbf",
          "line-opacity": 1,
        },
        layout: {
          "line-cap": "round",
          "line-join": "round",
        },
      });
      map.addLayer({
        id: "point",
        source: "point",
        type: "symbol",
        layout: {
          "icon-image": "airport-15",
          "icon-rotate": ["get", "bearing"],
          "icon-rotation-alignment": "map",
          "icon-allow-overlap": true,
          "icon-ignore-placement": true,
        },
      });
      let that = this;
      let steps = 10000;
      let counter = 0;
      function animate() {
        if (counter == coor.length) {
          cancelAnimationFrame(requestAnimationFrame(animate));
          point.features[0].geometry.coordinates = [];
          point.features[0].geometry.coordinates = origin;
          map.getSource("point").setData(point);
          counter = -1;
          routeMove.features[0].geometry.coordinates = [];
        } else {
          // 移动添加点数据
          point.features[0].geometry.coordinates = coor[counter];
          if (counter < coor.length - 1) {
            point.features[0].properties.bearing = turf.bearing(
              turf.point(coor[counter >= steps ? counter - 1 : counter]),
              turf.point(coor[counter >= steps ? counter : counter + 1])
            );
          } else {
            point.features[0].properties.bearing = turf.bearing(
              turf.point(coor[counter >= steps ? counter - 3 : counter - 2]),
              turf.point(coor[counter >= steps ? counter - 2 : counter - 1])
            );
          }
          if (point.features[0].properties.bearing != 0) {
            map.getSource("point").setData(point);
          }
          // 添加线数据
          routeMove.features[0].geometry.coordinates.push(coor[counter]);
          map.getSource("routeMove").setData(routeMove);
        }
        counter++;
        requestAnimationFrame(animate);
      }
      animate(counter);
    });
  },
};
</script>
 
<style scoped>
.hello {
  width: 100%;
  height: 100%;
}
</style>

这个最后可以拓展就可以实现， keep 上面的轨迹了

侧耳倾听...
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue+mapboxgl 鹰眼展示
05-25
运用vue加mapboxgl,编写的鹰眼图，全局视图，通过小图查看大图的展示功能 1、首先要有两个地图 大图，小图，鹰眼范围图（简称鹰眼） 2、大图移动，放大缩小的时候要相应的放大和缩小 3、小图不动，鹰眼图放大和缩小...
vue+mapboxgl 卷帘功能
06-13
vue+mapboxgl 卷帘功能 可实现左右滑动
spring boot中使用http请求的示例代码
08-28
本篇文章主要介绍了spring boot中 使用http请求的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
springboot发送HTTP请求
JFENG14的博客
03-17 1万+
1、添加依赖 使用RestTemplate进行发送请求，添加相关依赖 <!--发送请求的依赖--> <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpclient</artifactId> <version>4.5.5&
mapbox部分点图片不显示问题可以使用icon-allow-overlap
BWCX_NLFD_K的博客
04-28 392
如果你希望图标可以重叠，可以将这个属性设置为`true`。请记住，当 `icon-allow-overlap` 和 `icon-ignore-placement` 都设置为 `true` 时，图标的放置将不再受到任何限制，这可能会导致地图上的其他元素被遮挡。类似地，如果你还希望图标可以放置在地图的边缘，可以将 `icon-ignore-placement` 属性设置为 `true`。在这个例子中，`icon-allow-overlap` 被设置为`true`，这意味着图标可以与其他地图元素重叠。
spring boot请求http接口的三种方式
YUHUIXIAOFEI的博客
04-19 3639
OpenFeign是SpringCloud自己研发的，在Feign的基础上支持了Spring MVC的注解，如@RequesMapping等等。OkHttp 是一个第三方的 HTTP 客户端库,它比 Java 标准的 HttpURLConnection 更高效、更实用。HttpURLConnection主要工作内容：打开socket连接，封装http请求报文，解析请求报文。HttpURLConnection 是 Java 中的 HTTP 客户端实现，,适用于简单的请求需要。定义FeignClient。
SpringBoot发送http请求
LifeBackwards的专栏
05-26 2226
此外，需要定义一个RestTemplate配置类。HttpUtils工具类如下。
Spring Boot：处理HTTP请求
kaven
02-09 9608
Spring Boot非常适合Web应用程序开发，可以使用嵌入式Tomcat、Jetty、Undertow或Netty创建一个自包含的HTTP服务器，大多数Web应用程序使用spring-boot-starter-web模块来快速启动和运行Servlet Web应用程序，还可以选择使用spring-boot-starter-webflux模块构建响应式（Reactive）Web应用程序。 Spring Web MVC框架（通常称为Spring MVC）是一个丰富的模型（Model）、视图（View）、控制器
vue+mapboxgl 双屏同步展示
06-13
vue+mapboxgl 双屏同步展示
vue+mapboxgl 添加点，添加注记
06-14
vue+mapboxgl 添加点，添加注记
vue2mapbox-gl:mapbox-gl的Vue组件。 Api遵循Vue2Leaflet的方法，因此很容易在两个map组件之间来回移植代码
05-02
vue2mapbox-gl mapbox-gl的Vue组件。 类似于Vue2Leaflet的Api。 安装 $ npm install --save vue2mapbox-gl 用法 使用umd导入，例如使用es6导入。 import Vue2MapboxGL from 'vue2mapbox-gl' ; // You might want ...
Springboot -- 用更优雅的方式发HTTP请求(RestTemplate详解)
BASK2312的博客
12-27 7242
是Spring提供的用于访问Rest服务的客户端，提供了多种便捷访问远程Http服务的方法,能够大大提高客户端的编写效率。我之前的HTTP开发是用apache的HttpClient开发，代码复杂，还得操心资源回收等。代码很复杂，冗余代码多，稍微截个图，这是我封装好的一个post请求工具：本教程将带领大家实现Spring生态内RestTemplate的Get请求和Post请求还有的实践和核心方法源码的分析，看完你就会用优雅的方式来发HTTP请求。
SpringBoot ： 使用SpringBoot 实现HTTP请求（post/get）
热门推荐
qq_31432773的博客
04-18 2万+
使用SpringBoot 实现了HTTP请求（post/get）,总结如下 HTTPRequest 请求工具类 package com.aliyun.mq.util; import org.springframework.http.*; import org.springframework.http.client.SimpleClientHttpRequestFactory; import org.springframework.util.MultiValueMap; import org.spri
4种Springboot RestTemplate 服务里发送HTTP请求用法
华为云官方博客
05-27 4581
RestTemplate与REST资源交互的方法涵盖了HTTP请求方法，包括get, post, put, delete。
【SpringBoot】7 种实现 HTTP 调用的方式
sco5282的博客
06-21 7994
作者在工作中，遇到一些需要调用三方接口的任务，就需要用到 HTTP 调用工具。
Springboot-发送HTTP请求两种方式
榔娃
10-28 7907
Spring生态内RestTemplate
SpringBoot使用RestTemplate发送http请求（实操版）
weixin_47316183的博客
08-03 6482
RestTmplate是Spring框架提供的 ，可用于在应用中调用 rest 服务，它简化了与 http 服务的通信方式，统一了RESTful的标准，封装了 http 链接， 我们只需要传入url及返回值类型即可。相较于之前常用的 HttpClient，RestTemplate 是一种更优雅的调用 RESTful 服务的方式。怎么样，是不是特别的方便和简单~
Springboot整合RestTemplate发送http请求
程序三两行
10-17 7446
目录 一 概述 二 RestTemplate 1、简述RestTemplate 2、使用 3、自定义设置 手动指定转换器(HttpMessageConverter) 设置底层连接方式 设置拦截器(ClientHttpRequestInterceptor) 一 概述 通过向指定的第三方地址发送对应格式的数据以便换取所需数据这一需求是平时开发经常碰到的需求。可以同通过apache的HttpClient开发，但是代码复杂，还得操心资源回收等，冗余代码多。spring提供了一种简...
Springboot发送http请求
wzluestc的博客
12-01 3333
Springboot发送http请求(使用RestTemplate) 零、关键类介绍 public class HttpEntity<T> { public static final HttpEntity<?> EMPTY = new HttpEntity(); private final HttpHeaders headers; @Nullable private final T body; protected HttpEntity() {
vue+mapbox
最新发布
06-29
1. 安装依赖：首先，你需要在 Vue 项目中安装 `@vuegis/vue-mapbox-gl` 或者直接使用 Mapbox GL JS（原生库），这是官方推荐的 Vue 组件化解决方案。 2. 创建地图组件：创建一个 Vue 组件，例如 `Map.vue`，引入 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

侧耳倾听...

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

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

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

打赏作者

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

抵扣说明：

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

余额充值