地图导航 Cesium+Vue2+高德地图

1. 创建项目
   前言：环境：vue2+node10.16.3+cli@3.0.3。开发平台：vscode。经过尝试，cesium似乎只能在cli3及以上安装，故如果脚手架版本低于3.需要先卸载再安装3.或者以上版本。
   卸载

   //卸载3.之前的版本
   npm uninstall -g wue-cli
   //安装3.0.3版本
   npm instal1 -g @vue/cli@3.0.3
   

   Cesium是一个用于创建地球和空间可视化应用程序的开源JavaScript库。它的名字“Cesium”来源于铯元素（cesium），这是一种稀有金属元素，是地球上化学元素中最稀有的金属之一。
   Cesium库最初由美国宾夕法尼亚州卡内基梅隆大学的一支研究团队开发。他们最初的目标是创建一个用于实时三维地球可视化的框架，并且能够在Web浏览器上运行。他们想要实现一个高性能、交互式的地理信息系统（GIS），使用户能够在地球上自由导航和可视化各种地理数据。
   为了实现这个目标，Cesium利用了WebGL技术，这是一种用于在Web浏览器上进行硬件加速的图形库。Cesium库使用JavaScript语言作为主要编程语言，可以通过其他编程语言（如Java、C++等）提供的接口进行扩展。
   Cesium库的核心功能包括地球、地图和卫星图像的呈现，以及地理数据的可视化和交互。它还支持地理坐标系的转换和投影，以及各种地理信息的分析和操作。
   随着时间的推移，Cesium库不断发展和完善，并成为一个广泛使用的工具，被许多应用程序和项目用于创建各种地球和空间可视化应用。它的开发者社区也越来越庞大和活跃，为Cesium库的功能扩展和改进提供了持续的支持和贡献。
   

2. 安装cesium
   在项目终端安装

   npm install cesium --save
   

   安装后可在项目 node_modules 中找到 cesium 文件夹。找到该文件夹下 Build/Cesium 文件夹并将其复制到 根目录下public文件夹下，然后打开index.html 加入如图所示：
   
3. 使用
   将cesium封装成 js文件，然后再组件中导入使用。如果运行出现报错，是因为eslint检查，在package.json中加入：（参考原文链接Cesuim+vue环境配置（简易））

   "globals": {
       "Cesium": true
     }
   

   实例化

   this.viewer = new Cesium.Viewer(dom, {
     homeButton: true, // 回到我们最开始的视角 ——可自定义
     sceneModePicker: true, // 地图显示的维度控制选择，提供 二维平面 和 三维球体 两种方式
     baseLayerPicker: false, // 影像切换 提供了一些底图
     animation: false, // 是否显示动画控件
     timeline: false, // 是否显示时间线控件
     infoBox: false, // 是否显示点击要素之后显示的信息
     selectionIndicator: false, // 要素选中框
     fullscreenButton: false, // 全屏按钮
     geocoder: false, // 是否显示地名查找控件
     shouldAnimate: false,
     navigationHelpButton: false, // 是否显示帮助信息控件
     // 加载天地图
     // imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
     //   url:
     //     "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=ec3a65bacd60a096968f0e4911405eb7",
     //   layer: "tdtBasicLayer",
     //   style: "default",
     //   format: "image/jpeg",
     //   tileMatrixSetID: "GoogleMapsCompatible",
     //   show: false,
     //   mininumLevel: 0,
     //   maximumLevel: 16
     // })
   })
   

   加载高德影像地图，UrlTemplateImageryProvider该接口是加载谷歌地图服务的接口

   this.viewer.imageryLayers.addImageryProvider(
     new Cesium.UrlTemplateImageryProvider({
       url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
       layer: 'tdtVecBasicLayer',
       style: 'default',
       format: 'image/png',
       tileMatrixSetID: 'GoogleMapsCompatible',
       show: false,
     })
   )
   

   如果需要叠加高德注记地图则添加以下代码

   this.viewer.imageryLayers.addImageryProvider(
     new Cesium.UrlTemplateImageryProvider({
       url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
       layer: 'tdtAnnoLayer',
       style: 'default',
       format: 'image/jpeg',
       tileMatrixSetID: 'GoogleMapsCompatible',
     })
   )
   

   将三维球定位到中国

   this.viewer.camera.flyTo({
     destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
     orientation: {
       heading: Cesium.Math.toRadians(348.4202942851978),
       pitch: Cesium.Math.toRadians(-89.74026687972041),
       roll: Cesium.Math.toRadians(0)
     },
     complete: function callback () {
       // 定位完成之后的回调函数
     }
   })
   

   效果：
   

自定义home定位

	// 修改homeButton的默认返回位置-定位到中国
    let _this = this
    this.viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
      e.cancel = true;
      _this.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
      })
    })

去掉版权信息

this.viewer._cesiumWidget._creditContainer.style.display = "none";

接入高德地图web
需要先注册获取key
1）地理编码与逆地理编码
2）路径编码
展示：

最后，如果中途出现未知报错，可以尝试重新启动项目，或许能解决哦~（似乎更改到cesium的配置都需要重新启动项目）

一些参考：
[Cesium+Vue实战教程——地图导航](https://zhuanlan.zhihu.com/p/592099816)
[vue2 使用 cesium 篇 【第一篇】](https://blog.csdn.net/weixin_42776111/article/details/129022953)