C:Userssuper-starDesktopicegl-three-vue-tressrcpluginssimpleGISpagesmapBuildings.vue
想在此组件的基础上集成一个路径规划的功能,查阅了相关逻辑发现地图api逻辑在组件C:Userssuper-starDesktopicegl-three-vue-tressrcpluginssimpleGIScomponentstileMapBuildingsMesh.vue 中,逻辑大概在这,使用的是satellite-map的相关逻辑,使用的是高德的瓦片图层的api,再查阅了高德路径规划的api,发现两者用的api接口也不一样
const mapProvider = new MapProvider()
// mapProvider.source = 'https://mts2.google.com/vt/lyrs=s&hl=zh-CN&x=[x]&y=[y]&z=[z]'
// mapProvider.source = 'https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s&x=[x]&y=[y]&z=[z]'
mapProvider.source = 'https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
// mapProvider.source = 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
mapProvider.showTileNo = false
mapProvider.useWorker = true
// mapProvider.debug = true
const meshProvider = new TerrainMeshProvider(planProvider, mapProvider)
meshProvider.showBoundingBox = false
meshProvider.wireframe = false
meshProvider.flatShading = false
以下是高德的demo
var map = new AMap.Map("container", {
resizeEnable: true,
center: [116.397428, 39.90923],//地图中心点
zoom: 13 //地图显示的缩放级别
});
//构造路线导航类
var driving = new AMap.Driving({
map: map,
panel: "panel"
});
// 根据起终点经纬度规划驾车导航路线
driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719), function (status, result) {
// result 即是对应的驾车导航信息,相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === 'complete') {
log.success('绘制驾车路线完成')
map.setCenter([116.442581,39.882498])
} else {
log.error('获取驾车数据失败:' + result)
找了gpt也无法解决,想请教各位大佬有没有什么思路在改动情况不大的情况下添加路径规划的功能!
这个肯定是不对的,您提到的tvt插件中 只接入了 'https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}' 这个瓦片的接口,说白了,就是拿到图片 画出来。 而行程规划 属于AMap本身的,您还建了一个 container, 是融合不了的
需要考虑从AMap 接口 ,直接拿到行程规划的 路径点集合 再操作