vue 使用高德JSapi 实现轨迹回放和海量点效果（点击显示详情提示窗口）采用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.15plugins: ["AMap.ToolBar","AMap.Scale","AMap.HawkEye","AMap.MapType","AMap.Geolocation","AMap.ControlBar","AMap.Driving",], // 需要使用的的插件列表，如比例尺'AMap.Scale'等AMapUI: {// 是否加载 AMapUI，缺省不加载version: "1.1", // AMapUI 缺省 1.1plugins: [], // 需要加载的 AMapUI ui插件},}).then((AMap) => {this.map = new AMap.Map("container", {//设置地图容器idviewMode: "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) {//pointreturn (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的元素，结构也取决于pointdatalet 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元素从页面中移除，默认为falsezIndex:100000 //官网没有写明这个属性。导致海量点和信息弹窗蒙层出现问题。在content的样式hoverbox中添加z-index没有效果。我也是尝试了很久，在这里添加了zIndex 就可以了});infoWindow.open(this.map, dataItem.data.geometry.coordinates);},

关闭的回调我没有去写，很简单，官网写的很详细了

上面使用到的数据比较大（动辄上万），不好粘贴（我的数据也是捞网站上面的接口数据到本地的）。

官网有mock 数据大家可以看一下

比如这个城市数据：https://a.amap.com/jsapi_demos/static/citys.js

巡航的部分数据：

海量点的数据部分：

vue 使用高德JSapi 实现轨迹回放和海量点效果（点击显示详情提示窗口）采用AMapLoader 和 AMapUI相关推荐

高德地图3D轨迹回放 + 视野跟随功能
高德地图3D轨迹回放 + 视野跟随功能概述代码实现步骤完整代码 (需要添加一个2.0的key) 概述若有帮助到你,麻烦点一波关注,博主会持续推出Echarts,D3,地图,Three.js方面 ...
android 基于高德地图的轨迹回放
android 基于高德地图的轨迹回放前段时间公司项目有一个需求,就是需要看到设备上传之后的轨迹路线,并且可以实现回放的整个过程,功能包括路线回放.地图位置插点.回放之后的轨迹标记颜色.回放加速等功 ...
前端vue js 高德地图实现雷达扫描加载，借鉴百度地图等方法，采用Canvas解决雷达背景透明度问题，解决Canvas动态指针扫描造成浏览器卡顿问题
前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题经过3天的尝试,借鉴了好几个博客的思路,开发了一 ...
VUE使用高德JSAPI和AmapUI
1.地图的安装及引入看官网(下面链接) JS API结合Vue使用-JS API与前端框架结合-教程-地图 JS API v2.0 | 高德地图API 下面是实现效果(非项目最终效果) 2.创建一个d ...
高德SDK 小车轨迹回放，速度、进度控制
TRACK-DEMO-ANDROID TRACK-DEMO-ANDROID 实现高德地图使用Api 实现思路 SeekBar 安卓官方控件设置参数使用 SeekBar.OnSeekBarCha ...
H5移动端高德地图巡查轨迹回放 2.0版
注意是HTTPS还是HTTP index.html引入 <script type="text/javascript" src="http://webapi.amap ...
前端 vue 使用高德地图组件：（二）获取鼠标点击位置坐标和图标覆盖物拖动后的坐标
上一篇文章,我们已经成功加载了地图并设置了自定义的图标覆盖物,但是在业务开发中,对地图的运用肯定不是到此为止,对地图组件的操作经常需要坐标值的参与,这篇文章就是简单介绍下坐标值的获取一:我们可以给地 ...
vue使用高德地图实现多种点样式海量点渲染及信息显示
1.创建地图定义所需变量 data() {return {map: null,styleObjectArr: [],massMarks: null,marker: {},mapData: [],}} ...
高德地图-轨迹回放（二）
利用高德地图作轨迹回放的另一种方法是利用官方api覆盖物中的AMap.Polyline来做,官方给出的例子中也是此原理实现的. 实现地图轨迹的主要函数如下 function track(){map.c ...

vue 使用高德JSapi 实现轨迹回放和海量点效果（点击显示详情提示窗口）采用AMapLoader 和 AMapUI

vue 使用高德JSapi 实现轨迹回放和海量点效果（点击显示详情提示窗口）采用AMapLoader 和 AMapUI相关推荐

最新文章

热门文章

vue 使用高德JSapi 实现轨迹回放和海量点效果（点击显示详情提示窗口） 采用AMapLoader 和 AMapUI

vue 使用高德JSapi 实现轨迹回放和海量点效果（点击显示详情提示窗口） 采用AMapLoader 和 AMapUI相关推荐

最新文章

热门文章

vue 使用高德JSapi 实现轨迹回放和海量点效果（点击显示详情提示窗口）采用AMapLoader 和 AMapUI

vue 使用高德JSapi 实现轨迹回放和海量点效果（点击显示详情提示窗口）采用AMapLoader 和 AMapUI相关推荐