vue 使用高德JSapi 实现轨迹回放和海量点效果（点击显示详情提示窗口） 采用AMapLoader 和 AMapUI
使用高德Api 结合Vue项目，AMapLoader 和 AMapUI实现轨迹巡航和海量点的效果。还有实现海量点点击提示信息的效果
·
第一步 注册高德开发者平台账号 （个人选择个人账户） 地址见 https://lbs.amap.com/api
第二步 在控制台中申请Key（输入key，选择web端，提交即可）
第三步 通过JSApi Loader 获取高德Api 来结合Vue
按 NPM 方式安装使用 Loader ：
npm i @amap/amap-jsapi-loader --save
第四步 Vue项目中示例
轨迹回放（巡航器）实例：
巡航效果图：
<div id="container"></div> data() {
return {
map: null,
};
},
mounted() {
this.initMap();
},！！！注意：使用的是Loader 使用时需要引入
import AMapLoader from "@amap/amap-jsapi-loader";
initMap() {
AMapLoader.load({
key: "xxxxxxx", // 申请好的Web端开发者Key，首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [
"AMap.ToolBar",
"AMap.Scale",
"AMap.HawkEye",
"AMap.MapType",
"AMap.Geolocation",
"AMap.ControlBar",
"AMap.Driving",
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
AMapUI: {
// 是否加载 AMapUI，缺省不加载
version: "1.1", // AMapUI 缺省 1.1
plugins: [], // 需要加载的 AMapUI ui插件
},
})
.then((AMap) => {
this.map = new AMap.Map("container", {
//设置地图容器id
viewMode: "3D", //是否为3D地图模式
// pitch:45, // 地图俯仰角度，有效范围 0 度- 83 度
terrain: true, // 开启地形图
zoom: 10, //初始化地图级别
// "AMapUI": { // 是否加载 AMapUI，缺省不加载
// version: '1.0',
// plugins: ['overlay/SimpleMarker']//SimpleMarker设置自定义图标，PathSimplifier轨迹展示组件
// },
});
// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
// this.map.addControl(new AMap.ToolBar());
// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
this.map.addControl(new AMap.Scale());
// // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
// this.map.addControl(new AMap.HawkEye({ isOpen: true }));
// // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
this.map.addControl(new AMap.MapType());
// // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
// this.map.addControl(new AMap.Geolocation());
this.routeLine();
})
.catch((e) => {
console.log(e);
});
}, routeLine() {
AMapUI.load(["ui/misc/PathSimplifier", "lib/$"], (PathSimplifier, $) => {
if (!PathSimplifier.supportCanvas) {
alert("当前环境不支持 Canvas！");
return;
}
var pathSimplifierIns = new PathSimplifier({
zIndex: 100,
//autoSetFitView:false,
map: this.map, //所属的地图实例
getPath: function (pathData, pathIndex) {
return pathData.path;
},
getHoverTitle: function (pathData, pathIndex, pointIndex) {
if (pointIndex >= 0) {
//point
return (
pathData.name +
"，点：" +
pointIndex +
"/" +
pathData.path.length
);
}
return pathData.name + "，点数量" + pathData.path.length;
},
renderOptions: {
renderAllPointsIfNumberBelow: 100, //绘制路线节点，如不需要可设置为-1
},
});
window.pathSimplifierIns = pathSimplifierIns;
pathSimplifierIns.setData([
{
name: "路线0",
path: data.data.list[0], // data为后端接口数据
},
]);
//对第一条线路（即索引 0）创建一个巡航器
// this.map.on('complete', function() {
var navg1 = pathSimplifierIns.createPathNavigator(0, {
// loop: true, //循环播放
speed: 50, //巡航速度，单位千米/小时
});
navg1.start();
// })
});
},如果需要回放功能，执行下面的函数即可
// 回放功能
Repeat() {
if (window.pathSimplifierIns) {
//通过该方法清空上次传入的轨迹
pathSimplifierIns.setData([
{
name: "路线0",
path: data.data.list[0],
},
]);
}
pathSimplifierIns
.createPathNavigator(0, {
// loop: true, //循环播放
speed: 50 , //巡航速度，单位千米/小时
})
.start();
},巡航效果切换为海量点，点击海量点显示信息弹窗：
海量点效果图：
前面的代码都一样，切换为海量点时（随便设置一个flag），只需要initMap函数调用的routeLine函数替换为pointScreen函数即可。
pointScreen函数代码如下：
pointScreen() {
AMapUI.load(
["ui/misc/PointSimplifier", "lib/$"],
(PointSimplifier, $) => {
if (!PointSimplifier.supportCanvas) {
alert("当前环境不支持 Canvas！");
return;
}
var pointSimplifierIns = new PointSimplifier({
map: this.map,
getPosition: function (item) {
// console.log(item);
if (!item) return null;
var parts = item.geometry.coordinates;
return [parseFloat(parts[0]), parseFloat(parts[1])];
},
getHoverTitle: function (dataItem, idx) {
//dataItem 是下面传入数据pointdata的元素，结构也取决于pointdata
let html = `
<div class="hoverbox">
<div class="hoverbox_content">
<p>时间：${dataItem.properties.time}</p>
<p>流速：${dataItem.properties.flow} L/min</p>
<p>定位精度：${dataItem.properties.accu} m</p>
<p>航向：${dataItem.properties.course} °</p>
<p>消息：${dataItem.properties.mtime}</p>
<p>类型：${
dataItem.properties.type === "Feature" ? "实时" : ""
}</p>
<p>频率：${dataItem.properties.interval} s</p>
</div>
</div>`;
return html;
},
renderOptions: {
//点的样式
//点的样式
pointStyle: {
//绘制点占据的矩形区域
content: PointSimplifier.Render.Canvas.getImageContent(
"https://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png",
function onload() {
pointSimplifierIns.renderLater();
},
function onerror(e) {
alert("图片加载失败！");
}
),
//宽度
width: 19,
//高度
height: 31,
//定位点为底部中心
offset: ["-50%", "-100%"],
fillStyle: null,
strokeStyle: null,
},
//鼠标hover时的title信息
hoverTitleStyle: {
position: "top",
classNames: "hoverbox",
},
},
});
pointSimplifierIns.on("pointClick", (e, dataItem) => {
this.infoBox(dataItem);
});
window.pointSimplifierIns = pointSimplifierIns;
pointSimplifierIns.setData(pointdata); //pointdata应该为后端接口数据，这里自己模拟的数据
}
);
}, infoBox(dataItem) {
let html = `
<div class='hoverbox'>
<div class="hoverbox_content">
<p>时间：${dataItem.data.properties.time}</p>
<p>流速：${dataItem.data.properties.flow} L/min</p>
<p>定位精度：${dataItem.data.properties.accu} m</p>
<p>航向：${dataItem.data.properties.course} °</p>
<p>消息：${dataItem.data.properties.mtime}</p>
<p>类型：${
dataItem.data.properties.type === "Feature" ? "实时" : ""
}</p>
<p>频率：${dataItem.data.properties.interval} s</p>
</div>
</div>`;
var infoWindow = new AMap.InfoWindow({
content: html, //使用默认信息窗体框样式，显示信息内容
offset: new AMap.Pixel(0, -31),
isCustom:true,//是否自定义窗体。设为true时，信息窗体外框及内容完全按照content所设的值添加（默认为false，即在系统默认的信息窗体外框中显示content内容）
autoMove:true,//是否自动调整窗体到视野内（当信息窗体超出视野范围时，通过该属性设置是否自动平移地图，使信息窗体完全显示）
retainWhenClose:true, //信息窗体关闭时，是否将其Dom元素从页面中移除，默认为false
zIndex:100000 //官网没有写明这个属性。导致海量点和信息弹窗蒙层出现问题。在content的样式hoverbox中添加z-index没有效果。我也是尝试了很久，在这里添加了zIndex 就可以了
});
infoWindow.open(this.map, dataItem.data.geometry.coordinates);
},关闭的回调我没有去写，很简单，官网写的很详细了
上面使用到的数据比较大（动辄上万），不好粘贴（我的数据也是捞网站上面的接口数据到本地的）。
官网有mock 数据 大家可以看一下
比如这个城市数据 ：https://a.amap.com/jsapi_demos/static/citys.js
巡航的部分数据：
海量点的数据部分：
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)