vue3使用mars3

以下是在Vue3项目中集成mars3d的步骤：

1.安装mars3d

npm install mars3d --save

2.在Vue3项目中引入mars3d

import * as mars3d from 'mars3d'

3.在Vue3项目中创建地球容器

<template>
  <div id="mars3dContainer"></div>
</template>

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      // 创建地球容器
      const viewer = new mars3d.Viewer('mars3dContainer')
    })
  }
}

4.在Vue3项目中加载地图

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      // 创建地球容器
      const viewer = new mars3d.Viewer('mars3dContainer')

      // 加载地图
      viewer.scene.gisdata.viewer.load('http://data.marsgis.cn/tdtvec/tdtvec_3857.xml')
    })
  }
}

5.在Vue3项目中添加图层

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      // 创建地球容器
      const viewer = new mars3d.Viewer('mars3dContainer')

      // 加载地图
      viewer.scene.gisdata.viewer.load('http://data.marsgis.cn/tdtvec/tdtvec_3857.xml')

      // 添加图层
      const layer = new mars3d.layer.TileLayer({
        name: '天地图矢量图层',
        url: 'http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=您的密钥',
        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
        maximumLevel: 18
      })
      viewer.scene.gisdata.viewer.addLayer(layer)
    })
  }
}