devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【Mars3d 基础】使用Mars3d创建一个地球_mars3d.js?v=81360c19:35321 请引入 mars3d-cesium 库 {de

作者：2023面试高手 | 2024-06-07 23:50:00

赞

踩

mars3d.js?v=81360c19:35321 请引入 mars3d-cesium 库 {default: undefined}

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

 获取 Mars3D

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

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

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

#安装方式

#1. 从 npm 获取

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

  1. //安装mars3d主库
  2. npm install mars3d --save   
  3.  
  4. //安装mars3d插件（按需安装）
  5. npm install mars3d-space --save

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

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

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

#2. 从 CDN 获取

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

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

  1. <!--引入cesium基础lib-->
  2. <link href="https://unpkg.com/mars3d-cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
  3. <script src="https://unpkg.com/mars3d-cesium/Build/Cesium/Cesium.js" type="text/javascript" ></script>
  4. <script src="https://unpkg.com/@turf/turf/turf.min.js" type="text/javascript" ></script>
  5.  
  6. <!--引入mars3d库lib-->
  7. <link href="https://unpkg.com/mars3d/dist/mars3d.css" rel="stylesheet" type="text/css" />
  8. <script src="https://unpkg.com/mars3d/dist/mars3d.js" type="text/javascript" ></script>  
  9.  
  10.  
  11. <!--引入mars3d库插件lib（按需引入）-->  
  12. <script src="https://unpkg.com/mars3d-space/dist/mars3d-space.js" type="text/javascript" ></script> 
  13.

#可以选用 jsDelivr 的CDN服务

  1. <!--引入cesium基础lib-->
  2. <link href="https://cdn.jsdelivr.net/npm/mars3d-cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
  3. <script src="https://cdn.jsdelivr.net/npm/mars3d-cesium/Build/Cesium/Cesium.js" type="text/javascript" ></script>
  4. <script src="https://unpkg.com/@turf/turf/turf.min.js" type="text/javascript" ></script>
  5.  
  6. <!--引入mars3d库lib-->
  7. <link href="https://cdn.jsdelivr.net/npm/mars3d/dist/mars3d.css" rel="stylesheet" type="text/css" />
  8. <script src="https://cdn.jsdelivr.net/npm/mars3d/dist/mars3d.js" type="text/javascript" ></script>  
  9.  
  10.  
  11. <!--引入mars3d库插件lib（按需引入）-->  
  12. <script src="https://cdn.jsdelivr.net/npm/mars3d-space/dist/mars3d-space.js" type="text/javascript" ></script> 
  13.

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

#3. 从 Mars3D官网 下载获取

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

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

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

  1. <!--引入cesium基础lib-->
  2. <link href="./lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
  3. <script src="./lib/Cesium/Cesium.js" type="text/javascript" ></script>
  4. <script src="./lib/turf/turf.min.js" type="text/javascript" ></script>
  5.  
  6. <!--引入mars3d库lib-->
  7. <link href="./lib/mars3d/dist/mars3d.css" rel="stylesheet" type="text/css" />
  8. <script src="./lib/mars3d/dist/mars3d.js" type="text/javascript" ></script>  
  9.  
  10. <!--引入mars3d库插件lib（按需引入）-->  
  11. <script src="./lib/mars3d/plugins/space/mars3d-space.js" type="text/javascript" ></script> 
  12.

#3.2 类似npm的import方式导入

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

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

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

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

快速上手

获取 Mars3D

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

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

#引入 Mars3D

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

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

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

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

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

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

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

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

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

在已有项目中集成Mars3D

1. 引入Mars3D类库

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

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

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

在线CDN版本：

  1. <!--引入cesium基础lib-->
  2. <link href="https://cdn.jsdelivr.net/npm/mars3d-cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
  3. <script src="https://cdn.jsdelivr.net/npm/mars3d-cesium/Build/Cesium/Cesium.js" type="text/javascript" ></script>
  4. <script src="https://unpkg.com/@turf/turf/turf.min.js" type="text/javascript" ></script>
  5.  
  6. <!--引入mars3d库lib-->
  7. <link href="https://cdn.jsdelivr.net/npm/mars3d/dist/mars3d.css" rel="stylesheet" type="text/css" />
  8. <script src="https://cdn.jsdelivr.net/npm/mars3d/dist/mars3d.js" type="text/javascript" ></script>  
  9.  
  10. <!--引入mars3d库插件lib（按需引入）-->  
  11. <script src="https://cdn.jsdelivr.net/npm/mars3d-space/dist/mars3d-space.js" type="text/javascript" ></script> 
  12.

本地版本(下载链接 )：

  1. <!--引入cesium基础lib-->
  2. <link href="./lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
  3. <script src="./lib/Cesium/Cesium.js" type="text/javascript" ></script>
  4. <script src="./lib/turf/turf.min.js" type="text/javascript" ></script>
  5.  
  6. <!--引入mars3d库lib-->
  7. <link href="./lib/mars3d/dist/mars3d.css" rel="stylesheet" type="text/css" />
  8. <script src="./lib/mars3d/dist/mars3d.js" type="text/javascript" ></script>  
  9.  
  10. <!--引入mars3d库插件lib（按需引入）-->  
  11. <script src="./lib/mars3d/plugins/space/mars3d-space.js" type="text/javascript" ></script> 
  12.

#方式2： import方式导入

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

  1. //引入npm版本时
  2. import 'mars3d/dist/mars3d.css'
  3. import * as mars3d from 'mars3d'
  4.  
  5. //引入下载的本地版本时
  6. // import './lib/mars3d/mars3d.css'
  7. // import * as mars3d from './lib/mars3d/mars3d.js' 
  8.  
  9. //导入mars3d插件（按需使用，需要先npm install）
  10. import 'mars3d-space'
  11.  
  12. //可以绑定下vue原型链，可以全局使用
  13. Vue.prototype.mars3d = mars3d;
  14.  
  15. //在具体使用的vue等文件中
  16. //直接使用 this.mars3d 进行相关调用。

#修改项目配置

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

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


  1. // webpack.config.js  
  2. const path = require('path')
  3. const webpack = require('webpack')
  4. const CopyWebpackPlugin = require('copy-webpack-plugin')
  5.  
  6. const cesiumSourcePath = 'node_modules/mars3d-cesium/Build/Cesium/' //cesium库目录
  7. let cesiumRunPath = './cesium/'//cesium运行时主目录
  8.  
  9. module.exports = {
  10.   plugins: [
  11.       //标识cesium资源所在的主目录，cesium内部资源加载、多线程等处理时需要用到
  12.       new webpack.DefinePlugin({
  13.         CESIUM_BASE_URL: JSON.stringify(cesiumRunPath)
  14.       }),
  15.       //cesium相关资源目录需要拷贝到系统目录下面
  16.       new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'Workers'), to: path.join(cesiumRunPath, 'Workers') }]),
  17.       new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'Assets'), to: path.join(cesiumRunPath, 'Assets') }]),
  18.       new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'ThirdParty'), to: path.join(cesiumRunPath, 'ThirdParty') }]),
  19.       new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'Widgets'), to: path.join(cesiumRunPath, 'Widgets') }])
  20.   ],
  21. }

或

  1. // vue.config.js
  2. const path = require('path')
  3. const webpack = require('webpack')
  4. const CopyWebpackPlugin = require('copy-webpack-plugin')
  5.  
  6.  
  7. module.exports = {
  8.   configureWebpack: (config) => {
  9.     let cesiumSourcePath = 'node_modules/mars3d-cesium/Build/Cesium/' //cesium库目录
  10.     let cesiumRunPath = config.output.publicPath || './cesium/' //cesium运行时主目录
  11.     let plugins = [
  12.       //标识cesium资源所在的主目录，cesium内部资源加载、多线程等处理时需要用到
  13.       new webpack.DefinePlugin({
  14.         CESIUM_BASE_URL: JSON.stringify(cesiumRunPath)
  15.       }),
  16.       //cesium相关资源目录需要拷贝到系统目录下面
  17.       new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'Workers'), to: path.join(config.output.path, cesiumRunPath, 'Workers') }]),
  18.       new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'Assets'), to: path.join(config.output.path, cesiumRunPath, 'Assets') }]),
  19.       new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'ThirdParty'), to: path.join(config.output.path, cesiumRunPath, 'ThirdParty') }]),
  20.       new CopyWebpackPlugin([{ from: path.join(cesiumSourcePath, 'Widgets'), to: path.join(config.output.path, cesiumRunPath, 'Widgets') }])
  21.     ]
  22.  
  23.     config.plugins = [
  24.       ...config.plugins,
  25.       ...plugins
  26.     ]
  27.   }, 
  28.   //已省略其他配置
  29. }
  30.

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

#修改项目配置-CDN方式

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

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

  1. <!--引入cesium基础lib-->
  2. <link href="https://unpkg.com/mars3d-cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
  3. <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地图类 类创建三维地图场景。

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

#运行效果

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/687543
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号