vite+vue3 引入Mars3D

最新推荐文章于 2024-06-27 16:08:16 发布
最新推荐文章于 2024-06-27 16:08:16 发布
阅读量243 收藏 5
点赞数 7
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w1314_1314/article/details/139646820
版权

遇到的问题 在自己项目集成Mars3D的时候 使用的官网推荐的插件vite-plugin-mars3d 来集成的时候疯狂报错 项目直接崩了 运行不起来了 所以采用第二种解决方法

1. 下载sdk

官方网址

mars3Dicon-default.png?t=N7T8http://mars3d.cn/download.html下载这两个包

 2. 下载下来的包放入自己项目的public文件

3. 在项目index.html文件导入 

这时候mars3d就挂载到window上面了

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link href="./Mars3D/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
    <link href="./Mars3D/mars3d/mars3d.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="app"></div>
    <script>
      // window.CESIUM_BASE_URL = "./Mars3D/Cesium/" //非必须，如jsp、asp.net等非html框架报错时建议取消注释
    </script>
    <script src="./Mars3D/Cesium/Cesium.js" type="text/javascript"></script>
    <script src="./Mars3D/mars3d/mars3d.js" type="text/javascript"></script>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

4. 页面使用

<template>
  <div id="Container" class="container"></div>
</template>

<script setup lang="ts">
//引入(window as any).Cesium基础库
let map: any;
let tileLayer: any; // 地名
let graphicLayer: any; // 矢量图层对象:any;
let infoMars = () => {
  let mapOptions: any = {
    scene: {
      center: {
        lat: 30.30917976,
        lng: 111.830266,
        alt: 11036414,
        heading: 0,
        pitch: -90,
      },
      showSun: true, // 是否显示太阳。
      showMoon: true,
      showSkyBox: true,
      showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
      fog: true,
      fxaa: true,
      globe: {
        showGroundAtmosphere: false, // 关闭大气（球表面白蒙蒙的效果）
        depthTestAgainstTerrain: false,
        // baseColor: "#3da1f9",
      },
      cameraController: {
        zoomFactor: 3.0,
        minimumZoomDistance: 1,
        maximumZoomDistance: 50000000,
        enableRotate: true,
        enableZoom: true,
      },
      mapProjection: (window as any).mars3d.CRS.EPSG3857, // 2D下展示墨卡托投影
      mapMode2D: (window as any).Cesium.MapMode2D.INFINITE_SCROLL, // 2D下左右一直可以滚动重复世界地图
    },
    control: false,
    basemaps: [
      {
        name: "天地图影像(EPSG:3857)",
        icon: "img/basemaps/tdt_img.png",
        type: "tdt",
        layer: "img_d",
        key: (window as any).mars3d.Token.tiandituArr,
        show: true,
      },
      {
        name: "天地图电子(EPSG:3857)",
        icon: "img/basemaps/tdt_vec.png",
        type: "group",
        layers: [
          {
            name: "底图",
            type: "tdt",
            layer: "vec_d",
            key: (window as any).mars3d.Token.tiandituArr,
          },
          {
            name: "注记",
            type: "tdt",
            layer: "vec_z",
            key: (window as any).mars3d.Token.tiandituArr,
          },
        ],
      },
      {
        name: "天地图地形(EPSG:3857)",
        icon: "img/basemaps/tdt_ter.png",
        type: "group",
        layers: [
          {
            name: "底图",
            type: "tdt",
            layer: "ter_d",
            key: (window as any).mars3d.Token.tiandituArr,
          },
          {
            name: "注记",
            type: "tdt",
            layer: "ter_z",
            key: (window as any).mars3d.Token.tiandituArr,
            // 表示缩小和放大瓦片数据的过滤方式。默认值为LINEAR线性结构，大部分地图调整为最近方式过滤能够有效提升地图清晰度。
            minificationFilter: (window as any).Cesium.TextureMinificationFilter
              .NEAREST,
            magnificationFilter: (window as any).Cesium
              .TextureMinificationFilter.NEAREST,
          },
        ],
      },
      {
        name: "天地图影像(EPSG:4326)",
        icon: "img/basemaps/tdt_img.png",
        type: "group",
        layers: [
          {
            name: "底图",
            type: "tdt",
            layer: "img_d",
            crs: "EPSG:4326",
            key: (window as any).mars3d.Token.tiandituArr,
          },
          {
            name: "注记",
            type: "tdt",
            layer: "img_z",
            crs: "EPSG:4326",
            key: (window as any).mars3d.Token.tiandituArr,
          },
        ],
      },
      {
        name: "天地图电子(EPSG:4326)",
        icon: "img/basemaps/tdt_vec.png",
        type: "group",
        layers: [
          {
            name: "底图",
            type: "tdt",
            layer: "vec_d",
            crs: "EPSG:4326",
            key: (window as any).mars3d.Token.tiandituArr,
          },
          {
            name: "注记",
            type: "tdt",
            layer: "vec_z",
            crs: "EPSG:4326",
            key: (window as any).mars3d.Token.tiandituArr,
          },
        ],
      },
      {
        name: "天地图地形(EPSG:4326)",
        icon: "img/basemaps/tdt_ter.png",
        type: "group",
        layers: [
          {
            name: "底图",
            type: "tdt",
            layer: "ter_d",
            crs: "EPSG:4326",
            key: (window as any).mars3d.Token.tiandituArr,
          },
          {
            name: "注记",
            type: "tdt",
            layer: "ter_z",
            crs: "EPSG:4326",
            key: (window as any).mars3d.Token.tiandituArr,
          },
        ],
      },
      {
        name: "天地图影像(英文)",
        icon: "img/basemaps/tdt_img.png",
        type: "group",
        layers: [
          {
            name: "底图",
            type: "tdt",
            layer: "img_d",
            key: (window as any).mars3d.Token.tiandituArr,
          },
          {
            name: "底图",
            type: "tdt",
            layer: "img_e",
            key: (window as any).mars3d.Token.tiandituArr,
          },
        ],
      },
      {
        name: "天地图电子(英文)",
        icon: "img/basemaps/tdt_vec.png",
        type: "group",
        layers: [
          {
            name: "底图",
            type: "tdt",
            layer: "vec_d",
            key: (window as any).mars3d.Token.tiandituArr,
          },
          {
            name: "底图",
            type: "tdt",
            layer: "vec_e",
            key: (window as any).mars3d.Token.tiandituArr,
          },
        ],
      },
    ],
  };
  map = new (window as any).mars3d.Map("Container", mapOptions);

  // 创建DIV数据图层
  graphicLayer = new (window as any).mars3d.layer.GraphicLayer();
  map.addLayer(graphicLayer);
  // 在layer上绑定监听事件
  let lastClickTime = 0;
  let doubleClickDelay = 300;
  graphicLayer.on(
    (window as any).mars3d.EventType.click,
    function (event: any) {
      let currentTime = new Date().getTime();
      if (currentTime - lastClickTime < doubleClickDelay) {
        // 双击事件的处理逻辑
        console.log("双击了矢量对象", event.graphic.attr.remark);
      } else {
        // 单击事件的处理逻辑，或者不做处理等待可能的第二次点击
        console.log("单击了矢量对象", event.graphic.attr.remark);
      }
      lastClickTime = currentTime;
    }
  );
  addDemoGraphic(graphicLayer);
  addDemoGraphic2(graphicLayer);
  addTileLayer(map);
};
let addTileLayer = (mars: any) => {
  // 方式2：在创建地球后调用addLayer添加图层(直接new对应type类型的图层类)
  tileLayer = new (window as any).mars3d.layer.TdtLayer({
    name: "天地图影像注记",
    layer: "img_z",
    key: (window as any).mars3d.Token.tiandituArr,
  });
  mars.addLayer(tileLayer);
};
let addDemoGraphic = (graphicLayer: any) => {
  const graphic = new (window as any).mars3d.graphic.DivGraphic({
    position: [111.830266, 30.30917976],
    zIndex: 1,
    style: {
      html: `<div class="marsBlackPanel  animation-spaceInDown">
              <div class="marsBlackPanel-text">项目2</div>
              <div class="marsBlackPanel-link"></div>
          </div>`,
      horizontalOrigin: (window as any).Cesium.HorizontalOrigin.CENTER,
      verticalOrigin: (window as any).Cesium.VerticalOrigin.BOTTOM,
      // 高亮时的样式
      highlight: {
        // type: (window as any).mars3d.EventType.click,
        className: "marsBlackPanel-highlight",
      },
    },
    attr: { remark: "示例1" },
  });
  graphicLayer.addGraphic(graphic);
};
let addDemoGraphic2 = (graphicLayer: any) => {
  const graphic = new (window as any).mars3d.graphic.DivGraphic({
    position: [84.237605, 35.163252],
    zIndex: 1,
    style: {
      html: `<div class="marsBlackPanel animation-spaceInDown">
              <div class="marsBlackPanel-text">项目1</div>
              <div class="marsBlackPanel-link"></div>
          </div>`,
      horizontalOrigin: (window as any).Cesium.HorizontalOrigin.CENTER,
      verticalOrigin: (window as any).Cesium.VerticalOrigin.BOTTOM,
      // 高亮时的样式
      highlight: {
        // type: (window as any).mars3d.EventType.click,
        className: "marsBlackPanel-highlight",
      },
    },
    attr: { remark: "示例2" },
  });
  graphicLayer.addGraphic(graphic);
};

onMounted(() => {
  infoMars();
});
</script>

<style lang="scss">
.container {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  border: none;
  overflow: hidden;
  position: relative;
}
.marsBlackPanel {
  padding: .2rem .8rem;
  background-image: linear-gradient(90deg, #2f55e5, #4cbdec);
  color: #FFF;
  border-radius: 4px;
  position: relative;
}
.marsBlackPanel-text {
  color: #FFF !important;
  font-size: .9rem;
}
.marsBlackPanel-link {
  position: absolute;
  height: 10px;
  border: 1px solid #2280a8;
  left: 50%;
  bottom: -10px;
}
.marsBlackPanel-highlight {
  border: 1px solid #FFF;
}
</style>

这样就能生成一个地球了

一城烟雨_
关注
  • 7
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3+vite项目集成mars3d
ccqqasa的博客
03-24 1006
修改 vite.config.ts。修改src\App.vue。
Mars3D/Cesium + VUE3
qq_54665632的博客
01-11 1644
Mars3D/Cesium + VUE3
【mars3d】Vue3项目集成mard3d实现gis空间地理系统
球球博客
06-21 2247
vue3项目集成mars3d框架
mars3d平台Vue3最简的项目模板源码
12-28
https://gitee.com/marsgis/mars3d-vue-template
【mars3d】基于vue3的marsgis通用UI库 mars-ui 的使用
球球博客
06-28 2542
一名脑残程序员的mars-ui心酸使用记录。 通过mars3d的官网我们可以看到，有配套的UI库使用，那么我们如何使用到自己的项目中呢，跟着文章一步一步来吧！ 1、引入UI库 ① 安装ant-design-vue cnpm install ant-design-vue --save ② 下载基于vue开发的mars3d的源码,直通车: git clone https://gitee.com/marsgis/mars3d-vue-project.git，如下图所示，将src/components/mar
Mars3D手把手开发教程（vue3）
ThreeKims的博客
03-21 3579
优化提升与B/S架构设计，支持多行业扩展的轻量级高效能GIS开发平台，能够免安装、无插件地在浏览器中高效运行，并可快速接入与使用多种GIS数据和三维模型，呈现三维空间的可视化，完成平台在不同行业的灵活应用。（6）想要更换地图，更改map.ts文件中的basemaps更换底图，什么天地图，高德图，百度图，蓝色黑色地图等等。通过本文，开发者将获得对Mars3D简单的一些操作，更高级的功能小编还在学习中，期待一起进步。（1）编写一个相机移动视角的函数（三维地图，不再是地图的缩放，而是视角，）
vite创建的项目实现Mars3d地图
m0_63112723的博客
08-16 281
vite创建的项目实现Mars3d地图。
vite+vue3使用模块化批量发布Mockjs接口
03-29
"vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将帮助开发者在实际API未准备好或者不便于调试时，快速模拟后端数据，提高开发...
vite+vue3动态模块化导入并使用pinia
03-25
在"vite+vue3动态模块化导入并使用pinia"的项目中，我们可以通过以下步骤实现动态模块化导入和使用Pinia： 1. **配置Vite**：在`vite.config.js`中，我们需要配置Vue3和Pinia的插件，如`@vitejs/plugin-vue`和`vite...
electron+vite+vue3+sqlite3基础框架
12-14
总结起来，"electron+vite+vue3+sqlite3基础框架"是一个为开发桌面应用提供便利的工具集合，它结合了现代前端的最佳实践，为开发者创造了一个高效、易用的开发环境。无论是对于新手还是经验丰富的开发者，这个框架都...
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
基于vite+vue3+pinia+element-plus+ts后台管理系统
04-08
【标题】"基于vite+vue3+pinia+element-plus+ts后台管理系统"是一个现代的前端开发框架，用于构建高效、可扩展的企业级后台管理界面。这个项目整合了多种前沿的技术，旨在提供一个功能全面、性能优异的解决方案，...
Vue3项目中集成mars3D简单三部曲
weixin_70027586的博客
12-13 1205
Vue3项目中集成mars3d
Vue3项目引入Mars3D（vite 技术栈）
m0_62498143的博客
04-24 1491
项目背景：笔者采用Vue3引入Mars3D后，再调用GeoServer离线发布的图层。
关于vite 如何安装 mars3d
weixin_46212682的博客
02-08 471
关于vite 如何安装 mars3d
vue3+vite+多页面应用(MPA)示例
dugucike的专栏
05-11 2038
多页面应用无非就是单页面应用的扩展，如主页index.html,管理后台account/admin.html,购物车cart/cart.html,用户后台user/userhome.html，需要配置三个地方：根目录放挂载文件，vite.config.ts配置入口文件路径，具体资源文件编写。新建各应用挂载点文件，index.html, /account/index.html, /cart/cart.html, /user/userhome.html。密码：
mars3d基于vue3.0的widget使用
m0_69803146的博客
02-23 1237
mars3d基于vue3.0的widget使用
vite-plugin-mars3d插件最近版本打包问题
最新发布
m0_69803146的博客
06-27 372
vite-plugin-mars3d插件最近版本打包报错处理备忘
electron+vite+vue3
07-27
Electron + Vite + Vue3 是一个强大的组合，可以用于开发跨平台的桌面应用程序。 Electron 是一个基于 Chromium 和 Node.js 的开源框架，它允许使用 Web 技术（HTML、CSS 和 JavaScript）来构建跨平台的桌面应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值