# 快速上手

地图显示内容
hide code
<template>

  <div id="app">
    <mapgis-web-scene @load="handleLoad">
        <div>地图显示内容</div>
    </mapgis-web-scene>
  </div>
</template>
<style>
    #app {
        height: 80px;
        width: 100%;
    }
</style>
<script type="module">
export default {
    data() {
        return { };
    },
    methods: {
        handleMapLoad(payload) {
        }
    }
}
</script>

# ES6 方式

# 中地版本安装 建议使用

由于 cesium 本身涉及大量的纹理材质以及多线程Worker, 公司内部修改版实现M3D格式, M3D不是3dtile,是中地数码自己独特的格式,与开源的 3dtile 不是一种格式。很多高级分析功能只能作用于M3D,而不支持 3d tile.

webclient-vue-cesium 支持一层封装,除了本身需要安装以外,你还需要拷贝@mapgis/cesium

# 不同时安装@mapgis/cesium的原因在于这个对外的是非高级版本,事业部一般全内部使用高级版本开发
npm install --save @mapgis/webclient-vue-cesium
# 或者
yarn add @mapgis/webclient-vue-cesium

在 main.js 中加入样式文件

// 外部全局引入了ant-design-vue库
import Mapgis3d from "@mapgis/webclient-vue-cesium";
Vue.use(Mapgis3d);

// 外部没有引入ant-design-vue库,使用内部封装的组件库
import Mapgis3d from "@mapgis/webclient-vue-cesium";
Vue.use(Mapgis3d, { ui: "ant-design-vue" });

WARNING

要实现 cesium 主体的引入,一定要看下面的文件拷贝章节, 光是@mapgis/webclient-vue-cesium 是无法正常开发的 Orz...

# 文件拷贝

由于标准的 Cesium 在支持 Webpack 编译的时候也是采取的 copy 插件来执行对应的文件夹拷贝操作。 因此为了统一处理,这里统一不采取手动修改 webpack.config 的方式,而是将 cesium 的所有文件放在 public 或者 asset 的某个目录下,自己手动实现静态资料的拷贝

WARNING

这样做的本质原因是,MapGIS 的高级版本的 Cesium 是只对内不对外提供,导致不同事业部的 Cesium 版本各不一致

@mapgis/cesium的包结构展示如下: 代码结构

请将上述文件统一拷贝到你的 vue 工程对应的 public 文件夹下的某个目录中,记录对应的路径为

# quasar 的静态资源目录为src/static
# 常见的静态资源目录为 public
# 主Cesium主体路径
path/to/statics/cesium/Cesium.js
# Cesium拓展插件路径
path/to/statics/cesium/webclient-cesium-plugins.js

如果在浏览器中 访问 http://localhost:xxxx/path/to/statics/cesium/Cesium.js 成功则说明整个 Cesium 的环境准备已经完毕。

# 浏览器使用

# 安装

WARNING

~ 纯浏览器端建议还是使用 Cesium 原生的方式,而不是 Vue 组件的方式,真心建议

# 高级版本

  1. 由于公司的 cdn 包不在公网上发布,统一在司马云 (opens new window)上获取,高级收费版本请联系三维部门内部获取.
    • 针对 m3d 的性能优化
    • 针对 m3d 的调度优化
    • 针对一些公司平台C++内核代码高级空间分析功能
  2. webclient-cesium-plugins.js 请联系潘卓然 或者从司马云 (opens new window)下载
    • 针对常见的业务开发进行业务封装
    • 针对IGServer、DataStore的服务进行封装
    • 针对一些高级开源技术进行封装