vue3+高德地图，使用抛物线连接两点，实现线路脉冲和呼吸灯动画效果

最新推荐文章于 2024-06-15 16:56:58 发布
最新推荐文章于 2024-06-15 16:56:58 发布
阅读量511 收藏 4
点赞数 9
文章标签： arcgis 前端 3d vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61876792/article/details/137518389
版权
本文介绍了如何在Vue3项目中集成高德地图JSAPI2.0和LoCa2.0.0库，创建一个包含散点图、脉冲链接线和点击事件的动态地图组件，展示了地图数据的展示与交互功能。
摘要由CSDN通过智能技术生成

最终实现效果

一：版本vue3+jsAPI2.0+loca2.0.0

二：下载地图加载器

npm i @amap/amap-jsapi-loader --save

高德地图jsApi2.0，点击查看官网介绍

三：写成一个组件，哪里使用哪里引入即可，代码如下

<script setup>
import { onMounted, onUnmounted,nextTick } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

onMounted(() => {
  AMapLoader.load({
    key: "输入你的key", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    Loca:{version:'2.0.0'}
  })
    .then((AMap) => {
      map = new AMap.Map('container', {
            zoom: 6,//地图缩放级别
            // showLabel: false,//是否显示地图文字标记
            viewMode: '3D',//地图类型
            pitch: 50,//倾斜角度
            center:[116.397428, 39.90923],//地图中心点
            mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',//地图样式
        });

        var loca = new Loca.Container({
            map:map,
        });

        // 呼吸点
        var scatter = new Loca.ScatterLayer({
            loca,
            zIndex: 10,
            opacity: 0.6,
            visible: true,
            zooms: [2, 22],
        });

        var pointGeo = new Loca.GeoJSONSource({
          data: {
            "type": "FeatureCollection",
            "features": [
            {
                "type": "Feature",
                "properties": {
                  "type": 1,
                  "ratio": 0.035,
                  "lineWidthRatio": 0.9447674418604651
                },
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                  116.397428, 39.90923
                  ]
                }
              },
              {
                "type": "Feature",
                "properties": {
                  "type": 1,
                  "ratio": 0.035,
                  "lineWidthRatio": 0.9447674418604651
                },
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                    125.34,
                    43.82
                  ]
                }
              },
              {
                "type": "Feature",
                "properties": {
                  "type": 0,
                  "ratio": 0.0369,
                  "lineWidthRatio": 1
                },
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                    113.78,
                    34.76
                  ]
                }
              }, {
                "type": "Feature",
                "properties": {
                  "type": 1,
                  "ratio": 0.035,
                  "lineWidthRatio": 0.9447674418604651
                },
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                    91.17,
                    29.65
                  ]
                }
              },
              {
                "type": "Feature",
                "properties": {
                  "type": 1,
                  "ratio": 0.035,
                  "lineWidthRatio": 0.9447674418604651
                },
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                  114.02,33.01
                  ]
                }
              },
              {
                "type": "Feature",
                "properties": {
                  "type": 1,
                  "ratio": 0.035,
                  "lineWidthRatio": 0.9447674418604651
                },
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                  120.63,28.06
                  ]
                }
              },
              {
                "type": "Feature",
                "properties": {
                  "type": 0,
                  "ratio": 0.0369,
                  "lineWidthRatio": 1
                },
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                  114.12,22.53
                  ]
                }
              }, {
                "type": "Feature",
                "properties": {
                  "type": 1,
                  "ratio": 0.035,
                  "lineWidthRatio": 0.9447674418604651
                },
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                  108.96,34.28
                  ]
                }
              },
              {
                "type": "Feature",
                "properties": {
                  "type": 0,
                  "ratio": 0.0369,
                  "lineWidthRatio": 1
                },
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                  84.89,45.58
                  ]
                }
              }, {
                "type": "Feature",
                "properties": {
                  "type": 1,
                  "ratio": 0.035,
                  "lineWidthRatio": 0.9447674418604651
                },
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                  118.80,32.06
                  ]
                }
              },
            ]
          }
            // url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/pulselink-china-city-point.json',
        });
        scatter.setSource(pointGeo);
        scatter.setStyle({
            unit: 'px',//meter/px=米/像素
            size: [50, 50],//呼吸点尺寸
            borderWidth: 0,//描边宽
            texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png',//呼吸点图片
            duration: 2000,//动画时间
            animate: true,//开启动画
        });
        loca.add(scatter);

        // 弧线
        var pulseLink = new Loca.PulseLinkLayer({
            // loca,
            zIndex: 10,
            opacity: 1,
            visible: true,
            zooms: [2, 22],
            depth: true,
        });

        var geo = new Loca.GeoJSONSource({
            // url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-out.json',
          data: {
            "type": "FeatureCollection",
            "features": [
              {
                "type": "Feature",
                "properties": {
                  "type": 0,
                  "ratio": 0.0369,
                  "lineWidthRatio": 1
                },
                "geometry": {
                  "type": "LineString",
                  "coordinates": [
                    [
                      116.41,
                      39.90
                    ],
                    [
                      125.34,
                      43.82
                    ]
                  ]
                }
              },
              {
                "type": "Feature",
                "properties": {
                  "type": 1,
                  "ratio": 0.035,
                  "lineWidthRatio": 0.9447674418604651
                },
                "geometry": {
                  "type": "LineString",
                  "coordinates": [
                    [
                      113.78,
                      34.76
                    ],
                    [
                      91.17,
                      29.65
                    ]
                  ]
                }
              },{
                "type": "Feature",
                "properties": {
                  "type": 1,
                  "ratio": 0.035,
                  "lineWidthRatio": 0.9447674418604651
                },
                "geometry": {
                  "type": "LineString",
                  "coordinates": [
                    [
                    84.89,45.58
                    ],
                    [
                    118.80,32.06
                    ]
                  ]
                }
              },{
                "type": "Feature",
                "properties": {
                  "type": 1,
                  "ratio": 0.035,
                  "lineWidthRatio": 0.9447674418604651
                },
                "geometry": {
                  "type": "LineString",
                  "coordinates": [
                    [
                    114.02,33.01
                    ],
                    [
                    120.63,28.06
                    ]
                  ]
                }
              },{
                "type": "Feature",
                "properties": {
                  "type": 1,
                  "ratio": 0.035,
                  "lineWidthRatio": 0.9447674418604651
                },
                "geometry": {
                  "type": "LineString",
                  "coordinates": [
                    [
                    114.12,22.53
                    ],
                    [
                    108.96,34.28
                    ]
                  ]
                }
              },]
          }
        });

        pulseLink.setSource(geo);
        pulseLink.setStyle({
            unit: 'meter',//meter/px=米/像素
            dash: [40000, 0, 40000, 0],//连接线的虚线配置信息：[实线长度，虚线长度，实线长度，虚线长度]
            lineWidth: function () {//连接线的头尾宽度设置：[起点宽度，终点宽度]：单位跟随unit字段变化
                return [20000, 1000];//头部宽尾部窄样式
            },
            height: function (index, feat) {//弧线顶部高度
                return feat.distance / 3 + 10;
            },
            // altitude: 1000,
            smoothSteps: 30,//平滑步数，代表弧线的分隔段数，越大平滑度越好，但更消耗性能，默认为50。
            speed: function (index, prop) {//两点之间距离越长，速度越快
              return prop.distance<1000000?100000:
              prop.distance<2000000?200000:
              prop.distance<3000000?300000:
              prop.distance<4000000?400000:
              prop.distance<5000000?500000:600000
            },
            flowLength: 150000,//脉冲点的长度。单位跟随unit字段变化。如果不希望有脉冲动画，设置此长度为0即可。
            lineColors: function (index, feat) {//弧线颜色
                return ['rgb(255,228,105)', 'rgb(255,164,105)', 'rgba(1, 34, 249,1)'];
            },
            maxHeightScale: 0.3, // 弧顶位置比例
            headColor: 'rgba(255, 255, 0, 1)',//脉冲点头部颜色
            trailColor: 'rgba(255, 255,0,0)',//脉冲点尾部颜色
        });
        loca.add(pulseLink);//弧线图层加入地图
        loca.animate.start();//开启动画


        // 点击事件处理
        var clickInfo = new AMap.Marker({
            anchor: 'bottom-center',
            position: [116.396923, 39.918203, 0],
        });
        clickInfo.setMap(map);
        clickInfo.hide();
        map.on("click", function (e) {
            var feat = pulseLink.queryFeature(e.pixel.toArray());

            if (feat) {
                clickInfo.show();
                var props = feat.properties;
                clickInfo.setPosition(feat.coordinates[1]);
                clickInfo.setContent(
                    '<div style="text-align: center; height: 20px; width: 150px; color:#fff; font-size: 14px;">' +
                    '速率: ' + feat.properties['ratio'] +
                    '</div>'
                );
            } else {
                clickInfo.hide();
            }
        });

        var dat = new Loca.Dat();
        dat.addLayer(pulseLink);
     
    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<template>
  <div id="container"></div>
</template>

<style scoped>
#container {
  width: 100%;
  height: 100vh;
}
</style>

请注意

jsapi与loca版本详情，点击查看

最后再来看一下页面实际效果

鸭子嘎鹅子呱
关注
  • 9
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Vue学习笔记】vue实现呼吸灯效果
qq_44862029的博客
04-06 2892
目录一.代码二.效果 一.代码 <!-- 呼吸效果 --> <div class="root"> <h2 :style="{opacity}">呼吸效果 </h2> </div> const vm = new Vue({ el: '.root', data() { return {
vue使用高德地图点击下钻上浮效果的实现思路
10-16
主要介绍了vue使用高德地图点击下钻 上浮效果的实现思路,本文以浙江省为例通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
呼吸灯 效果
Ice Yang的博客
12-21 1893
呼吸灯效果，主要应用的是animation动画效果 做的一个小demo
多个抛物线两点动画vue
最新发布
heiyedechuan的博客
06-15 552
div class="ballTo" id="ballTo" style="position: relative">到这来</div>// 完成一次动画就删除一个dropBalls的小球。// 将cartControl传过来的对象挂载到ball的el属性上。// 将这个小球的显示状态设置为true。// 重置小球的active状态。dropBalls: [], // 用dropBalls来存放掉落的小球。// 结束的时候装金币的篮子放大一下。// 结束的时候装金币的篮子缩小一下。// 遍历这5个小球。
Vue.js小球抛物线懒人代码
weixin_57157114的博客
08-10 184
<template> <div> <div>你的内容部分 <!-- 定义你的点击事件 --> <div class="box" @click="addClick"></div> </div> <!-- 小球代码部分 --> <div v-for="(ball, index) in balls" :key="index"> <transition name=
使用Vue3调用高德地图接口（基于后端同学想搞前端地图的手把手式教程）
weixin_59915237的博客
09-09 1480
使用Vue3调用高德地图接口（基于后端同学想搞前端地图的手把手式教程）
Vue3实现加入购物车抛物线效果组件
LuckyWinty的博客
12-25 190
前端Q我是winty，专注分享前端知识和各类前端资源，乐于分享各种有趣的事，关注我，一起做个有趣的人～公众号点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群贝赛尔曲线 - Vue3实现加入购物车抛物线效果组件（可连续多个动画，动态回收DOM）前言在前几天的一次迭代中，我遇到了这么一个需求，模仿支付宝首页应用中心的编辑功能，支持编辑首页展示的应用，在支付宝应用首页编辑功能中，我注意到一种独...
Vue实现购物小球抛物线
weixin_49847526的博客
11-20 1766
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
Vue 动态连接线
lee576的专栏
07-11 6647
尝试了两个连线库 jsplumb 和 leadline ，其实两个库都很强大，但是基于个人使用的习惯，决定还是用 leadline ，在Vue 下我使用它的一个包装库 leader-line-vue 下面是上图的连接线示例代码，连接线很轻松的就实现了一个渐变效果...
vue实现购物车抛物线小球动画效果的方法详解
10-17
主要介绍了vue实现购物车抛物线小球动画效果的方法,结合实例形式较为详细的分析了vue.js实现抛物线动画效果购物车功能相关原理与操作注意事项,需要的朋友可以参考下
vue+高德地图实现地图搜索及点击定位操作
12-28
最近有个需求是实现一个使用地图搜索定位的功能，在网上参考了下其他的文章，感觉不是很完善，自己整理了一下，可以实现点击定位，搜索列表定位等功能，可能有些地方是多余的，需要的自己看着改下 [removed]...
通过css3动画和opacity透明度实现呼吸灯效果
12-10
本文介绍了通过css3动画和opacity透明度实现呼吸灯效果的方法，分享给大家，具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>呼吸灯</title> /*也可以通过加层罩，通过设置层罩透明度来实现亮度动画*/ <style> body{ background-color: black; } div{ margin: 0 auto; margin-top: 200px; width: 300px;
波纹，脉冲图，呼吸灯效果，地图点放大图
08-23
波纹，脉冲图，呼吸灯效果，地图点放大图，波纹，脉冲图，呼吸灯效果，地图点放大图，波纹，脉冲图，呼吸灯效果，地图点放大图，波纹，脉冲图，呼吸灯效果，地图点放大图，波纹，脉冲图，呼吸灯效果，地图点放大图，...
vue+高德地图写地图选址组件的方法
10-16
主要介绍了vue+高德地图写地图选址组件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue 纯CSS抛物线
m0_46961166的博客
01-22 501
有大佬可以告诉我怎么动态修改keyframes-->transform-->translateX里面的值吗
高德地图——loca，通过点击标记来设置圆形气泡呼吸点的坑（一）
lucklyff的博客
10-20 611
自创
呼吸灯效果动画
豌豆的专栏
11-01 4935
呼吸灯效果动画
Vue高德地图多个Marker添加点击事件(多个点位添加点击事件)
weixin_47796185的博客
08-10 4461
老样子废话不多说上代码(画地图如果画不出来请去看高德的开发文档这里咱就不说如何生产地图了)
Vue使用高德地图折线图+marker+信息窗体+圆点+文本显示做行动轨迹效果
ycycycyc1的博客
10-22 3214
1. 使用高德地图不多说 登陆高德开发平台登陆自己账号申请一个key 然后在你的public下的index.html引入高德链接 就可使用高德Api了 2. 首先我先放一张我需要做的UI效果图把 我这个主要就是要做一个人去过那些地方 然后在那些地方停留了 需要我在地图上展示出来的一个简单效果！看到这里 如果同你想要的效果差不多 那恭喜你 可以继续看下去了 我会在文章最后加入全部代码！ **3.**使用高德地图第一步需要盒子装这个地图 这个直接截图快速跳过把 3-1 实现UI效果分析： 以上图看
vue3+高德地图api如何使用
03-25
首先需要在 HTML 文件中引入高德地图的 JavaScript SDK： ``` <script src="//webapi.amap.com/maps?v=1.4.15&key=YOUR_API_KEY"></script> ``` 注意替换 `YOUR_API_KEY` 为你的高德地图 API KEY。 然后，可以在 Vue 组件中使用高德地图 API： ``` <template> <div ref="map" style="width: 100%; height: 400px;"></div> </template> <script> export default { mounted() { // 初始化地图 const map = new AMap.Map(this.$refs.map, { center: [116.397428, 39.90923], zoom: 13 }); // 添加标记点 const marker = new AMap.Marker({ position: [116.397428, 39.90923], map: map }); } } </script> ``` 这里创建了一个地图，将其渲染到 `map` 元素中，并在地图上添加了一个标记点。具体地图 API 的使用方法可以参考高德地图开发文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值