webtianjia / mars3d-react-template

React技术栈下的Mars3D项目模板

基于React技术栈的 Mars3D🌎最简项目模板

English |中文

运行命令

首次运行前安装依赖

npm install 或 cnpm install

http运行项目

npm run serve 运行后访问：http://localhost:3002/

打包编译项目

运行npm run build来构建项目。

常见问题：

npm run build 如果遇到内存泄漏问题，请输入：

    npm install -g increase-memory-limit
    increase-memory-limit 

运行效果

在线体验

如何集成到自己已有的项目中

1. 安装mars3d依赖包

npm install mars3d   //或  cnpm install mars3d   或  yarn add mars3d

2. 拷贝文件

场景配置文件：public\config\config.json

3. 配置webpack.config.js

参考webpack.config.js修改自己项目的webpack配置，需要安装 "copy-webpack-plugin" 和看mars3d-cesium相关代码

不配置webpack.config.js时，直接引入CDN的Cesium库

如果您在上面第3步骤集成中遇到各种奇怪问题无法解决，大部分是vue.config的配置问题时。 修改public\index.html中的下面注释

<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>

不配置webpack.config.js时，直接引入外部Cesium库

如果您在上面第3步骤集成中遇到各种奇怪问题无法解决，大部分是vue.config的配置问题时。 可以直接在html中使用script引入的Cesium库 ，该方式不需要修改 vue.config
从官网下载的SDK中拷贝Cesium放在public\lib\Cesium\下,并取消public\index.html中的下面注释

<script type="text/javascript" >
  window.CESIUM_BASE_URL ="<%= BASE_URL %>lib/Cesium/"
</script>
<link rel="stylesheet" href="<%= BASE_URL %>lib/Cesium/Widgets/widgets.css">
<script type="text/javascript" src="<%= BASE_URL %>lib/Cesium/Cesium.js"></script>

4. 创建地球

参考 src\app.js文件引入Map组件和构造创建地球

5. 常见问题

运行报错时，请检查相关版本是否有冲突，比如webpack 4.43.0与copy-webpack-plugin 7.0.0 会出问题

1. 检查webpack和copy-webpack-plugin版本兼容问题
2. 检查webpack和copy-webpack-plugin与node、npm的版本兼容问题

Mars3D 是什么

Mars3D平台 是火星科技研发的一款基于 WebGL 技术实现的三维客户端开发平台，基于Cesium优化提升与B/S架构设计，支持多行业扩展的轻量级高效能GIS开发平台，能够免安装、无插件地在浏览器中高效运行，并可快速接入与使用多种GIS数据和三维模型，呈现三维空间的可视化，完成平台在不同行业的灵活应用。

Mars3D平台可用于构建无插件、跨操作系统、 跨浏览器的三维 GIS 应用程序。平台使用 WebGL 来进行硬件加速图形化，跨平台、跨浏览器来实现真正的动态大数据三维可视化。通过 Mars3D产品可快速实现浏览器和移动端上美观、流畅的三维地图呈现与空间分析。

相关网站

• Mars3D官网：http://mars3d.cn

• Mars3D开源项目列表：https://github.com/marsgis/mars3d

版权说明

1. Mars3D平台由火星科技自主研发，拥有所有权利。
2. 任何个人或组织可以在遵守相关要求下可以免费无限制使用。