装下这两个 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.15
Loca: {
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#marker
position: [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>
