在vue中使用mars3d，尝试实现官方模板的示例。效果如下
    image.png
    首先引入相关资源，使用npm安装

    1. npm i mars3d -S

    webpack相关配置参考官方github vue.config.js。然后将官方提供的 vue3.0的map组件也拷贝到项目中 MarsMap
    准备就绪开始实现功能。

    1. <template>
    2.   <MarsMap :url="configUrl" map-key="test" @onload="marsOnload" />
    3. </template>
    4. <script setup>
    5. import { ref } from "vue"
    6. import MarsMap from "@comp/MarsMap/index.vue"
    7. import * as mars3d from "mars3d"
    8. const Cesium = mars3d.Cesium
    10. const marsOnload = map => {
    11. }
    12. </script>

    此时地图已经成功渲染，接下来绘制矢量数据

    1. const graphicLayer = new mars3d.layer.GraphicLayer()
    2. map.addLayer(graphicLayer)
    4. const graphic = new mars3d.graphic.LabelEntity({
    5.   position: new mars3d.LatLngPoint(116.1, 31.0, 1000),
    6.   style: {
    7.     text: "hello world",
    8.     font_size: 25,
    9.     font_family: "楷体",
    10.     color: "#003da6",
    11.     outline: true,
    12.     outlineColor: "#bfbfbf",
    13.     outlineWidth: 2,
    14.     horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    15.     verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    16.     visibleDepth: false
    17.   }
    18. })
    19. graphicLayer.addGraphic(graphic)

    刷新页面发现，并没有看到绘制的图形。原因是因为，当前矢量数据绘制的位置，不在当前地图的显示区域，有两种解决方式：

    1. 修改地图配置，找到config.json,在scene参数中修改center选项，将地图显示的中心设置在矢量数据附近的位置

      1. "center": { "lat": 30.526361, "lng": 116.335987, "alt": 45187, "heading": 0, "pitch": -45 }

    2. 使用flyTo

      1. graphic.flyTo()

      原理很简单，因为问题是地图中心不在矢量数据附近导致的，所以通过以上的某种方式，移动显示区域到矢量数据的位置就可以了。