目录
衔接上一篇的高德轨迹播放记录,这一篇将在高德地图最新版本2.x
的基础上进行开发,第一次用2.x
版本内心还是慌的一比,希望少踩一些坑。。。
高德地图2.x
版本
1.x
和 2.x
版本还是有很多变动的, 地图 JSAPI 2.0
是高德开放平台免费提供的第四代 Web
地图渲染引擎, 以 WebGL
为主要绘图手段,广泛采用了各种前沿技术,交互体验、视觉体验大幅提升。兼容 IE9及以上的所有浏览器环境,2.x版本示例中心
地图声明文件
全局声明文件
declare global {
namespace AMap {
const addCss: (newStyle: string) => void;
export interface Area {
visible: boolean;
rejectTexture: boolean;
color1: string;
color2: string;
path: any[];
}
interface BaseLayer {
hide(): void;
show(zIndex: number): void;
add(vectors: VectorOverlay | VectorOverlay[]): void;
remove(vectors: VectorOverlay | VectorOverlay[]): void;
has(vector: any): boolean;
clear(): void;
setOptions(opts: any): void;
}
.....
}
LOCA 数据可视化 API 2.0
图层容器和图层控制器的官网示例
// 创建地图
var map = new AMap.Map('map', {
showLabel: false,
viewMode: '3D',
pitch: 50,
zoom: 12, //初始化地图层级
center: [121.496534, 31.243335] //初始化地图中心点
});
// 创建loca
var loca = new Loca.Container({
map: map,
});
// 环境光
loca.ambLight = {
intensity: 0.8, // 环境光强度,建议值: 0~1
color: '#fff', // 环境光颜色
};
// 平行光
loca.dirLight = {
intensity: 0.5, // 光照强度,建议值: 0~1
color: 'rgb(255,255,255)', // 平行光颜色
target: [0, 0, 0], // 光射向的目标位置
position: [0, -1, 1], // 坐标位置
};
// 点光
loca.pointLight = {
color: 'rgb(255,255,255)', // 点光颜色
position: [121.50741577148439, 31.236288641793006, 1000], // 点光的位置
intensity: 4, // 光照强度
// 距离表示从光源到光照强度为 0 的位置,0 就是光不会消失。
distance: 10000,
};
// 创建各种图层
todo: ...
// 开启动画
loca.animate.start();
// 暂停动画
loca.animate.pause();
// 停止动画
loca.animate.stop();
项目变动
package
依赖包变化
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@amap/amap-jsapi-types": "^0.0.8"
}
地图依赖包配置,这一步要小心,包的版本号要匹配好
// 高德可视化地图引入方法
import AMapLoader from '@amap/amap-jsapi-loader';
Vue.use(AMapLoader);
// 地图加载函数
AMapLoader.load({
"key": process.env.VUE_APP_MAP_KEY, // 申请好的Web端开发者Key,首次调用 load 时必填
"version": "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
"plugins": [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
"AMapUI": { // 是否加载 AMapUI,缺省不加载
"version": '1.1', // AMapUI 缺省 1.1
"plugins":['overlay/SimpleMarker'], // 需要加载的 AMapUI ui插件
},
"Loca":{ // 是否加载 Loca, 缺省不加载
"version": '2.0.0' // Loca 版本,缺省 1.3.2
},
}).then(() => {
// todo
// 加载成功获取地图实例后的操作
}).catch(error => { // 地图加载错误的捕获
console.log(error);
})
使用可视化地图图层容器控制器
// 创建地图实例
this.mapRoadIns = new AMap.Map('mapLoca', {
viewMode: '3D',
zoom: 11.8,
center: [121.304018, 31.217688],
mapStyle: 'amap://styles/bf648dad78e5b49b24f02d7d8e069bde',
showBuildingBlock: false,
showLabel: false,
})
// 建立图层的容器和控制器
this.locaIns = new Loca.Container({
map: this.mapRoadIns,
})
巡航器实例
高德地图巡航器官方示例
// 创建巡航器实例
AMapUI.load(['ui/misc/PathSimplifier'], (PathSimplifier) => {
if (!PathSimplifier.supportCanvas) {
alert('当前环境不支持 Canvas!');
return;
}
window.PathSimplifier = PathSimplifier
window.pathSimplifierIns = pathSimplifierIns;
setTimeout(() => {
this.setGpsTrackList()
})
开发中的问题
巡航轨迹和地图对应不上,个人觉得是异步问题,导致点位不一致,解决方法样式补偿
position: relative;
width: 100%;
height: 100%;
}
.amap-ui-pathsimplifier-container canvas {
left: 0;
right: 0;
height: 100%;
width: 100%;
}
最终的效果
3D视图存在的问题
最后还是2D模式的演示图
总结
对比两种方法,我感觉还是第二种方案更加灵活,可配置,可拓展的功能比较多,方案一应用动画功能比较多,画面流畅,但是动画就是不易控制过程,若要在行驶途中进行设置的话,只能重新设置动画才能起效,需求要求不多的话,可以考虑用下,希望有经验的大佬指正交流,一起进步!