@mapgis/webclient-cesium-plugin
Version:
A lightweight 3D GIS network client development platform based on WebGL.
840 lines (526 loc) • 26.4 kB
Markdown
# 1、获取 MapGIS 3DClient for WebGL 开发包
开发时需要引入MapGIS 3DClient for WebGL（即 MapGIS Client for JavaScript (Cesium)）开发包；其中包括必备的 CSS 文件和 JS 文件；
开发库分为正式发行版和Beta版;
* 正式版：面向公网用户，半年发行一次，发行后不会增加新功能，仅会修订BUG
* Beta版：面向内网用户，每周发行一次，会修订BUG并增加新功能
下面分别介绍两种版本包的获取方式：
## 1.1、正式发行版及其更新包
### 1.1.1、文件方式引入
**前往**[司马云官网](http://smaryun.com/dev/download_detail.html#/download828)**下载MapGIS 3DClient for WebGL开发库**
以10.6.2.10为例，其中：
* mapgis-client-for-javascript-dist-v10.6.2.10.rar为开发库
* mapgis-client-for-javascript-all-v10.6.2.10.rar为开发库+示例站点
**MapGIS 3DClient for WebGL所需开发包位于如下文件夹中**
* webclient-cesium-plugin库：`mapgis-client-for-javascript-all-v10.6.2.10\dist\cdn\zondyclient\webclient-cesium-plugin.min.js`
* Cesium库：`mapgis-client-for-javascript-all-v10.6.2.10\dist\cdn\cesium`
**之后请将webclient-cesium-plugin.min.js文件和cesium文件夹拷贝出来，放入项目的静态资源目录**
### 1.1.2、npm 方式引入
**通过****公网****NPM的方式进行安装**
```plain
npm install @mapgis/cesium
npm install @mapgis/webclient-cesium-plugin
```
**安装中需要注意的事项：**
* 其中@mapgis/cesium库，目前版本仅支持ES5的打包方式，因此请以NPM的方式下载开发包，npm安装完成后，请将开发包从node_modules里的@mapgis/cesium文件夹里拷贝出来，放入项目的静态资源目录中
<center>
<img src="http://webclient.smaryun.com/static/modules/cesium/source/img/开发指南_3.png" style="zoom:100%;" />
</center>
## 1.2、Beta版
### 1.2.1、文件方式引入
**前往内网****npm****开发库下载MapGIS 3DClient for WebGL相关开发包**
* [@mapgis/webclient-cesium-plugin](http://192.168.11.130:4873/-/web/detail/@mapgis/webclient-cesium-plugin)
* [@mapgis/cesium](http://192.168.11.130:4873/-/web/detail/@mapgis/cesium)
以 16.1.26版本为例进行说明
1.在该网页中请先选择要下载的版本
<center>
<img src="http://webclient.smaryun.com/static/modules/cesium/source/img/开发指南_1.png" style="zoom:100%;" />
</center>
2.点击相应的版本号，在右侧点击下载按钮，下载压缩包
<center>
<img src="http://webclient.smaryun.com/static/modules/cesium/source/img/开发指南_2.png" style="zoom:100%;" />
</center>
MapGIS 3DClient for WebGL所需开发包位于如下文件夹：
* webclient-cesium-plugin库：`webclient-cesium-plugin-16.1.26\package\dist\webclient-cesium-plugin.min.js`
* cesium库：`cesium-16.1.26\package\dist`
**请将**`cesium-16.1.26\package\dist`**文件夹改名为“cesium”，之后将**`webclient-cesium-plugin.min.js`**文件和cesium文件夹拷贝出来，放入项目的静态资源目录。**
### 1.2.2、npm 方式引入
**请先将npm源切换为内网：**
```typescript
npm set registry http://192.168.11.130:4873/
```
**通过内网NPM的方式进行安装**
```plain
npm install @mapgis/cesium
npm install @mapgis/webclient-cesium-plugin
```
**安装中需要注意的事项：**
* 其中@mapgis/cesium开发包仅支持通过文件的方式引入，不支持模块化通过import的方式引入，npm安装完成后，请将开发包从node_modules里的@mapgis/cesium文件夹里拷贝出来，放入项目的静态资源目录中
# 2、引入开发库
## 2.1、文件方式引入
**在index.html中引入引擎库和插件库**
```typescript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<!--引擎库-->
<script src="http://{ip}:{port}/{你的路径}/cesium/Cesium.js"></script>
<link rel="stylesheet" href="http://{ip}:{port}/{你的路径}/cesium/Widgets/widgets.css"/>
<link rel="stylesheet" href="http://{ip}:{port}/{你的路径}/cesium/MapGIS/css/mapgis.css"/>
<!--插件库-->
<script src="http://{ip}:{port}/{你的路径}/webclient-cesium-plugin/webclient-cesium-plugin.min.js"></script>
</head>
</html>
```
## 2.1、npm 方式引入
**由于目前@mapgis/cesium包不支持ES6的方式，因此通过文件方式引入引擎库**
```plain
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<!--引擎库-->
<script src="http://{ip}:{port}/{你的路径}/cesium/Cesium.js"></script>
<link rel="stylesheet" href="http://{ip}:{port}/{你的路径}/cesium/Widgets/widgets.css"/>
<link rel="stylesheet" href="http://{ip}:{port}/{你的路径}/cesium/MapGIS/css/mapgis.css"/>
</head>
</html>
```
**通过npm的方式安装@mapgis/webclient-cesium-plugin插件库**
```typescript
npm install @mapgis/webclient-cesium-plugin
```
# 3、初始化场景视图
## 3.1、文件方式引入
**在项目的css文件中设置场景视图容器的样式，否则场景视图无法显示**
```typescript
/*设置场景视图的样式，一定要设置否则地图无法显示*/
#你的场景视图的id {
width: 100%;
height: 100%;
position: absolute;
}
```
**初始化场景视图对象**
```typescript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<!--引擎库-->
<script src="http://{ip}:{port}/{你的路径}/cesium/Cesium.js"></script>
<link rel="stylesheet" href="http://{ip}:{port}/{你的路径}/cesium/Widgets/widgets.css"/>
<link rel="stylesheet" href="http://{ip}:{port}/{你的路径}/cesium/MapGIS/css/mapgis.css"/>
<!--插件库-->
<script src="http://{ip}:{port}/{你的路径}/webclient-cesium-plugin/webclient-cesium-plugin.min.js"></script>
<style>
/*设置地图视图的样式，一定要设置否则地图无法显示*/
#你的场景视图的id {
width: 100%;
height: 100%;
position: absolute;
}
</style>
<script>
//初始化图层管理容器
const map = new zondy.Map();
//初始化场景视图对象
const sceneView = new zondy.SceneView({
//视图id
viewId: "你的场景视图的id",
//图层管理容器
map: map
});
</script>
</head>
<!--场景视图容器div-->
<div id="你的场景视图的id">
</div>
</html>
```
## 3.2、npm 方式引入
**以VUE项目为例，React和Angular类似**
**在项目的css文件中设置场景视图容器的样式，否则场景视图无法显示**
```typescript
/*设置场景视图的样式，一定要设置否则地图无法显示*/
#你的场景视图的id {
width: 100%;
height: 100%;
position: absolute;
}
```
**找到项目的index.html文件，由于@mapgis/Cesium不支持ES6模式，因此在里面引入引擎库**
```typescript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<!--引擎库-->
<script src="http://{ip}:{port}/{你的路径}/cesium/Cesium.js"></script>
<link rel="stylesheet" href="http://{ip}:{port}/{你的路径}/cesium/Widgets/widgets.css"/>
<link rel="stylesheet" href="http://{ip}:{port}/{你的路径}/cesium/MapGIS/css/mapgis.css"/>
</head>
<div id="app"></div>
</html>
```
**在你的vue组件的template中设置场景视图容器的div元素**
```typescript
<!--场景视图容器div-->
<div id="你的场景视图的id">
</div>
```
**引入需要的构造函数**
```typescript
import { SceneView } from '@mapgis/webclient-cesium-plugin'
import { Map } from "@mapgis/webclient-common"
```
**在mounted生命周期中初始化场景视图**
```typescript
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const sceneView = new SceneView({
// 视图id
viewId: "你的场景视图的id",
// 图层管理容器
map: map
});
```
# 4、@mapgis/webclient-cesium-plugin 版本说明
## 4.1、正式版
### v17.6.23
**更新说明：**
1. 功能优化
- 修复已知问题
### v17.6.22
**更新说明：**
1. 功能优化
- 修复天际线分析中颜色设置失败的问题
### v17.6.21
**更新说明：**
1. 功能优化
- 优化重复设置 Graphic 的 显隐属性值为 true 时场景卡顿的问题
### v17.6.20
**更新说明：**
1. 功能优化
- 解决地图缩放时，加载自定义裁图图层时中间状态出现闪烁的问题
- 解决使用 startDrawing 添加广告牌时重复添加图元的问题
### v17.6.19
**更新说明：**
1. 功能优化
- 解决聚合专题图报错的问题
### v17.6.18
**更新说明：**
1. 功能优化
- 修复场景图层 hitTest 拾取报错的问题
### v17.6.17
**更新说明：**
- 此版本无更新
### v17.6.16
**更新说明：**
1. 功能优化
- 修复已知问题
### v17.6.15
**更新说明：**
1. 功能优化
- 插件库适配 Cesium.defaultValue 方法，以兼容官方 Cesium 的接口更新改动
- 修复 Cesium Viewer 中设置默认底图报错的问题
### v17.6.14
**更新说明：**
- 此版本无更新
### v17.6.13
**更新说明：**
- 此版本无更新
### v17.6.12
**更新说明：**
- 优化瓦片类型Provider上isStretchImage参数默认拉伸
### v17.6.11
**更新说明：**
- 此版本无更新
### v17.6.10
**更新说明：**
- 此版本无更新
### v17.6.9
**更新说明：**
- 此版本无更新
### v17.6.8
**更新说明：**
1. 功能优化
- 修复包含空格字符的图层访问令牌（token）认证失败问题
### v17.6.7
**更新说明：**
- 此版本无更新
### v17.6.6
**更新说明：**
1. 功能优化
- 优化IGS地图服务一张图出图模式下闪烁和卡顿的问题
### v17.6.5
**更新说明：**
- 此版本无更新
### v17.6.4
**更新说明：**
- 此版本无更新
### v17.6.3
**更新说明：**
1. 功能优化
- 修复可视域分析视锥体未定义时的报错问题
- 修复混合接口方式加载动态服务时，出图过滤条件报错的问题
### v17.6.2
**更新说明：**
1. 功能优化
- 修复高频率更新流体模拟粒子数量时出现偶发报错的问题
### v17.6.1
**更新说明：**
- 此版本无更新
### v17.6.0
**更新说明：**
1. 功能新增
- 支持三维仿真可视化：流体模拟仿真和水体效果可视化
- 面积、长度、角度、三角、方位角测量工具支持显示多个测量结果
- 新增IGS地图服务、ArcGIS地图服务、WMS服务一张图出图的服务接入Provider
2. 功能优化
- 优化M3D2.0、2.1服务数据的加载性能和效果
- 优化剖面分析工具和地形分析工具功能效果
### v17.4.7
**更新说明：**
1. 功能优化
- 修复Graphic中半透明图元顺序异常的问题
- 修复剖面分析工具接口异常的问题
- 修复Popup弹窗接口异常的问题
### v17.4.6
**更新说明：**
1. 功能优化
- 修复场景设置罗盘失败的问题
- 修复剖切分析中绘制模型裁剪面功能中，配置剖切辅助面属性不生效的问题
- 修复碰撞检测中多次开启漫游时，碰撞检测失效的问题
### v17.4.5
**更新说明：**
1. 功能优化
- 修复CuttingTool无法剖切3D Tiles的问题
### v17.4.4
**更新说明：**
1. 功能优化
- 优化 GraphicsLayer 图层中深度检测设置的默认值
### v17.4.3
**更新说明：**
1. 功能新增
- 新增MapGIS网格要素容器类MapGISFeatureGridCollection
2. 功能优化
- 优化面积测量工具图形外边线绘制效果
### v17.4.2
**更新说明：**
1. 功能优化
- 优化Tooltip工具根据相对位置定位的问题
- 增强对Cesium1.122版本的兼容
- 修复Mapv热力图显示错误的问题
### v17.4.1
**更新说明：**
1. 功能优化
- 修复API文档中部分接口文档缺失的问题
- 混合开发接口增强，支持MapGIS场景服务和S3M场景服务混合开发
### v17.4.0
**更新说明：**
1. 功能新增
- 三维动态注记丰富避让策略设置
- 支持S3M数据接入
- 支持M3D2.1格式的栅格体元数据接入、配色方案设置、时态切换、透明度设置
- 兼容Cesium1.122版本
2. 功能优化
- 优化绘制辅助剖切面(体)显隐状态控制
- 要素图层对接对gdbp数据的处理
### v17.2.8
**更新说明：**
1. 功能优化
- 三维（Cesium）引擎修复已知问题
### v17.2.7
**更新说明：**
1. 功能优化
- 三维（Cesium）引擎修复已知问题
### v17.2.6
**更新说明：**
1. 功能优化
- 三维（Cesium）引擎修复已知问题
### v17.2.5
**更新说明：**
1. 功能优化
- 三维（Cesium）引擎修复已知问题
### v17.2.4
**更新说明：**
1. 功能优化
- 三维（Cesium）引擎修复已知问题
### v17.2.3
**更新说明：**
1. 功能优化
- 三维（Cesium）引擎修复填挖方计算接口问题
- 三维（Cesium）引擎中兼容高版本cesium加载IGS服务支持设置header
### v17.2.2
**更新说明：**
1. 功能优化
- 三维（Cesium）引擎修复已知问题
### v17.2.1
**更新说明：**
1. 功能优化
- 三维（Cesium）引擎优化命名空间结构
- 三维（Cesium）引擎修复已知问题
### v17.2.0
**更新说明：**
1. 功能新增
- 三维（Cesium）引擎支持加载自定义裁图原点、自定义裁图方向的瓦片服务
- 三维（Cesium）引擎实现多DEM服务聚合显示
2. 功能优化
- 三维（Cesium）引擎优化坡向分析中的箭头效果
### v17.0.0
**更新说明：**
1. 功能新增
- 支持WebClient库与第三方Cesium库混合开发
- 三维Cesium插件上支持聚合专题图
2. 功能优化
- 提升Web端动态注记站立显示时性能Cesium引擎
- 优化阴影分析速度
- M3D2.0缓存加载流畅度优化
### V16.8.0
**更新说明：**
1. 功能新增
- 地质体模型夸张显示（模型局部沿地心方向拉伸）
- 模型缓存增加线框显示和轮廓显示样式
- 支持在地质体模型中模拟隧道开挖
- 模型压平增加根据要素ID压平的功能。
- 支持通过二次开发扩展的方式实现三维钻孔渲染、多视图漫游功能
- Billbord支持播放动图（git图或图片序列）
2. 功能优化
- 支持在对数缓冲下进行可视域分析
- 漫游功能优化
### V16.6.0
**更新说明：**
1. 功能新增
- 新增三维场景碰撞检测功能
- 新增键盘漫游功能
- 新增自定义坐标系（如高斯）数据和服务(含矢量瓦片)的接入功能
- 新增全局的请求拦截器
- 新增水面倒影特效
- 新增地表（半）透明时，影像图层透明度独立控制功能
2. 功能优化
- 卷帘增加对以下图层类型的支持：Cesium3DTilesModelCahceLayer、IGSFeatureLayer、WFSLayer、GeoJsonLayer、KML、KMZ、CZML
- 模型编辑接口增加对 M3D、3DTiles 服务类型数据的支持
- 洪水淹没分析支持水面倒影
- 动态注记增加对含上下标、分式的三维标注的支持
- 视频投放功能支持投放到指定的场景元素上
### V16.4.0
**更新说明：**
1. 功能新增
- 新增支持支持视频调绘功能，支持基于视频流的调绘、量算
- M3D 模型缓存图层新增支持自定义着色器，支持白模泛光特效的实现
- 新增支持动态河流覆盖物类型
- 新增模型沿地形漫游
- 新增基于服务端的地图要素查询，支持空间查询、属性查询；客户端查询新增支持根据 OID 显隐图元（M3D 2.0），设置图元透明度（M3D）
- 新增支持地图图片图层显示
2. 功能优化
- 卷帘对比分析功能优化，支持纵向、横向常用的卷帘方式，支持矩形、小望远镜、多边形等自定义范围方式；
- 地形剖切分析功能优化，支持纹理封边；
- 视频投放功能优化，支持俯仰角、翻滚角、方位角、水平/竖直广角等参数设置
- 文字覆盖物显示效果优化，支持贴地图和站立两种类型
- 动态注记显示效果优化，支持在前端实时绘制矢量瓦片点要素动态注记，动态注记支持广告牌、贴地效果；支持避让；支持淡入淡出效果
- 优化客户端可视化效果，包括专题图表达、基于 EChart 的可视化、基于 MapV 的可视化显示效果
### V16.2.0
**更新说明：**
1. 功能新增
- 新增支持前端符号的二三维一体化管理
- 新增行业标绘功能：支持基础、军事两类符号的交互式编辑，支持属性、生长、显隐、闪烁、路径、比例等动画类型，支持态势编辑、管理、推演等功能
- 新增基于 GeoJson、要素图层创建单值、分段等前端三维专题图功能
- 新增任意面剖切
- 新增流动线、光晕等纹理效果
- 新增动态剖切封边功能
- 新增动态注记功能
- 新增模型绘存图层本地绘存功能
- 新增 M3D 模型位置和姿态编辑接口和工具
- 新增 M3D 模型按属性爆炸功能
- 新增地质体网格模型支持按空间范围进行筛选显示功能
- 新增 M3D 模型图层卷帘功能
- 新增角度测量工具
- 新增地形的网格化显示
- 动态剖切支持凹多边形折线
- 支持模型凹凸纹理贴图和显示
- 标注图层支持更丰富的注记样式：新增阴影、角度、空心、文字间距、文字轮廓、文字背景等 13 种样式
2. 功能优化
- 路径漫游支持不同路段设置不同的速度
- M3DServer、SceneServer 服务图层适配 M3D1.0 缓存数据
- cesium 量算工具，量算结果单位支持自定义
- M3D 效率优化
### V16.0.0
**更新说明：**
1. 功能新增
- 新增瓦片错级机制
- 长度测量，增加避让处理、单位转换等功能，支持样式配置
- 注记图层增加控制可见性、显示文本长度等参数
- 动画漫游新增获取模型的方法、设定点不同速度漫游场景等功能
2. 功能优化
- 提升 MapGIS 矢量图层能力，提升 filter 查询、多区绘制、系统库设置等能力，支持设置线矢量图层的高度
- 解决动画漫游设定速度和时间数组中方向向量计算问题
- 优化地形图层、注记图层等图层定位、及显示显示
- 优化测量，包括三角测量、贴地测量等功能
- 优化阴影分析、动画漫游等分析功能
- 优化多个接口，新增多个属性
### V15.6.0
**更新说明：**
1. 功能新增
- 注记图层增加最大显示文本长度参数
- 注记图层增加根据相机远近设置可见性的控制参数
- 增加 OGC WFS 加载接口
- 新增动态圆波纹后处理特效
- 新增雷达扫描后处理特效
- 模型图层加载新增支持跳转动画
2. 功能优化
- 解决地形剖切结果 echart 对象无法修改大小
- 修改地形压平后为避免影响默认相机加载地形瓦片
### V15.4.0
**更新说明：**
1. 功能新增
- 新增 MapGIS 注记服务图层
- 添加服务数据接口新增是否开启缓存参数
- 新增支持 webMercator 坐标系 MapGIS 地图文档服务
- 新增地形剖切功能
- 新增支持 beijing54 椭球类型
- 新增支持基于 indexDB 实现 M3D 2.0 数据的前端属性存储和查询功能
- 新增支持 M3D 数据属性信息前端挂接
- 新增支持 M3D 数据 OID 拾取
2. 功能优化
- 优化 DrawElement 增加销毁对象方法
- 优化使用缓存后，数据稍大交互后无法正确加载数据
- 解决坡度坡向分析时，渲染结果不消失问题
- 优化数据加载性能
- 解决 DrawElement 对象造成鼠标移动卡顿问题
- 解决样式存在冲突的问题，统一加前缀
- popup 的 visible 参数不支持 v-model
- 解决加载 mapgis 三维地图文档服务时需要支持图层过滤
3. 开发资源丰富
- 新增多个三维示例
### V15.2.0
**更新说明：**
1. 功能新增
- 实现模型压平功能,支持任意凸多边形的压平
- 优化粒子特效：优化雨雪雾粒子效果，提升真实度；新增火焰、喷泉粒子特效、以及烟雾粒子特效
- 提供解压 M3D 压缩数据流的功能，客户端支持将压缩的流进行高效解压，并渲染
2. 性能优化
- 海量倾斜摄影数据缓存结构优化策略升级，提高网络传输效率以及前端渲染效率
- 加载渲染亿级 Las 格式点云数据，帧率在 15 帧以上，交互流畅；
- 加载渲染亿级地质网格剖分结果数据，帧率在 15 帧以上，交互流畅；
- 加载渲染千万级三角网单个地质体数据，帧率在 15 帧以上，交互流畅；
- 加载渲染 500 平方公里以上倾斜模型，帧率在 15 帧以上，交互流畅；
3. 站点维护
- 示例说明文档美化
### V15.0.0
**更新说明：**
- 全面整合了 Cesium 等脚本库，代码模块化，采用最新的 JavaScript ES6 标准；
- 提供 Cesium 开发库、示例、API，支持二三维数据可视化（含 M3D、OGC、MapGIS 地图服务、第三方地图服务等）、图形绘制、量算、模型漫游、三维查询与分析、场景特效，以及三维场景下的大数据可视化与分析等功能；
- Cesium 示例全面优化，提供配套示例说明文档与 API；
- 新增集成 Echarts、MapV 可视化库，支持在 Web 三维模式下实现大数据可视化、大数据分析功能；
- 新增集成 Turf.js 客户端空间分析库，提供 Web 三维客户端空间计算能力。