使用mars3d绘制矢量数据，页面中不显示

在vue中使用mars3d，尝试实现官方模板的示例。效果如下:

 

首先引入相关资源，使用npm安装

npm i mars3d -S
复制代码

webpack相关配置参考官方github vue.config.js。然后将官方提供的 vue3.0的map组件也拷贝到项目中 MarsMap

准备就绪开始实现功能。

<template>

<MarsMap :url="configUrl" map-key="test" @οnlοad="marsOnload" />

</template>

<script setup>

import { ref } from "vue"

import MarsMap from "@comp/MarsMap/index.vue"

import * as mars3d from "mars3d"

const Cesium = mars3d.Cesium

const marsOnload = map => {

}

</script>

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

const graphicLayer = new mars3d.layer.GraphicLayer()

map.addLayer(graphicLayer)

const graphic = new mars3d.graphic.LabelEntity({

position: new mars3d.LatLngPoint(116.1, 31.0, 1000),

style: {

text: "hello world",

font_size: 25,

font_family: "楷体",

color: "#003da6",

outline: true,

outlineColor: "#bfbfbf",

outlineWidth: 2,

horizontalOrigin: Cesium.HorizontalOrigin.CENTER,

verticalOrigin: Cesium.VerticalOrigin.BOTTOM, visibleDepth: false

}

})

graphicLayer.addGraphic(graphic)

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

1. 修改地图配置，找到config.json,在scene参数中修改center选项，将地图显示的中心设置在矢量数据附近的位置："center": { "lat": 30.526361, "lng": 116.335987, "alt": 45187, "heading": 0, "pitch": -45 }
2. 或者是使用flyTo：graphic.flyTo()

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