布吉做棋牌网站建设哪家便宜,wordpress制作左侧边栏,域名服务器地址,嘉鱼网站建设优化vue3 vite ts 集成mars3d 文章目录vue3 vite ts 集成mars3d前言一、创建一个vue3 vite ts项目二、引入mars3d相关依赖三、vite.config.ts 相关配置四、 新建DIV容器 创建地图前言
使用mars3d过程中#xff0c;需要集成mars3d到自己的项目中#xff0c;mars3d开发教程…vue3 vite ts 集成mars3d 文章目录vue3 vite ts 集成mars3d前言一、创建一个vue3 vite ts项目二、引入mars3d相关依赖三、vite.config.ts 相关配置四、 新建DIV容器 创建地图前言
使用mars3d过程中需要集成mars3d到自己的项目中mars3d开发教程中已经有集成好的项目模板 http://mars3d.cn/doc.html 项目模板gitte地址https://gitee.com/marsgis/mars3d-vue-template/tree/master/mars3d-vue3-vite 如果不想用官方的模板就需要自己集成 一、创建一个vue3 vite ts项目
如何创建项目参考网上的教程这里就不做详细的说明我们直接步入正题。
二、引入mars3d相关依赖
这里使用npm的方式引用 1、引入mars3d
npm install mars3d --save2、引入mars3d-cesium
npm install mars3d-cesium --save到目前为止mars3d最主要的依赖库已经安装好了
三、vite.config.ts 相关配置
参考教程安装mars3d vite插件库 具体配置如下 到这步基本配置就完成了
四、 新建DIV容器 创建地图
1、在app.vue中使用组件main-view 2、创建main-view组件
templatediv idmars3dContainer classmars3d-container/div
/templatescript langts 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);});
};
/scriptstyle langless scoped
/style到这步不出意外的话Mars3d地球已经出来了。
其它问题 这是基本配置可以在public文件夹下新建config文件文件夹下新建config.json文件 http://mars3d.cn/config/config.json
main-view组件改动一下
templatediv idmars3dContainer classmars3d-container/div
/templatescript langts setup
import { onMounted,reactive } from vue;
import * as mars3d from mars3d;onMounted(() {const configUrl ${process.env.BASE_URL}config/config.json;mars3d.Util.fetchJson({ url: configUrl }).then((data) {initMars3d(data.map3d);});
});// const router useRouter()let map: any;
const initMars3d (option: any) {map new mars3d.Map(mars3dContainer, option);// 开场动画// map.openFlyAnimation();// 针对不同终端的优化配置if (mars3d.Util.isPCBroswer()) {map.zoomFactor 2.0; // 鼠标滚轮放大的步长参数// IE浏览器优化if (window.navigator.userAgent.toLowerCase().indexOf(msie) 0) {map.viewer.targetFrameRate 20; // 限制帧率map.scene.requestRenderMode false; // 取消实时渲染}} else {map.zoomFactor 5.0; // 鼠标滚轮放大的步长参数// 移动设备上禁掉以下几个选项可以相对更加流畅map.scene.requestRenderMode false; // 取消实时渲染map.scene.fog.enabled false;map.scene.skyAtmosphere.show false;map.scene.globe.showGroundAtmosphere false;}// //二三维切换不用动画if (map.viewer.sceneModePicker) {map.viewer.sceneModePicker.viewModel.duration 0.0;}
};
/scriptstyle langless scoped
.mars3d-container {width: 100%;height: 100%;overflow: hidden;}
/style
基本上一个炫酷的地球就完成了 如果控制台报 资源图片没有找到 404错误就把官方示例下载下来 把public/img文件拷贝到 对应你的问夹下就可以了 附整个项目结构目录
