Vue + 高德轨迹播放(二)

1,608 阅读3分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

衔接上一篇的高德轨迹播放记录,这一篇将在高德地图最新版本2.x的基础上进行开发,第一次用2.x版本内心还是慌的一比,希望少踩一些坑。。。

高德地图2.x版本

1.x2.x 版本还是有很多变动的, 地图 JSAPI 2.0 是高德开放平台免费提供的第四代 Web 地图渲染引擎, 以 WebGL 为主要绘图手段,广泛采用了各种前沿技术,交互体验、视觉体验大幅提升。兼容 IE9及以上的所有浏览器环境2.x版本示例中心

Animation.gif

地图声明文件

全局声明文件

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();

Animatio11111111n.gif

项目变动

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视图存在的问题 image.png 最后还是2D模式的演示图 222222222.gif

总结

对比两种方法,我感觉还是第二种方案更加灵活,可配置,可拓展的功能比较多,方案一应用动画功能比较多,画面流畅,但是动画就是不易控制过程,若要在行驶途中进行设置的话,只能重新设置动画才能起效,需求要求不多的话,可以考虑用下,希望有经验的大佬指正交流,一起进步!