vue项目总使用高德API的轨迹展示巡航

先上效果图
刚接触高德API功能大致能实现但有些地方也不是很清楚，此文章仅做参考

官方示例：https://lbs.amap.com/demo/amap-ui/demos/amap-ui-pathsimplifier/index
index.html文件

index.html文件
<script type="text/javascript">window._AMapSecurityConfig = {securityJsCode:'申请的高德api的key',  // 高德地图安全密钥，不推荐直接写死，可查看 https://lbs.amap.com/api/javascript-api/guide/abc/prepare }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=申请的高德api的key"></script>
<script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>

mapUtils.js文件

export const siteBoundsMap = () => {const map = new AMap.Map("allmap", {resizeEnable: true,zoom: 5,center: [121.47, 31.23],// mapStyle: 'amap://styles/grey', //设置地图的显示样式layers:[new AMap.TileLayer({zIndex:6,opacity:1,})]})AMap.plugin(['AMap.ToolBar','AMap.DistrictSearch'],function(){ // 异步加载插件var toolbar = new AMap.ToolBar({  // 地图控件position:{ top: 0, left: 0 }});var districtsearch = new AMap.DistrictSearch({  // 给地图增加遮罩层，只显示出中国地图extensions:'all',subdistrict:0}).search('中国',function(status,result){// 外多边形坐标数组和内多边形坐标数组var outer = [new AMap.LngLat(-360,90,true),new AMap.LngLat(-360,-90,true),new AMap.LngLat(360,-90,true),new AMap.LngLat(360,90,true),];console.log(status,result)var holes = result.districtList[0].boundariesvar pathArray = [outer];pathArray.push.apply(pathArray,holes)var polygon = new AMap.Polygon({pathL:pathArray,strokeColor: '#D4C491',strokeWeight: 1,fillColor: 'white',fillOpacity: 1});polygon.setPath(pathArray);map.add(polygon)})map.addControl(toolbar,districtsearch);}); // 地图控件return map}

组件中使用

<template><div id=" "><div id="allmap"></div></div>
</template><script>
var map;
import { siteBoundsMap } from "../../util/mapUtils"; // 这里我实在mapUtils.js文件中做的地图初始化
import {routeList} from "./cityList"
import img from "../../assets/img.png"
export default {data(){return {navgtrSpeed:100000, //播放速度navgtr:"",pathLsit:"",routePath: []}},watch:{ },created(){},mounted(){this.routePath = routeListthis.init()this.routeLine()},methods:{init: () => {map = siteBoundsMap();},routeLine(){let self = thisAMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {if (!PathSimplifier.supportCanvas) {alert('当前环境不支持 Canvas！');return;}//just some colorsvar colors = ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00","#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707","#651067", "#329262", "#5574a6", "#3b3eac"];var pathSimplifierIns = new PathSimplifier({zIndex: 100,//autoSetFitView:false,map: 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: {pathLineStyle: {dirArrowStyle: true},getPathStyle: function(pathItem, zoom) {var color = colors[pathItem.pathIndex % colors.length],lineWidth = Math.round(4 * Math.pow(1.1, zoom - 3));return {pathLineStyle: {strokeStyle: color,lineWidth: lineWidth},pathLineSelectedStyle: {lineWidth: lineWidth + 2},pathNavigatorStyle: {fillStyle: color}};}}});window.pathSimplifierIns = pathSimplifierIns;// $('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);// $.getJSON('https://a.amap.com/amap-ui/static/data/big-routes.json', function(d) {// console.log(self);// $('#loadingTip').remove();var flyRoutes = [];for (var i = 0, len = self.routePath.length; i < len; i++) {if (self.routePath[i].name.indexOf('乌鲁木齐') >= 0) {// console.log('daonali',i);// self.routePath.splice(i, 0, {// name: '飞行 - ' + self.routePath[i].name,// routePath: PathSimplifier.getGeodesicPath(//     self.routePath[i].routePath[0], self.routePath[i].routePath[self.routePath[i].routePath.length - 1], 100)// });i++;len++;}}self.routePath.push.apply(self.routePath, flyRoutes);pathSimplifierIns.setData(self.routePath);// initRoutesContainer(self.routePath);// function onload() {pathSimplifierIns.renderLater();// }// function onerror(e) {// alert('图片加载失败！');// }//创建一个巡航器var navg0 = pathSimplifierIns.createPathNavigator(0, {loop: true, //循环播放speed: 500000,//pathNavigatorStyle: { // 路线的样式 不加 就是默认样式，见效果图//width: 24,//height: 24,//使用图片时，需要现在当前页面import引入该图片//content: PathSimplifier.Render.Canvas.getImageContent(img, onload, onerror),//strokeStyle: null,//fillStyle: null,//经过路径的样式//pathLinePassedStyle: {//lineWidth: 6,//strokeStyle: 'black',//dirArrowStyle: {//stepSpace: 15,//strokeStyle: 'red'//}//}//}});navg0.start();// });});}}
}
</script><style lang="less" scoped>
#UnmannedDrone{width: 100%;height: 100%;
}
</style>

routePath为起始点-终点经纬度,大体格式如下https://a.amap.com/amap-ui/static/data/big-routes.json为高德提供的经纬度地址

routeList = [{"name": "北京 -> 乌鲁木齐","path": [[116.405289,39.904987],[87.61792,43.793308]]}]

vue项目总使用高德API的轨迹展示巡航相关推荐

【vue+百度地图】vue项目使用百度地图API（普通展示）
方法来自大神[超华] 1.进入百度API 操作官网:https://lbsyun.baidu.com 根据官网流程: 登录自己的百度账号-> 申请然后点击邮箱内获取的新链接-> 填写自己需 ...
在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者登陆之后,在进入「应用管理」页面「创建新应用 ...
在vue项目中使用高德地图
需求很重要,有需求你才有努力解决问题的方向,加油! 在我们使用vue构建项目的时候,难免在业务需求上会遇到使用高德地图的时候,这时候问题就来了. 我们该怎么在vue项目中插入高德地图?通过度娘我知道了 ...
vue项目Echarts更新数据是数据表展示错版
vue项目Echarts更新数据是数据表展示错版当我们第一次渲染数据的时候,echarts渲染是正常的,但是当我们的数据更新的时候,展示的图表会出现错版现象,其中最常见的是曲线图. 比如下面,刚开始 ...
vue 项目中使用高德地图
官方文档: 高德地图API官网高德地图2.0参考手册高德地图JS API 2.0 示例在项目中使用 vue-amap 高德地图JSAPI在Vue框架下使用高德地图在线 JS API 示例一. ...
Vue项目使用百度地图api
目录 1.百度开发者认证 2.创建应用 3.引用百度地图API文件 4.展示地图 1.百度开发者认证进入百度地图开放平台官网,(认证需要身份证号码,人脸识别,手机百度APP,邮箱地址) 注册登录完 ...
vue项目调用百度地图api 学习总结
一.安装百度地图插件: npm install vue-baidu-map –save 二.在vue项目首页index.html进入插件: 注:src里的http必须要写如果不写会出现bug! ! ! ...
高德python解决租房项目费用_高德API+Python解决租房问题
项目简介:编写Python脚本爬取某租房网站的房源信息,利用高德的 js API 在地图上标出房源地点,划出距离工作地点1小时内可到达的范围,附上公交路径规划功能查看不同路径的用时.项目由ekCit发 ...
vue项目中调用高德地图vue-amap 插件的AMap.PlaceSearch简用
vue项目调用高德地图vue-amap 插件的AMap.PlaceSearch简用结合 elementui 的 el-input 直接下拉选取地点不展示地图 1.下载 npm install v ...
vue项目中使用高德地图获取用户当前位置信息
项目背景是用vue开发的小程序,需要获取当前用户的地理位置,折腾了好久终于弄好了,今天分享给大家,话不多说,let's go! 第一步:在index.html页面引入高德地图 <script t ...

vue项目总使用高德API的轨迹展示巡航

vue项目总使用高德API的轨迹展示巡航相关推荐

最新文章

热门文章