# 快速上手
<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 组件的方式,真心建议
# 高级版本
- 由于公司的 cdn 包不在公网上发布,统一在司马云 (opens new window)上获取,
高级收费版本
请联系三维部门内部获取.- 针对 m3d 的
性能优化
- 针对 m3d 的
调度优化
- 针对一些公司平台
C++内核
代码高级空间分析功能
- 针对 m3d 的
- webclient-cesium-plugins.js 请联系潘卓然 或者从司马云 (opens new window)下载
- 针对常见的
业务开发
进行业务封装 - 针对
IGServer、DataStore
的服务进行封装 - 针对一些
高级开源
技术进行封装
- 针对常见的
基础地图 →