【Mars3d 基础】使用Mars3d创建一个地球

已于 2023-08-31 10:30:37 修改
阅读量1.3k 收藏 3
点赞数 3
分类专栏： mars3d 文章标签： 3d javascript vue.js 前端 开发语言
于 2021-12-28 10:37:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53584457/article/details/122184726
版权

mars3d是火星科技 研发的一款基于 WebGL 技术实现的三维客户端开发平台，可快速接入与使用多种GIS数据和三维模型，呈现三维空间的可视化。

 获取 Mars3D

Mars3D 提供了多种安装方式，你可以根据项目的实际情况和技术栈选择以下任意一种方式安装。

  • 从 npm 安装
  • 从 CDN 引入
  • 从 Mars3D官网 下载

接下来我们将分别介绍这些安装方式，以及下载后的目录结构。

#安装方式

#1. 从 npm 获取

使用Node环境下的现代web前端技术栈时，可以使用npm或cnpm或yarn等方式来安装mars3d包

//安装mars3d主库
npm install mars3d --save   

//安装mars3d插件（按需安装）
npm install mars3d-space --save

安装后在相关使用文件中引入使用即可

import 'mars3d/dist/mars3d.css'
import * as mars3d from 'mars3d'
 
//导入mars3d插件（按需使用，需要先npm install）
import 'mars3d-space'

详见在项目中引入 Mars3D， 您也可以参考 vue最简项目模板 、 react最简项目模板 、 angular最简项目模板

#2. 从 CDN 获取

在html的head标签中引入Mars3D包相关CDN资源.

#可以选用 unpkg.com 的CDN服务

<!--引入cesium基础lib-->
<link href="https://unpkg.com/mars3d-cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/mars3d-cesium/Build/Cesium/Cesium.js" type="text/javascript" ></script>
<script src="https://unpkg.com/@turf/turf/turf.min.js" type="text/javascript" ></script>

<!--引入mars3d库lib-->
<link href="https://unpkg.com/mars3d/dist/mars3d.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/mars3d/dist/mars3d.js" type="text/javascript" ></script>  


<!--引入mars3d库插件lib（按需引入）-->  
<script src="https://unpkg.com/mars3d-space/dist/mars3d-space.js" type="text/javascript" ></script>

#可以选用 jsDelivr 的CDN服务

<!--引入cesium基础lib-->
<link href="https://cdn.jsdelivr.net/npm/mars3d-cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/mars3d-cesium/Build/Cesium/Cesium.js" type="text/javascript" ></script>
<script src="https://unpkg.com/@turf/turf/turf.min.js" type="text/javascript" ></script>

<!--引入mars3d库lib-->
<link href="https://cdn.jsdelivr.net/npm/mars3d/dist/mars3d.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/mars3d/dist/mars3d.js" type="text/javascript" ></script>  


<!--引入mars3d库插件lib（按需引入）-->  
<script src="https://cdn.jsdelivr.net/npm/mars3d-space/dist/mars3d-space.js" type="text/javascript" ></script>

引入后在相关使用文件中直接使用window.mars3d对象即可 。

#3. 从 Mars3D官网 下载获取

可以在Mars3D官网 下载 mars3d离线包 后在本地项目中引入相对路径资源来使用。

将下载的SDK放在项目目录内，使用方式与上面2种基本相同，区别在于url路径是本地项目的相对路径。

#3.1 类似CDN的head静态资源方式引入

<!--引入cesium基础lib-->
<link href="./lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
<script src="./lib/Cesium/Cesium.js" type="text/javascript" ></script>
<script src="./lib/turf/turf.min.js" type="text/javascript" ></script>

<!--引入mars3d库lib-->
<link href="./lib/mars3d/dist/mars3d.css" rel="stylesheet" type="text/css" />
<script src="./lib/mars3d/dist/mars3d.js" type="text/javascript" ></script>  

<!--引入mars3d库插件lib（按需引入）-->  
<script src="./lib/mars3d/plugins/space/mars3d-space.js" type="text/javascript" ></script>

#3.2 类似npm的import方式导入

import './lib/mars3d/mars3d.css'
import * as mars3d from './lib/mars3d/mars3d.js'

如果引入本地版本build编译很慢时，可以按下面配置修改babel.config.js

module.exports = {
  //已忽略其他配置
  ignore: [
    './src/components/Map/lib/mars3d/'  //改成自己的本地地址
  ]
}

引入后的具体的使用请参考 下一篇教程 说明。

快速上手

获取 Mars3D

Mars3D 支持多种下载方式，可以在下一篇教程安装中查看所有方式。这里，我们以从 jsDelivr CDN 上获取为例，介绍如何快速安装。

关于这些文件的介绍，可以在下一篇教程安装中了解更多信息。

#引入 Mars3D

新建一个 index.html 文件，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" /> 
    <!--引入cesium基础lib-->
    <link href="https://cdn.jsdelivr.net/npm/mars3d-cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/npm/mars3d-cesium/Build/Cesium/Cesium.js" type="text/javascript" ></script>
    <!--引入mars3d库lib-->
    <link href="https://cdn.jsdelivr.net/npm/mars3d/dist/mars3d.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/npm/mars3d/dist/mars3d.js" type="text/javascript" ></script>    
  </head>
</html>

打开这个 index.html，你会看到一片空白。但是不要担心，打开控制台确认没有报错信息，并有正确的mars3d版本等信息提示，就可以进行下一步。

#绘制一个简单的三维地球

在绘三维地球前我们需要为 Mars3D 准备一个定义了高宽的 DOM 容器。在刚才的例子 </head> 之后，添加：

<body>
  <!-- 为 Mars3D 准备一个定义了宽高的 DOM -->
  <div id="mars3dContainer" class="mars3d-container"></div> 
</body>

然后就可以通过 new mars3d.Map 方法初始化一个 mars3d 实例并通过传入 mapOptions 参数生成一个简单的三维地球，下面是完整代码。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>mars3d</title> 
    <!--引入cesium基础lib-->
    <link href="https://cdn.jsdelivr.net/npm/mars3d-cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/npm/mars3d-cesium/Build/Cesium/Cesium.js" type="text/javascript" ></script> 
    <!--引入mars3d库lib-->
    <link href="https://cdn.jsdelivr.net/npm/mars3d/dist/mars3d.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/npm/mars3d/dist/mars3d.js" type="text/javascript" ></script>    
  </head>
  <body>
    <!-- 为 Mars3D 准备一个定义了宽高的 DOM -->
  <div id="mars3dContainer" class="mars3d-container"></div> 
    <script type="text/javascript">
     var mapOptions = {} //支持的参数请看API文档：http://mars3d.cn/api/Map.html
     var map = new mars3d.Map('mars3dContainer', mapOptions)
    </script>
  </body>
</html>

这样你的第一个三维地球就诞生了！

在已有项目中集成Mars3D

1. 引入Mars3D类库

可以根据您自己的技术栈使用情况，获取 Mars3D 进行下载或引入Mars3D库到自己的项目中去使用。

#方式1：head静态资源方式引入

在html的head标签中引入Cesium官方包和Mars3D包相关资源，此方法比较简单，不会出现各类集成问题，引入资源后在代码即可通过window.mars3d来使用相关mars3d类及方法。

在线CDN版本：

<!--引入cesium基础lib-->
<link href="https://cdn.jsdelivr.net/npm/mars3d-cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/mars3d-cesium/Build/Cesium/Cesium.js" type="text/javascript" ></script>
<script src="https://unpkg.com/@turf/turf/turf.min.js" type="text/javascript" ></script>

<!--引入mars3d库lib-->
<link href="https://cdn.jsdelivr.net/npm/mars3d/dist/mars3d.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/mars3d/dist/mars3d.js" type="text/javascript" ></script>  

<!--引入mars3d库插件lib（按需引入）-->  
<script src="https://cdn.jsdelivr.net/npm/mars3d-space/dist/mars3d-space.js" type="text/javascript" ></script>

本地版本(下载链接 )：

<!--引入cesium基础lib-->
<link href="./lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
<script src="./lib/Cesium/Cesium.js" type="text/javascript" ></script>
<script src="./lib/turf/turf.min.js" type="text/javascript" ></script>

<!--引入mars3d库lib-->
<link href="./lib/mars3d/dist/mars3d.css" rel="stylesheet" type="text/css" />
<script src="./lib/mars3d/dist/mars3d.js" type="text/javascript" ></script>  

<!--引入mars3d库插件lib（按需引入）-->  
<script src="./lib/mars3d/plugins/space/mars3d-space.js" type="text/javascript" ></script>

#方式2： import方式导入

使用Node环境下的现代web前端技术栈时，可以使用npm等来安装mars3d包并import导入后来使用。

//引入npm版本时
import 'mars3d/dist/mars3d.css'
import * as mars3d from 'mars3d'

//引入下载的本地版本时
// import './lib/mars3d/mars3d.css'
// import * as mars3d from './lib/mars3d/mars3d.js' 
 
//导入mars3d插件（按需使用，需要先npm install）
import 'mars3d-space'

//可以绑定下vue原型链，可以全局使用
Vue.prototype.mars3d = mars3d;

//在具体使用的vue等文件中
//直接使用 this.mars3d 进行相关调用。

#修改项目配置

因为mars3d所依赖的Cesium是一个多文件资源的js库，需要对其依赖的一些资源文件进行拷贝处理（这也是容易出问题的地方）， 下面已Webpack技术栈为例，vue等其他技术栈类似（可以参考开源项目清单内下载后的项目模板对应README说明处理）。

npm install copy-webpack-plugin -save --dev


// webpack.config.js  
const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')

const cesiumSourcePath = 'node_modules/mars3d-cesium/Build/Cesium/' //cesium库目录
let cesiumRunPath = './cesium/'//cesium运行时主目录

module.exports = {
  plugins: [
      //标识cesium资源所在的主目录，cesium内部资源加载、多线程等处理时需要用到
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify(cesiumRunPath)
      }),
      //cesium相关资源目录需要拷贝到系统目录下面
      new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'Workers'), to: path.join(cesiumRunPath, 'Workers') }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'Assets'), to: path.join(cesiumRunPath, 'Assets') }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'ThirdParty'), to: path.join(cesiumRunPath, 'ThirdParty') }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'Widgets'), to: path.join(cesiumRunPath, 'Widgets') }])
  ],
}

或

// vue.config.js
const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
 

module.exports = {
  configureWebpack: (config) => {
    let cesiumSourcePath = 'node_modules/mars3d-cesium/Build/Cesium/' //cesium库目录
    let cesiumRunPath = config.output.publicPath || './cesium/' //cesium运行时主目录
    let plugins = [
      //标识cesium资源所在的主目录，cesium内部资源加载、多线程等处理时需要用到
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify(cesiumRunPath)
      }),
      //cesium相关资源目录需要拷贝到系统目录下面
      new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'Workers'), to: path.join(config.output.path, cesiumRunPath, 'Workers') }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'Assets'), to: path.join(config.output.path, cesiumRunPath, 'Assets') }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'ThirdParty'), to: path.join(config.output.path, cesiumRunPath, 'ThirdParty') }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'Widgets'), to: path.join(config.output.path, cesiumRunPath, 'Widgets') }])
    ]

    config.plugins = [
      ...config.plugins,
      ...plugins
    ]
  }, 
  //已省略其他配置
}

90% 的集成问题都是出现在这对cesium库的拷贝处理上，项目运行没有正确识别Cesium主目录造成各种问题。

#修改项目配置-CDN方式

如果上一步无法正常运行项目，也可以通过CDN方式引入Cesium，并还原上一步骤“修改项目配置”的所有配置。

mars3d库可以在import引入的方式下，兼容识别CDN引入的Cesium库。

<!--引入cesium基础lib-->
<link href="https://unpkg.com/mars3d-cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/mars3d-cesium/Build/Cesium/Cesium.js" type="text/javascript" ></script>

#2. 新建div容器

在需要呈现地图的页面或相关组件中，加上div容器，并注意设置div的css高宽样式。

<div id="mars3dContainer" class="mars3d-container"></div>

#3. 使用mars3d.Map方法创建地球

使用Map地图类 类创建三维地图场景。

 var mapOptions = {} //支持的参数请看API文档：http://mars3d.cn/api/Map.html
 var map = new mars3d.Map('mars3dContainer', mapOptions)

#运行效果

小小的杰茜
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Mars3D功能示例原生JS版下载运行
maqiong1991的博客
12-27 669
Mars3D原生示例 首先建议您学习浏览一遍我们功能示例的源码（源码中会有大量注释），阅读源码时可以结合查阅API文档来理解类及方法的作用和参数说明等。
mars3d-创建地球（vite+vue）
Hjiehahah的博客
06-22 1288
如果没有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
vue项目使用mars3d加载天地图，实现地图点位，动态线标注
最新发布
m0_73110566的博客
05-23 700
vue项目使用mars3d加载天地图，实现地图点位，动态线标注
Mars3D快速上手
木遥的专栏
12-27 4331
Mars3D 的获取下载并集成到自己项目中
Mars3D使用教程
qq_42250281的博客
01-03 4328
​//安装mars3d插件（按需安装）​//安装copy-webpack-plugin插件在第3步中使用，根据webpack版本安装，不匹配的版本可能出错，版本需要5.0//引入cesium基础库​//导入mars3d主库​//导入mars3d插件（按需使用，需要先npm install）.
Mars3D项目模板：基础项目 原生JS版 (widget方式)介绍
木遥的专栏
01-17 2671
Mars3D基础项目 是基于Mars3D平台 做的一个应用系统，提供的一个基础项目模版，包含常用基础地图功能，可在该基础项目上快速开发搭建新项目。方便快速搭建三维地图产品，敏捷开发，可复用，支持各种配置，适合各种场景使用。
JS-Mars3D-添加一组点以及删除的方法(详细注释)
ershao1022的博客
05-18 556
Mars3D开发经验
mars3d平台React最简的项目模板源码
12-28
火星三维平台（Mars3D）是一个基于Cesium的开源Web GIS框架，它提供了一整套用于构建高效、高性能的三维地理信息系统应用的解决方案。在本项目中，“mars3d-react-template”是一个针对React开发者的最简项目模板，...
mars3d平台Vue2最简的项目模板源码
12-28
总的来说，"mars3d-vue2-template"项目模板提供了一个快速入门的起点，涵盖了Vue2框架的基本使用，Mars3D平台的集成，以及Web GIS应用开发的基础知识。通过深入研究和实践，你将能够创建出功能丰富的三维地理信息...
mars3d平台Vue3最简的项目模板源码
12-28
这个"Mars3D平台Vue3最简的项目模板源码"是一个基础模板，用于快速搭建使用Mars3D和Vue3技术栈的项目，让开发者能够便捷地开发出交互式的三维地图应用。 项目模板包含以下关键知识点： 1. **Vue3**：Vue3引入了...
Mars3D+nginx 搭建离线API服务，本地访问
12-20
本教程将详细介绍如何使用Mars3D和nginx搭建一个离线API服务，以便本地进行API测试和开发工作。我们将围绕“Mars3D+nginx 搭建离线API服务，本地访问”这一主题，探讨相关知识点。 首先，Mars3D是一个基于WebGL技术...
mars3d-es5-template:Mars3D最简项目模版 - ES5传统版
04-29
Mars3D最简项目模版 - ES5传统版 Mars3D三维地球平台软件，在`传统JS技术栈`的最简的应用项目模版。 其他技术栈，请参考： 运行站点 在任意开发编辑器（如vscode等）或http服务器(如node、nginx、tomcat、IIS等)下直接运行浏览index.html即可 运行效果 压缩及混淆 如果需要编译、对整站压缩及混淆，请参考： Mars3D 是什么 Mars3D三维地球平台软件 是研发的一款基于 WebGL 技术实现的三维客户端开发平台，基于优化提升与B/S架构设计，支持多行业扩展的轻量级高效能GIS开发平台，能够免安装、无插件地在浏览器中高效运行，并可快速接入与使用多种GIS数据和三维模型，呈现三维空间的可视化，完成平台在不同行业的灵活应用。 Mars3D平台可用于构建无插件、跨操作系统、 跨浏览器的三维 GIS 应用程序。平台使用 WebGL 来进行硬件加速图
mars3d-simple-angular-widget-master.zip
08-08
框架主要有下面4大特色： 一是完善优化了Cesium的基础功能，解决了开源产品不完善的通用弊端，填了各种“坑”
mars3d-supermap-master_supermap_火星代码_火星科技cesium_mars3d-supermap_
09-11
4. 创建3D地图：在Vue组件中创建Cesium Viewer实例，使用Mars3D扩展功能加载SuperMap地图服务。 5. 数据交互：利用Vue的数据绑定和响应式特性，实现实时更新地图上的数据和交互功能。 **六、应用示例** "mars3d-...
Mars3D开发基础学习：三维场景 Map
木遥的专栏
12-30 3352
我们使用DIV渲染后看到的三维地球对象，我们统称为三维场景，在Mars3D中对应是mars3d.Map类 ，这是一切的开始，所有相关控制的起点。掌握学习好了mars3d.Map类 基本也就掌握好了Mars3D。
【mars3d】将mars3d中的示例代码拷贝到自己项目中
m0_53584457的博客
07-21 580
mars3d，示例代码单页面讲解，迁移
mars3d获取地图和图层相关数据
maqiong1991的博客
03-08 1271
在实际项目中经常会遇到自定义图层和地图控件的需求，首先就需要获取到图层和地图相关的数据，mars3d都提供了相关的api来满足此类操作。这里先以实际项目中的地图控制为例来学习一下相关的api使用。 // 首先初始化地图 map = new mars3d.Map("map-container", option) // 直接调用getBasemaps就可以获取地图相关数据 const baseMaps = map.getBasemaps() 此时已经拿到了底图的相关数据，但是同时也拿到了，不包含图层
vue使用Mars3D实现3d卫星轨道和3d地球图
webtext的博客
12-14 4701
1、安装 //安装mars3d主库 npm install mars3d --save 2、引入 main,js import 'mars3d/dist/mars3d.css' import * as mars3d from 'mars3d' ~~mars3d-space不引入，无法使用卫星的功能~~ import 'mars3d-space' Vue.prototype.mars3d = mars3d; vue.config.js const path = require('path') co
【mars3d】Vue3项目集成mard3d实现gis空间地理系统
球球博客
06-21 2220
vue3项目集成mars3d框架
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值