概述

本文将mapboxGL和高德地图API结合起来，实现路径规划。

效果

实现

高德地图路径规划API说明如上图，有行走、公交、驾车等多种路径，本文以行走为例来说明。

添加点、线图层

map.on('load', function() {var geojson = {'type': 'FeatureCollection','features': []};map.addSource('path', {type: 'geojson',data: geojson});map.addSource('points', {type: 'geojson',data: geojson});map.addLayer({id: 'path',type: 'line',source: 'path','paint': {'line-color': '#4ddc26','line-width': 5}});map.addLayer({id: 'points',type: 'circle',source: 'points','paint': {'circle-color': ['match',['get', 'type'],'起', '#62b500','#f54336' // 无匹配值],'circle-radius': 13}});map.addLayer({'id': 'label','type': 'symbol','source': 'points','layout': {'text-field': ['get', 'type'],"text-size": 12},paint: {'text-color': '#ffffff'}})
})

开始路径查询

startDraw() {that.isDraw = true;that.points = [];map.getCanvas().style.cursor = 'crosshair';var geojson = {'type': 'FeatureCollection','features': []};map.getSource('path').setData(geojson);map.getSource('points').setData(geojson);
}

注册点击事件

map.on('click', e => {var lngLat = e.lngLat;if(that.isDraw) {that.points.push([lngLat.lng, lngLat.lat]);that.drawPoints();if(that.points.length === 2) {that.getRoute();}}
});

路径查询与渲染

getRoute() {that.isDraw = false;map.getCanvas().style.cursor = '';const url = 'https://restapi.amap.com/v3/direction/walking';var start = that.points[0].map(res => {return res.toFixed(5);});var end = that.points[1].map(res => {return res.toFixed(5);});var params = {key: that.key,origin: start.join(','),destination: end.join(',')};$.get(url, params, res => {that.paths = res.route.paths;var geojson = {'type': 'FeatureCollection','features': []};for(var i = 0;i<that.paths.length;i++) {var steps = that.paths[i].steps;for(var j = 0;j<steps.length;j++) {var step = steps[j];var polyline = step.polyline;polyline = polyline.split(';');polyline = polyline.map(p => {return p.split(',').map(Number);});var feat = {type: 'Feature',properties: {},geometry: {type: 'LineString',coordinates: polyline}};geojson.features.push(feat);}}map.getSource('path').setData(geojson);})
},
drawPoints() {var geojson = {'type': 'FeatureCollection','features': []}for(var i = 0;i<that.points.length;i++) {var type = i=== 0? '起' : '终';var p = that.points[i];geojson.features.push({type: 'Feature',geometry: {type: 'Point',coordinates: p},properties: {'type': type}})}map.getSource('points').setData(geojson);
}

mapboxGL和高德API结合实现路径规划相关推荐

高德地图WebAPI : 驾车路径规划
参考API 一个demo 获取路径规划返回结果中的两点间最短驾车距离 import java.io.BufferedReader; import java.io.BufferedReader; imp ...
python从高德api获取公交线路规划信息
从高德api获取公交线路规划信息类似于爬虫,由于本人不会爬虫,因此简单说说如何实现直接上代码 import os import requests import math import json im ...
android高德地图线路,独立路径规划-路线规划-开发指南-Android 导航SDK | 高德地图API...
基本介绍独立路径规划是指路径规划的结果不会自动应用于当前导航,也不会干扰当前的导航,需要手动调用API传入路径规划结果来开始导航.可用于不干扰本次导航的单独路径规划场景,比如路线预览等.适用于驾车/ ...
基于高德地图的APP路径规划开发
一.初始化一个APP项目参见我的上一篇文章:https://blog.csdn.net/QiwzDeBLOG/article/details/84701746 前期准备: 我的项目名称:AmapTe ...
mapboxgl 和高德api获取周边场所及交通信息
mapboxgl 配合高德地图api搜索周围的交通(公交.地铁)及教育医疗等场所信息实现效果: 此处还有高德地图坐标偏移问题待解决步骤: 先npm安装并引入mapboxgl import mapb ...
python路径规划仿真实验_【python实战】批量获得路径规划——高德地图API
1.需求在上篇中,已经批量获得了经纬度信息,现在需要根据经纬度来进行路径规划,想知道两点之间的距离和路程.花费等信息. 这时候就需要用到高德地图API中的路径规划功能了. 2.过程 1. 构造经纬度 ...
高德地图货车路径规划JS API以及WEB API在VUE中使用方法
做一个路径规划系统,使用到了高德地图的API以及VUE,而路径规划方面在高德地图中,货车的接口使用次数是极为有限的,研究了一段时间,所以使用的时候要谨慎一点次数. 本文记录一下高德地图的JS API和 ...
python调用高德地图api获取路径规划，然后规划好点显示在地图上（农机路径转移）
我的博客好像跳度比较大,不少内容都涉及,但我是做ros组合导航的,其他的或者是项目设计,或者是因为兴趣,或者是随笔记下来. 无聊写来玩下的小demo,本来试图在硕士期间研究下这个课题即农机从仓库到田间 ...
高德地图API路径规划结果清除
关于高德地图API之路径规划结果的清除(js API) 偶然用到高德地图API做路径规划,在做的过程中发现连续进行不同的路径规划产生的结果是叠加的.如何清除上一次的路径规划呢?开发手册上有一个 cle ...

mapboxGL和高德API结合实现路径规划

概述

效果

实现

mapboxGL和高德API结合实现路径规划相关推荐

最新文章

热门文章