目录
2、在package.json文件中输入下图红框中的两个Mars3D的依赖 ,执行安装命令进行安装
2、删除components文件夹下的HelloWorld.vue文件
3、在components文件夹下再建一个component文件夹,在该文件夹下新建一个index.vue文件
5、运行下面命令,前端出现地球,表明成功在Vue项目中引入Mars3D
项目背景:笔者采用Vue3引入Mars3D后,再调用GeoServer离线发布的图层。
一、创建vue3+vite+ts的项目
1、执行下面命令,进行项目的创建
npm init vite mars
2、项目创建后,进行相关依赖的安装
2.1 执行下面命令,进入项目文件下
cd .\mar\
2.2 执行下面命令,进行依赖的安装
npm install
2.3 执行下面命令,运行整个项目
npm run dev
2.4 运行结果如下所示
二、引入相关依赖
1、依次执行下面命令,引入Mars3D和项目所需的依赖
npm install vite-plugin-mars3d --save-dev
npm install @vitejs/plugin-vue-jsx
npm install @vitejs/plugin-vue
2、在package.json文件中输入下图红框中的两个Mars3D的依赖 ,执行安装命令进行安装
npm install
三、文件配置
1、 配置vite.config.ts文件
// import { defineConfig } from 'vite'
// import vue from '@vitejs/plugin-vue'
// import { defineConfig } from 'vite';
import { mars3dPlugin } from 'vite-plugin-mars3d';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),mars3dPlugin(),vueJsx(),],
})
2、删除components文件夹下的HelloWorld.vue文件
3、在components文件夹下再建一个component文件夹,在该文件夹下新建一个index.vue文件
文件中代码如下:
<template>
<div>
<div id="mars3dContainer" class="mars3d-container"></div>
</div>
</template>
<script lang="ts" setup>
import { onMounted,reactive } from "vue";
import * as mars3d from "mars3d";
onMounted(() => {
var mapOptions = {
basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }],
};
var map = new mars3d.Map("mars3dContainer", mapOptions);
});
</script>
<style scoped >
.mars3d-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
如果运行项目,前端报如下错误,执行下面命令,补装相关依赖。
npm install -D less
4、修改App.vue文件
代码如下图所示:
<template>
<div id="app">
<!-- {{msg}}
<br> -->
<v-index />
</div>
</template>
<script>
import index from './components/component/index.vue'
export default {
// data(){
// return{
// msg:'hello vue'
// }
// },
components:{
'v-index':index
}
}
</script>
<style scoped lang="less">
html, body, #app{
width: 100%;
height: 100%;
margin: 0;
}
</style>
5、运行下面命令,前端出现地球,表明成功在Vue项目中引入Mars3D
npm run dev