# # 快速上手

地图显示内容
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`的服务进行封装
   - 针对一些`高级开源`技术进行封装