vite+vue3 引入Mars3D

最新推荐文章于 2025-05-23 11:43:52 发布
原创 最新推荐文章于 2025-05-23 11:43:52 发布 · 651 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

遇到的问题 在自己项目集成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>

这样就能生成一个地球了

一城烟雨_
关注
【Mars3D项目实战开发】vue3+vite搭建配置项3维地球
莫言情怼的博客
12-31 605
Mars3D基础地球。
Vue2项目使用mars3d
qq_44922719的博客
08-02 3297
vue2中使用mars3d地图，
关于vite 如何安装 mars3d
weixin_46212682的博客
02-08 607
关于vite 如何安装 mars3d
mars3d-创建地球（vite+vue）
Hjiehahah的博客
06-22 1474
如果没有vite 环境，需要安装Vite，Vite 需要 Node.js 12.0.0以上，否则无法使用。 安装好node环境后，全局安装 vite ： npm install @vitejs/app -g安装成功之后创建项目使用命令行 npm init @vitejs/app + 你的项目名 例如（npm init @vitejs/app mars3d-study）之后会出现以下界面 ，按上下键选择vue即可等待安装完成，可以用vscode或其他编辑器打开你的项目文件目录，例如我的 之后就可以输入 np
在Vue3 + Vite 项目安装使用 Tailwind CSS 4.0报错
最新发布
xxfen_的博客
05-23 634
报错信息显示，插件externalize-deps无法解析@tailwindcss/vite，原因是该包仅支持ESM模块，但被require方式加载。解决方案包括：1. 将本地Node.js版本升级至22或更高；2. 在package.json中添加"type": "module"以启用ESM模块支持。此外，可以参考CSDN博客中关于使用nvm安装Node.js的指南，以解决安装失败的问题。
【mars3d】Vue3项目集成mard3d实现gis空间地理系统
球球博客
06-21 2571
vue3项目集成mars3d框架
vue3+vite项目集成mars3d
ccqqasa的博客
03-24 1177
修改 vite.config.ts。修改src\App.vue。
Vue3项目引入Mars3D（vite 技术栈）
m0_62498143的博客
04-24 2624
项目背景：笔者采用Vue3引入Mars3D后，再调用GeoServer离线发布的图层。
vue3+vite 在已有项目集成mars3d
一直记录
08-23 471
【代码】vue3+vite 在已有项目集成mars3d。
vite-plugin-mars3d插件最近版本打包问题
m0_69803146的博客
06-27 935
vite-plugin-mars3d插件最近版本打包报错处理备忘
Vue3项目中集成mars3D简单三部曲
weixin_70027586的博客
12-13 1537
Vue3项目中集成mars3d
Mars3D/Cesium + VUE3
qq_54665632的博客
01-11 1870
Mars3D/Cesium + VUE3
mars3d平台Vue3最简的项目模板源码
12-28
https://gitee.com/marsgis/mars3d-vue-template
基于vue3+vite+js+mars3d创建最简项目，构建地球
10-20
基于Vue3、Vite、JavaScript和Mars3D创建一个简单的地球渲染项目，需要经历以下几个步骤： 1. **环境安装**: - 安装Node.js和npm，因为Vite依赖它们。 ``` npm install -g create-vite @vue/cli ``` 2. **初始...
[mars3d] 创建vite项目，集成mars3d
m0_53584457的博客
06-17 899
第一步：创建vite项目，并确保成功运行 vite 官网 没有npm包的需要安装npm；输入命令，创建vite项目；并确定项目能运行成功 第二步：集成mars3d获取 Mars3D SDK类库 【mars3d的官网教程】 集成mars3d 【mars3d的官网教程】 修改 vite.config.ts 配置 红色框框是新添加的参数 以上操作执行结束之后再好在重装下依赖 - npm install第三步：创建地球 问题 ： 如果地球没有加载出来，有可能是 mars3d-contai
在vite中使用mars3d
maqiong1991的博客
03-08 1210
由于vite相比较于webpack在开发环境中巨大的效率提升，于是打算将项目迁移至vite技术栈，之前在vue-cli的项目中使用mars3d需要通过 copy-webpack-plugin 来处理cesium的一些静态资源依赖。像下面这样。 [ // 标识cesium资源所在的主目录，cesium内部资源加载、多线程等处理时需要用到 new webpack.DefinePlugin({ CESIUM_BASE_URL: JSON.stringify(cesiumRunPath) }
vite-ts-cesium项目集成mars3d修改相关的包和配置参考
m0_69803146的博客
06-27 627
vite-ts-cesium项目集成mars3d修改相关的包和配置参考
Mars3D手把手开发教程（vue3）
ThreeKims的博客
03-21 7874
优化提升与B/S架构设计，支持多行业扩展的轻量级高效能GIS开发平台，能够免安装、无插件地在浏览器中高效运行，并可快速接入与使用多种GIS数据和三维模型，呈现三维空间的可视化，完成平台在不同行业的灵活应用。（6）想要更换地图，更改map.ts文件中的basemaps更换底图，什么天地图，高德图，百度图，蓝色黑色地图等等。通过本文，开发者将获得对Mars3D简单的一些操作，更高级的功能小编还在学习中，期待一起进步。（1）编写一个相机移动视角的函数（三维地图，不再是地图的缩放，而是视角，）
vite创建的项目实现Mars3d地图
m0_63112723的博客
08-16 401
vite创建的项目实现Mars3d地图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值