@mapgis/webclient-cesium-plugin

v17.2.1

Published

13 days ago

开发时需要引入MapGIS 3DClient for WebGL（即 MapGIS Client for JavaScript (Cesium)）开发包；其中包括必备的 CSS 文件和 JS 文件；

Downloads

252

0High
0Medium
0Low

zondy service &mapboxgl

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、文件方式引入

前往司马云官网下载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的方式进行安装

npm install @mapgis/cesium
npm install @mapgis/webclient-cesium-plugin

安装中需要注意的事项：

其中@mapgis/cesium库，目前版本仅支持ES5的打包方式，因此请以NPM的方式下载开发包，npm安装完成后，请将开发包从node_modules里的@mapgis/cesium文件夹里拷贝出来，放入项目的静态资源目录中

1.2、Beta版

1.2.1、文件方式引入

前往内网npm开发库下载MapGIS 3DClient for WebGL相关开发包

@mapgis/webclient-cesium-plugin
@mapgis/cesium 以 16.1.26版本为例进行说明

1.在该网页中请先选择要下载的版本

2.点击相应的版本号，在右侧点击下载按钮，下载压缩包

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源切换为内网：

npm set registry http://192.168.11.130:4873/

通过内网NPM的方式进行安装

npm install @mapgis/cesium
npm install @mapgis/webclient-cesium-plugin

安装中需要注意的事项：

其中@mapgis/cesium开发包仅支持通过文件的方式引入，不支持模块化通过import的方式引入，npm安装完成后，请将开发包从node_modules里的@mapgis/cesium文件夹里拷贝出来，放入项目的静态资源目录中

2、引入开发库

2.1、文件方式引入

在index.html中引入引擎库和插件库

<!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的方式，因此通过文件方式引入引擎库

<!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插件库

npm install @mapgis/webclient-cesium-plugin

3、初始化场景视图

3.1、文件方式引入

在项目的css文件中设置场景视图容器的样式，否则场景视图无法显示

/*设置场景视图的样式，一定要设置否则地图无法显示*/
#你的场景视图的id {
    width: 100%;
    height: 100%;
    position: absolute;
}

初始化场景视图对象

<!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文件中设置场景视图容器的样式，否则场景视图无法显示

/*设置场景视图的样式，一定要设置否则地图无法显示*/
#你的场景视图的id {
    width: 100%;
    height: 100%;
    position: absolute;
}

找到项目的index.html文件，由于@mapgis/Cesium不支持ES6模式，因此在里面引入引擎库

<!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元素

<!--场景视图容器div-->
<div id="你的场景视图的id">
</div>

引入需要的构造函数

import { SceneView } from '@mapgis/webclient-cesium-plugin'
import { Map } from "@mapgis/webclient-common"

在mounted生命周期中初始化场景视图

// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const sceneView = new SceneView({
  // 视图id
  viewId: "你的场景视图的id",
  // 图层管理容器
  map: map
});

4、@mapgis/webclient-cesium-plugin 版本说明

4.1、正式版

v17.2.1

更新说明：

功能优化

三维（Cesium）引擎优化命名空间结构
三维（Cesium）引擎修复已知问题

v17.2.0

更新说明：

功能新增

三维（Cesium）引擎支持加载自定义裁图原点、自定义裁图方向的瓦片服务
三维（Cesium）引擎实现多DEM服务聚合显示

功能优化

三维（Cesium）引擎优化坡向分析中的箭头效果

v17.0.0

更新说明：

功能新增

支持WebClient库与第三方Cesium库混合开发
三维Cesium插件上支持聚合专题图

功能优化

提升Web端动态注记站立显示时性能Cesium引擎
优化阴影分析速度
M3D2.0缓存加载流畅度优化

V16.8.0

更新说明：

功能新增

地质体模型夸张显示（模型局部沿地心方向拉伸）
模型缓存增加线框显示和轮廓显示样式
支持在地质体模型中模拟隧道开挖
模型压平增加根据要素ID压平的功能。
支持通过二次开发扩展的方式实现三维钻孔渲染、多视图漫游功能
Billbord支持播放动图（git图或图片序列）

功能优化

支持在对数缓冲下进行可视域分析
漫游功能优化

V16.6.0

更新说明：

功能新增

新增三维场景碰撞检测功能
新增键盘漫游功能
新增自定义坐标系（如高斯）数据和服务(含矢量瓦片)的接入功能
新增全局的请求拦截器
新增水面倒影特效
新增地表（半）透明时，影像图层透明度独立控制功能

功能优化

卷帘增加对以下图层类型的支持：Cesium3DTilesModelCahceLayer、IGSFeatureLayer、WFSLayer、GeoJsonLayer、KML、KMZ、CZML
模型编辑接口增加对 M3D、3DTiles 服务类型数据的支持
洪水淹没分析支持水面倒影
动态注记增加对含上下标、分式的三维标注的支持
视频投放功能支持投放到指定的场景元素上

V16.4.0

更新说明：

功能新增

新增支持支持视频调绘功能，支持基于视频流的调绘、量算
M3D 模型缓存图层新增支持自定义着色器，支持白模泛光特效的实现
新增支持动态河流覆盖物类型
新增模型沿地形漫游
新增基于服务端的地图要素查询，支持空间查询、属性查询；客户端查询新增支持根据 OID 显隐图元（M3D 2.0），设置图元透明度（M3D）
新增支持地图图片图层显示

功能优化

卷帘对比分析功能优化，支持纵向、横向常用的卷帘方式，支持矩形、小望远镜、多边形等自定义范围方式；
地形剖切分析功能优化，支持纹理封边；
视频投放功能优化，支持俯仰角、翻滚角、方位角、水平/竖直广角等参数设置
文字覆盖物显示效果优化，支持贴地图和站立两种类型
动态注记显示效果优化，支持在前端实时绘制矢量瓦片点要素动态注记，动态注记支持广告牌、贴地效果；支持避让；支持淡入淡出效果
优化客户端可视化效果，包括专题图表达、基于 EChart 的可视化、基于 MapV 的可视化显示效果

V16.2.0

更新说明：

功能新增

新增支持前端符号的二三维一体化管理
新增行业标绘功能：支持基础、军事两类符号的交互式编辑，支持属性、生长、显隐、闪烁、路径、比例等动画类型，支持态势编辑、管理、推演等功能
新增基于 GeoJson、要素图层创建单值、分段等前端三维专题图功能
新增任意面剖切
新增流动线、光晕等纹理效果
新增动态剖切封边功能
新增动态注记功能
新增模型绘存图层本地绘存功能
新增 M3D 模型位置和姿态编辑接口和工具
新增 M3D 模型按属性爆炸功能
新增地质体网格模型支持按空间范围进行筛选显示功能
新增 M3D 模型图层卷帘功能
新增角度测量工具
新增地形的网格化显示
动态剖切支持凹多边形折线
支持模型凹凸纹理贴图和显示
标注图层支持更丰富的注记样式：新增阴影、角度、空心、文字间距、文字轮廓、文字背景等 13 种样式

功能优化

路径漫游支持不同路段设置不同的速度
M3DServer、SceneServer 服务图层适配 M3D1.0 缓存数据
cesium 量算工具，量算结果单位支持自定义
M3D 效率优化

V16.0.0

更新说明：

功能新增

新增瓦片错级机制
长度测量，增加避让处理、单位转换等功能，支持样式配置
注记图层增加控制可见性、显示文本长度等参数
动画漫游新增获取模型的方法、设定点不同速度漫游场景等功能

功能优化

提升 MapGIS 矢量图层能力，提升 filter 查询、多区绘制、系统库设置等能力，支持设置线矢量图层的高度
解决动画漫游设定速度和时间数组中方向向量计算问题
优化地形图层、注记图层等图层定位、及显示显示
优化测量，包括三角测量、贴地测量等功能
优化阴影分析、动画漫游等分析功能
优化多个接口，新增多个属性

V15.6.0

更新说明：

功能新增

注记图层增加最大显示文本长度参数
注记图层增加根据相机远近设置可见性的控制参数
增加 OGC WFS 加载接口
新增动态圆波纹后处理特效
新增雷达扫描后处理特效
模型图层加载新增支持跳转动画

功能优化

解决地形剖切结果 echart 对象无法修改大小
修改地形压平后为避免影响默认相机加载地形瓦片

V15.4.0

更新说明：

功能新增

新增 MapGIS 注记服务图层
添加服务数据接口新增是否开启缓存参数
新增支持 webMercator 坐标系 MapGIS 地图文档服务
新增地形剖切功能
新增支持 beijing54 椭球类型
新增支持基于 indexDB 实现 M3D 2.0 数据的前端属性存储和查询功能
新增支持 M3D 数据属性信息前端挂接
新增支持 M3D 数据 OID 拾取

功能优化

优化 DrawElement 增加销毁对象方法
优化使用缓存后，数据稍大交互后无法正确加载数据
解决坡度坡向分析时，渲染结果不消失问题
优化数据加载性能
解决 DrawElement 对象造成鼠标移动卡顿问题
解决样式存在冲突的问题，统一加前缀
popup 的 visible 参数不支持 v-model
解决加载 mapgis 三维地图文档服务时需要支持图层过滤

开发资源丰富

新增多个三维示例

V15.2.0

更新说明：

功能新增

实现模型压平功能,支持任意凸多边形的压平
优化粒子特效：优化雨雪雾粒子效果，提升真实度；新增火焰、喷泉粒子特效、以及烟雾粒子特效
提供解压 M3D 压缩数据流的功能，客户端支持将压缩的流进行高效解压，并渲染

性能优化

海量倾斜摄影数据缓存结构优化策略升级，提高网络传输效率以及前端渲染效率
加载渲染亿级 Las 格式点云数据，帧率在 15 帧以上，交互流畅；
加载渲染亿级地质网格剖分结果数据，帧率在 15 帧以上，交互流畅；
加载渲染千万级三角网单个地质体数据，帧率在 15 帧以上，交互流畅；
加载渲染 500 平方公里以上倾斜模型，帧率在 15 帧以上，交互流畅；

站点维护

示例说明文档美化

V15.0.0

更新说明：

全面整合了 Cesium 等脚本库，代码模块化，采用最新的 JavaScript ES6 标准；
提供 Cesium 开发库、示例、API，支持二三维数据可视化（含 M3D、OGC、MapGIS 地图服务、第三方地图服务等）、图形绘制、量算、模型漫游、三维查询与分析、场景特效，以及三维场景下的大数据可视化与分析等功能；
Cesium 示例全面优化，提供配套示例说明文档与 API；
新增集成 Echarts、MapV 可视化库，支持在 Web 三维模式下实现大数据可视化、大数据分析功能；
新增集成 Turf.js 客户端空间分析库，提供 Web 三维客户端空间计算能力。

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

1、获取 MapGIS 3DClient for WebGL 开发包

1.1、正式发行版及其更新包

1.1.1、文件方式引入

1.1.2、npm 方式引入

1.2、Beta版

1.2.1、文件方式引入

1.2.2、npm 方式引入

2、引入开发库

2.1、文件方式引入

2.1、npm 方式引入

3、初始化场景视图

3.1、文件方式引入

3.2、npm 方式引入

4、@mapgis/webclient-cesium-plugin 版本说明

4.1、正式版

v17.2.1

v17.2.0

v17.0.0

V16.8.0

V16.6.0

V16.4.0

V16.2.0

V16.0.0

V15.6.0

V15.4.0

V15.2.0

V15.0.0