vue3 高德地图标注（飞线，呼吸点）效果

在这里插入图片描述

装下这两个 npm 忘了具体命令了，百度一下就行
“loca”: “^1.0.1”,
“@amap/amap-jsapi-loader”: “^1.0.1”,

<template><div id="map" style="width: 100%;height: 100%;"></div>
</template><script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import {onMounted, ref, nextTick} from "vue";// const { Loca } = window;const x1 = ref({"type": "FeatureCollection","features": [{"type": "Feature","properties": {"type": 2,"ratio": '事件中？石家庄',"lineWidthRatio": 0},"geometry": {"type": "Point","coordinates": [114.521531,38.048311]}}]}
)
const x2 = ref({"type": "FeatureCollection","features": [{"type": "Feature","properties": {"type": 2,"ratio": '不会吧？',"lineWidthRatio": 0},"geometry": {"type": "LineString","coordinates": [[ // 起点120.1752885,35.9508765],[ // 终点114.521531,38.048311]]}}]}
)const initMap = () => {// AMapLoader.reset()AMapLoader.load({key:"ab15e08b0", // 申请好的Web端开发者Key，首次调用 load 时必填/** 刚开始没有引入下面代码时，会报错: Loca is not defined*  Loca: {version: '2.0.0' // Loca 版本，缺省 1.3.2},而且 JSAPI的version(版本)要和Loca的version(版本)一致才可以,否则也会报错不懂的可以去看官方文档: https://lbs.amap.com/api/loca-v2/intro* */version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15Loca: {version: '2.0.0' // Loca 版本，缺省 1.3.2},plugins:[], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {const { Loca } = window;const map1 = new AMap.Map("map", {resizeEnable: true, // 是否监控地图容器尺寸变化viewMode: '3D',pitch: 48,// 地图俯仰角度，有效范围 0 度- 83 度center:[104.780269, 34.955403], // 地图中心点zoom:5, // 地图显示的缩放级别mapStyle:"amap://styles/grey", // 设置地图的显示样式});// Container: Loca 的核心控制类，可以控制光源、视角变换、图层渲染等。const loca = new Loca.Container({ // 创建一个容器map: map1, // 传入地图实例 还可以这样写: map: map (ES6语法)});// 呼吸点// ScatterLayer: 带有动画效果的图层类型，用于展示散点数据，支持动画效果，如呼吸点、闪烁点等。大地面上的点，可展示三种类型：颜色圆、图标、动画图标const scatter = new Loca.ScatterLayer({ // 创建一个散点图层loca, // 传入容器实例 (相当于把散点图层添加到地图上)zIndex: 10, // 图层层级opacity: 0.6, // 图层透明度visible: true, // 图层是否可见zooms: [2, 22], // 图层显示的缩放级别范围});/** geojson 格式的数据源，一个数据源可以给多个图层同时提供数据。一个geojson数据源可以同时拥有点、线、面的数据类型，每个图层绘制的时候会自动获取 合适的数据类型进行渲染* */// 地点坐标---------------const pointGeo = new Loca.GeoJSONSource({ // 创建一个 GeoJSON 对象// url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/pulselink-china-city-point.json', // 数据源的链接地址，一般是接口地址，返回的数据必须是 geojson 格式data:  x1.value});scatter.setSource(pointGeo); // 给上面创建的散点图层设置数据源scatter.setStyle({ // 设置样式unit: 'meter', // 设置单位为米size: [100000, 100000], // 设置大小范围borderWidth: 0, // 设置边框宽度texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png', // 设置纹理duration: 2000, // 设置动画时长animate: true, // 设置动画});loca.add(scatter); // 将散点图层(scatter)添加到容器中// 弧线// PulseLinkLayer: 连接飞线图层，可以支持弧度，宽度，过渡色等能力。 并且还支持脉冲动画，可以表达数据的朝向const pulseLink = new Loca.PulseLinkLayer({ // 创建一个弧线图层// loca,zIndex: 10, // 设置图层的层级opacity: 1, // 设置图层的透明度visible: true, // 设置图层是否可见zooms: [2, 22], // 设置图层可见的缩放级别范围depth: true, // 设置是否开启深度检测});// GeoJSONSource: 图层的数据源，可以是本地数据，也可以是远程数据，数据格式必须是 geojson 格式// 线数据---------------const geo = new Loca.GeoJSONSource({ // 创建一个 GeoJSON 对象// url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-out.json', // 数据源的链接地址，一般是接口地址，返回的数据必须是 geojson 格式data:  x2.value});pulseLink.setSource(geo); // 给上面的弧线图层设置数据源pulseLink.setStyle({ // 设置样式unit: 'meter', // 设置单位为米dash: [40000, 0, 40000, 0], // 设置虚线样式lineWidth: () => { // 设置线宽return [20000, 1000]; // 设置线宽范围},height: (index, feat) => { // 设置高度return feat.distance / 3 + 10; // 设置高度范围},altitude: 1000, // 设置高度smoothSteps: 30, // 设置平滑度speed: (index, prop) => { // 设置速度return 1000 + Math.random() * 200000; // 设置速度范围},flowLength: 100000, // 设置流动长度lineColors: (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(); // 开始动画// 点击事件处理const clickInfo = new AMap.Marker({ // 点标记anchor: 'bottom-center', // 设置点标记锚点，可选值：'top-left','top-center','top-right'等详细请看官方文档: https://lbs.amap.com/api/jsapi-v2/documentation#markerposition: [116.396923, 39.918203, 0], // 点标记在地图上显示的位置});clickInfo.setMap(map1); // 将点标记添加到地图上clickInfo.hide(); // 隐藏点标记map1.on("click", function (e) {const feat = pulseLink.queryFeature(e.pixel.toArray());const feat2 = scatter.queryFeature(e.pixel.toArray());console.log('!!!!!!', feat2)if(feat2){ // 点击了呼吸点console.log('点击了')}if (feat) { // 点击了 线clickInfo.show();const 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();}});/*以下为:样式调试工具，仅用于开发阶段方便调试样式可以将可视化图层添加到调试工具中使用请勿在生产环境中使用* */});
}const companylData = ref([])
const listData = ref([])onMounted(async () => {nextTick( async () => {await initMap();})
})</script><style scoped>
:deep(.arco-btn.arco-btn-size-medium){height: 31px !important;
}
</style>