赞
踩
目录
2、在package.json文件中输入下图红框中的两个Mars3D的依赖 ,执行安装命令进行安装
2、删除components文件夹下的HelloWorld.vue文件
3、在components文件夹下再建一个component文件夹,在该文件夹下新建一个index.vue文件
5、运行下面命令,前端出现地球,表明成功在Vue项目中引入Mars3D
项目背景:笔者采用Vue3引入Mars3D后,再调用GeoServer离线发布的图层。
npm init vite mars
cd .\mar\
npm install
npm run dev
npm install vite-plugin-mars3d --save-dev
npm install @vitejs/plugin-vue-jsx
npm install @vitejs/plugin-vue
npm install
- // 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(),],
- })
文件中代码如下:
- <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>
![](https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png)
如果运行项目,前端报如下错误,执行下面命令,补装相关依赖。
npm install -D less
代码如下图所示:
- <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>
![](https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png)
npm run dev
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。