## MapGIS Client for JavaScript（Vue）产品介绍

    MapGIS Client for JavaScript 为云 GIS 网络客户端开发平台，在云计算、大数据管理与分析等技术支撑下，将传统 WebGIS 与云 GIS 完美融合，集成了主流地图开源框架和多种可视化库，增强了大数据、实时流数据的高效可视化表达和分析功能，为用户带来全新开发体验。MapGIS Client for JavaScript 产品支持基于 HTML5 方式的纯 JS 开发，也支持基于 Vue 的组件式开发，提供 Vue 组件式开发产品——MapGIS Client for JavaScript Vue 组件产品。

​ MapGIS Client for JavaScript Vue 组件产品，结合 MapGIS 强大的 GIS 服务资源，提供了 10+种模型，6 大类视图组件，超 300+个原子组件，全面支撑二三维云 GIS 应用开发。产品提供的所有组件遵循统一的 Vue 组件开发标准，支持异地开发，具有易用、灵活、高效的特性。

- **易用**：基于 HTML、CSS、JavaScript，具有简单、灵活的 API，轻松上手
- **灵活**：前端组件化，通过简洁的 API 提供高效数据绑定和灵活组件，可复用，易维护，具有高度的伸缩性
- **高效**：轻量级框架，超快虚拟 DOM，最省心的优化

> MapGIS Client for JavaScript Vue 组件产品组件开发 SDK 提供 WebGIS 开发所需的组件库、API、示例等，结合<a href="http://www.smaryun.com/dev/resource_center.html#/type27/tag10/page1" target="_blank">司马云开发世界资源中心</a>的配套开发资源，以及<a href="http://www.smaryun.com/cloudlisten/index.php" target="_blank">云听社区</a>、开源社区<a href="https://github.com/MapGIS/WebClient-JavaScript" target="_blank">GitHub</a> 、<a href="https://gitee.com/osmapgis/WebClient-JavaScript" target="_blank">Gitee</a>，助力开发者高效开发。

### Vue 组件开发

&ensp;&ensp;&ensp;&ensp;Vue.js 是一套用于构建用户界面的渐进式 JavaScript 框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。 因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，如果项目比较复杂，可以极大简化代码量，并且对后期的需求变更和维护也更加友好。

> 详情请参考<a href="https://cn.vuejs.org/" target="_blank">Vue.js 官网</a>

## <span id="download">产品下载</span>

​ MapGIS Client for JavaScript Vue 组件产品为开源产品，可从司马云-云开发世界下载正式发布的产品包，也可从开源社区（Gitee、GitHub）直接获取产品源码，自行编译、打包使用。还可通过 NPM 包方式引入产品开发库：

- MapGIS 官方下载地址：<a href="http://smaryun.com/dev/download_detail.html#/download828" targer="_blank">http://smaryun.com/dev/download_detail.html#/download828</a>
- GitHub 托管地址：<a href="https://github.com/MapGIS/WebClient-Vue" targer="_blank">https://github.com/MapGIS/WebClient-Vue</a>
- Gitee 托管地址：<a href="https://gitee.com/osmapgis/WebClient-Vue" targer="_blank">https://gitee.com/osmapgis/WebClient-Vue</a>
- MapGIS 相关 NPM 包资源地址：<a href="https://www.npmjs.com/org/mapgis" targer="_blank">https://www.npmjs.com/org/mapgis</a>

## 产品特性

### 提供丰富的功能组件资源

&ensp;&ensp;&ensp;&ensp;Vue 组件式开发提供丰富的组件资源，包括地图组件、可视化组件、交互工具组件、分析组件、行业标绘组件等，全面提升开发效率。

- 即拿即用的二维地图组件与三维场景组件，快速支持全空间二三维 GIS 数据融合与可视化
- 丰富的可视化组件，接入各类可视化库（EchartGL、MapV、D3 等），支持丰富、炫酷的地理大数据可视化表达与分析功能，以及支持单值、分段、统计等二三维客户端专题图功能
- 丰富的工具组件，提供常用的目录树、图层树、交互查询、标注、测量、统计图、打印输出、绘制、多屏联动等工具组件，高效开发应用
- 丰富的分析组件，全面支持二三维 GIS 空间分析、网络分析、地形分析、专业三维分析等功能，大幅提升开发效率
- 提供 CIM 应用组件，包括规划设计、不动产智治、BIM 管理、仿真模拟、综合分析等多类组件
- 提供动态标绘系列组件，实现行业符号资源管理、动态标绘、态势推演等二三维场景一体化管理和联合操作
- 提供多套 UI 主题，支持一键切换主题

<center>
  <img src="./static/modules/component/source/img/Vue组件.png" alt="组件开发库" style="zoom:80%;" />
  <br>
  <div class="notes">MapGIS Client for JavaScript组件开发库</div>
</center>

<br/>

### 组件式开发支持高效扩展

&ensp;&ensp;MapGIS Client for JavaScript Vue 组件产品提供的组件预留了供外部组件调用的函数、事件和属性，支持直接复用和封装，具备多级封装、多层复用，高效扩展的能力。

### 组件式开发构建 SPA 响应式应用

&ensp;&ensp; MapGIS Client for JavaScript Vue 组件产品提供的组件支持 SAP 响应式布局，支持多种设备，跨终端、跨浏览器！基于该产品 MapGIS 研发出两款面向响应式应用搭建的产品 MapGIS WebAppBuilder 和 MapGIS MapDataV，具备可视化搭建，适配多设备等特点。

### 组件式开发构建跨平台跨终端应用

&ensp;&ensp;&ensp;&ensp;结合 Apache Cordova 、 Electron 等跨平台开发框架，将 MapGIS Client for JavaScript Vue 组件产品开发出来的应用部署为 Web 应用、移动应用、桌面应用，适配 Windows、Linux、Mac、 Android、iOS、Harmony 等 PC 和移动端操作系统。

## 环境参数

### 硬件配置

推荐配置

- CPU：酷睿 i5 10400F 及以上
- 内存：16G 及以上
- 显存：独立显卡，显存 6G 及以上（gtx 1060）
  > 场景的流畅度除了和硬件配置有关外，也和数据量的大小有关，请根据实际情况进行选择。

最低配置

- 需要浏览器支持 webgl。测试当前浏览器对 webgl 的支持情况：<a href="http://webglreport.com" targer="_blank">webglreport.com</a>

### 浏览器兼容

- 取决于浏览器对 webgl 的支持情况。可以在 <a href="http://caniuse.com/webgl" targer="_blank">caniuse.com</a>上，查看浏览器对 webgl 的支持情况

### 开发环境

- 前后台混合型项目 IDE 推荐：Microsoft Visual Studio（2015 及以上）、MyEclipse（2019 及以上）等
- 纯前端项目 IDE 推荐：Visual Studio Code、WebStorm 等

### GIS 环境

​ 产品融合了多种 GIS 服务标准，提供大量的 GIS 服务组件。开发时，用户可直接使用第三方已发布的 GIS 服务资源，也可以自行构建 GIS 服务器环境，支持如下 MapGIS 服务器产品：

- 传统高性能 GIS 服务器平台：提供传统 GIS 相关的地图服务、要素服务、分析服务等。包括<a href="http://smaryun.com/dev/download_detail.html#/download689" targer="_blank">MapGIS IGServer 开发版</a>、<a href="http://www.smaryun.com/goods.php?id=2229" targer="_blank">MapGIS IGServer .NET 版</a>、<a href="http://www.smaryun.com/goods.php?id=3333" targer="_blank">MapGIS IGServer Java for Windows 版</a>、 <a href="http://smaryun.com/goods.php?id=3193" targer="_blank">MapGIS IGServer（九州）版</a>等版本。产品相关安装配置和操作使用手册，请参见<a href="http://www.smaryun.com/dev/service-space/resource?from=1#/node_id75" targer="_blank">司马云-开发世界-资源中心-服务器 GIS</a>；
- 大数据 GIS 分析服务器平台：<a href="http://www.smaryun.com/goods.php?id=2558" targer="_blank">MapGIS IGServer -X</a>，提供矢量、影像、文本等大数据分析服务，产品相关安装配置和操作使用手册，请参见<a href="http://www.smaryun.com/dev/service-space/resource?from=1#/node_id172" targer="_blank">司马云-开发世界-资源中心-云 GIS-MapGIS 大数据与云平台-MapGIS IGServer-X</a>；
- 智能 GIS 分析服务器平台：<a href="http://www.smaryun.com/goods.php?id=2558" targer="_blank">MapGIS IGServer -S</a>，提供智能 GIS 服务，产品相关安装配置和操作使用手册，请参见<a href="http://www.smaryun.com/dev/service-space/resource?from=1#/node_id187" targer="_blank">司马云-开发世界-资源中心-云 GIS-MapGIS 大数据与云平台-MapGIS IGServer-S</a>。

## 开发授权

​ 您可以通过访问<a href="http://www.smaryun.com/" targer="_blank">司马云官方网站</a>获得开发者授权，提供免费云开发授权与硬 KEY 开发授权两种模式，开发者可结合实际应用需求选用。申请免费开发授权请前往<a href="http://smaryun.com/helper.php#/16" targer="_blank">帮助中心</a>

- 免费云开发授权需联网完成授权验证。
- 硬 KEY 开发授权，可离线完成授权验证。

## 开发 SDK

### 开发包

&ensp;&ensp;&ensp;&ensp;MapGIS Client for JavaScript Vue 组件开发 SDK，含二三维 WebGIS 开发所需的开发库、API、示例、文档等资源，可访问<a href="http://webclient.smaryun.com/#/index" target="_blank">MapGIS Client for JavaScript 产品门户</a>在线体验，或<a a href="#download">下载资源</a>本地部署。

### 开发库

| 类型     | 开发库                         | 说明                                                                              |
| :------- | :----------------------------- | :-------------------------------------------------------------------------------- |
| Cesium   | @mapgis/webclient-vue-cesium   | Cesium 的 vue 组件开发库，提供基于 Cesium 的 Web 三维 GIS 应用的 vue 组件开发     |
| MapboxGL | @mapgis/webclient-vue-mapboxgl | MapboxGL 的 vue 组件开发库，提供基于 MapboxGL 的 Web 二维 GIS 应用的 vue 组件开发 |
| UI       | @mapgis/webclient-vue-ui       | MapGIS-UI vue 组件开发库，提供 MapGIS UI 组件                                     |
| Plot     | @mapgis/webclient-plot         | MapGIS 二三维行业标绘组件开发库                                                   |

> 核心库分别提供压缩版与开发版，min 版一般在应用开发完成后发布部署阶段使用；二次开发阶段通常使用开发版，方便查阅与调试。

### API 参考

- <a href="http://webclient.smaryun.com:8087/" target="_blank">MapGIS Client for JavaScript Vue 开发文档（Cesium）</a>
- <a href="http://webclient.smaryun.com:8088" target="_blank">MapGIS Client for JavaScript Vue 开发文档（MapboxGL）</a>
- <a href="http://webclient.smaryun.com:8089" target="_blank">MapGIS Client for JavaScript Vue 开发文档（UI）</a>
- <a href="http://webclient.smaryun.com/static/modules/mapboxgl/api/mapboxgl-mapgis/index.html" target="_blank">MapGIS Client for JavaScript（MapboxGL） API</a>
- <a href="http://webclient.smaryun.com/static/modules/cesium/api/cesium-mapgis/index.html" target="_blank">MapGIS Client for JavaScript（Cesium） API</a>
- <a href="http://webclient.smaryun.com/static/modules/cesium/api/cesium/index.html" target="_blank">MapGIS Cesium 内核扩展 API</a>
- <a href="https://www.mapbox.com/mapbox-gl-js/api/" target="_blank">MapboxGL 原生 API</a>

### 开发示例

- 在线体验：<a href="http://webclient.smaryun.com/storybook/index.html" target="_blank">MapGIS Client for JavaScript Vue 组件开发示例</a>
- 离线使用：方式一，可在司马云-云开发世界下载<a href="http://www.smaryun.com/dev/download_detail.html#/download828" target="_blank">MapGIS Client for JavaScript 开发包</a>，解压后按说明步骤发布即可；方式二，可通过<a href="https://github.com/MapGIS/WebClient-JavaScript" targer="_blank">GitHub</a>、<a href="https://gitee.com/osmapgis/WebClient-JavaScript" targer="_blank">Gitee</a>获取产品源码，按说明文档编译运行。

## 模块说明

### MapGIS Client for Javascript Vue（MapBoxGL）

<center>
  <img src="./static/modules/component/source/img/WebClient-Vue-MapboxGL.png" alt="Vue for MapBoxGL" style="zoom:100%;" />
  <br>
  <div class="notes">MapGIS Client for Javascript Vue（MapBoxGL）模块图</div>
</center>

<br/>

### MapGIS Client for Javascript Vue（Cesium）

<center>
  <img src="./static/modules/component/source/img/WebClient-Vue-Cesium.png" alt="Vue for Cesium" style="zoom:100%;" />
  <br>
  <div class="notes">MapGIS Client for Javascript Vue（Cesium）模块图</div>
</center>

<br/>

### MapGIS Client for Javascript Vue（UI）

<center>
  <img src="./static/modules/component/source/img/WebClient-Vue-UI.png" alt="Vue for Cesium" style="zoom:100%;" />
  <br>
  <div class="notes">MapGIS Client for Javascript Vue（UI）模块图</div>
</center>

<br/>

## 产品更新

### <font color=red>V10.7.4.10</font>

1. 功能新增：
- 三维cesium中新增模型开挖功能

2. 功能优化：
- 优化三维cesium和二维mapboxgl中的webTileLayer组件
- 优化三维cesium栅格体元绘制功能

### <font color=red>V10.7.2.10</font>

1. 功能新增：
- 二维mapbox中增加WebTileLayer图层组件
- 三维cesium中增加风场可视化组件

2. 功能优化：
- 优化三维cesium剖切分析效果
- 优化三维cesium地形分析中的洪水淹没分析效果
- 优化缓冲区分析和叠加分析


### <font color=red>V10.7.0.10</font>

1. 功能新增：
- 二三维支持在线百度和高德地图
- 最小最大地图显示范围设置后需要对视图地图生效
- 三维cesium中增加WebTileLayer图层组件

2. 功能优化：
- 修复知识图谱请求报错问题
- 修订视点管理无法对cesium内容截图的bug
- 修订二维绘制组件在绘制完毕后触发两次事件的bug


### <font color=red>V10.6.8.10</font>

1. 功能新增：

- 洪水淹没支持水面倒影
- 模型爆炸优化
- 三维绘制组件支持绘制圆
- 矢量瓦片制图优化
- 模型压平优化
- 二三维新增要素图层组件
- 支持属性体模型的展示、查询、分析功能

### <font color=red>V10.6.6.10</font>

- 场景设置新增自适应地表透明
- 三维卷帘组件支持排它卷帘
- 缓冲区分析、叠加分析、拓扑分析支持三维服务（场景服务、模型缓存、3dtiles）。

### <font color=red>V10.6.4.10</font>

- 卷帘分析三维支持水平卷帘
- 场景漫游支持以绝对高程方式进行场景漫游
- 视频投放增加对指定区域投放功能
- 通视分析增加观察者位置信息
- 缓冲区分析、叠加分析结果增加导出和删除接口
- 维护更新，修复若干 Bug

### <font color=red>V10.6.2.10</font>

1. 功能新增

- 新增知识图谱组件：mapgis-3d-relationship-graph
- 新增要素详情组件：mapgis-3d-popup-feature-detail
- 新增 MapGIS 要素服务专题图组件：mapgis-3d-igs-feature-layer
- 新增三维行业标绘组件：mapgis-3d-plot-layer
- 新增三维行业标绘态势推演组件：mapgis-3d-plot-animation
- 新增二维行业标绘组件：mapgis-2d-plot
- 新增二维态势推演组件：mapgis-2d-plot-animation

2. 功能优化

- mapgis-3d-geojson-layer 组件新增支持传入 Geojson 对象
- mapbox-gl-draw 组件增加绘制过程中撤回最新绘制点功能
- BIM 模型支持编辑、旋转等功能

3. 开发资源完善：

- 完善 cesium 和 UI 的组件示例及开发文档

### <font color=red>V10.6.0.10</font>

1. 功能新增

- 新增三维场景旋转组件：mapgis-3d-rotate
- 新增三维导出图片组件：mapgis-3d-output-image
- 新增二三维动态标绘系列 UI 组件：包括动画设置组件（Animation）、属性设置组件（Attribute）、文件管理组件（FileManager）、符号库管理组件（PlotSymbol）、推演脚本制作组件（Script）、态势管理组件（ScriptList）、SVG 管理及设置面板（SVGManager、SVGSettingPanel）、态势推演时间轴组件（Timeline）等

2. 功能优化

- 组件 mapgis-3d-m3d-layer 去除 layers 属性，保持该组件针对单个图层的唯一性
- 删除组件 mapgis-3d-m3dset，采取 mapgis-3d-m3d-layer 来替代原来的功能
- 组件 mapgis-3d-g3d-layer 重命名
- 组件 mapgis-3d-file-m3d 重命名
- 组件 mapgis-3d-tileset 重命名
- 解决组件 mapgis-3d-tileset 缺少透明度控制能力
- 解决组件 mapgis-3d-g3d-layer 缺少透明度控制能力
- 优化粒子特效组件
- M3D 加载完毕回调事件重命名
- M3D 新增支持高亮属性
- 重命名 geojson 组件
- 支持 M3D 2.0 图层重命名
- 解决 fMapBoxGL 组件 mapgis-draw 缺少绘制圆半径时的半径值和半径线的显示

3. 性能优化

- 组件剖切分析中新增支持 g3d 组图层和多个 m3d 图层
- 控高分析功能优化面板和逻辑
- 阴影分析结果不支持阴影率的查看
- 场景特效组件冗余

4. 新增多个 cesium 和 UI 的组件示例及开发文档

### <font color=red>V10.5.6.10</font>

1. 功能新增

- 新增三维统计专题图图层组件：mapgis-3d-graph-theme-layer 组件
- 新增叠加分析组件：mapgis-3d-overlay-analysis 组件
- 新增缓冲分析组件：mapgis-3d-buffer-analysis 组件
- 新增新增标绘图层组件：mapgis-3d-graphic-layer 组件
- 新增单体建筑生长组件：mapgis-3d-building-grow 组件
- 新增城市生长组件：mapgis-3d-city-grow 组件
- 新增场景投放设置组件：mapgis-3d-projector-setting 组件
- 新增场景投放管理组件：mapgis-3d-projector-manager 组件
- 新增 BIM 构件树组件：mapgis-3d-bim-component 组件
- 新增分层分户组件：mapgis-3d-stratified-household 组件
- 新增 MapGIS 三维服务图层组件：mapgis-3d-g3d-layer 组件
- 新增场景设置组件：mapgis-3d-scene-setting 组件
- 新增要素 popup 详情组件：mapgis-3d-feature-popup 组件
- 新增三维单路径漫游组件
- 新增三维漫游路径管理组件
- 新增三维调试组件：mapgis-3d-debug 组件
- 三维量测组件新增贴地面及贴底线功能
- 组件等值线分析中新增等值面分析功能
- 新增装饰组件：mapgis-ui-decoration 组件
- 新增边框组件：mapgis-ui-borderbox 组件
- 新增视频组件：mapgis-ui-video 组件
- 新增颜色选择器组件：mapgis-ui-tab-panel 组件
- 新增 mapgis-ui-color-pick-panel 组件
- 新增数值面板组件：mapgis-ui-input-number-panel 组件
- 废弃 mapgis-3d-m3dset 组件
- 新增 D3 颜色选择器组件

2. 功能优化

- 组件 mapgis-3d-m3d-layer 去除 layers 属性，保持该组件针对单个图层的唯一性
- 删除组件 mapgis-3d-m3dset，采取 mapgis-3d-m3d-layer 来替代原来的功能
- 组件 mapgis-3d-g3d-layer 重命名
- 组件 mapgis-3d-file-m3d 重命名
- 组件 mapgis-3d-tileset 重命名
- 解决组件 mapgis-3d-tileset 缺少透明度控制能力
- 解决组件 mapgis-3d-g3d-layer 缺少透明度控制能力
- 优化粒子特效组件
- M3D 加载完毕回调事件重命名
- M3D 新增支持高亮属性
- 重命名 geojson 组件
- 支持 M3D 2.0 图层重命名
- 解决 fMapBoxGL 组件 mapgis-draw 缺少绘制圆半径时的半径值和半径线的显示

3. 性能优化

- 组件剖切分析中新增支持 g3d 组图层和多个 m3d 图层
- 控高分析功能优化面板和逻辑
- 阴影分析结果不支持阴影率的查看
- 场景特效组件冗余

4. 新增多个 cesium 和 UI 的组件示例及开发文档

### <font color=red>V10.5.4.10</font>

1. 功能新增

- 新增三维通视分析组件
- 新增三维可视域分析组件
- 新增三维卷帘组件
- 新增三维 MapGIS VectorLayer 组件
- ArcGIS 服务图例组件
- ArcGIS 瓦片组件和地图组件
- 支持 KVP 方式设置图层并调整图层样式
- 支持子图层可见性控制
- 扩展支持交互拉框绘制
- 新增鹰眼组件
- 新增 dynamicTile 实现动态剖切

2. 功能优化

- 优化坡向坡度组件
- 优化测量组件
- 优化标绘组件
- 解决采用 Link 方式时，如果只有一个场景的时候无法向外传输视图事件
- 解决采用 link 的没有指定联动的三维场景并且不知道返回的空间范围
- 解决 popup 的没有强制渲染参数
- 解决 popup 的 visible 参数不支持 v-model 且关闭时没有释放 dom
- 解决将瓦片服务中的 srs 修改为 tilingScheme
- 解决 VectorTileOptions 的 tilingScheme 目前只支持 Object 类型
- 解决 OGCWMTSLayer 的缺少 Format 参数
- 解决各图层 url 参数不统一

3. 新增多个 cesium 的组件示例及开发文档

### <font color=red>V10.5.2.10</font>

1. 增加 MapBox Vue 组件，包括：

- 控制组件： attribution、geolocate、navagation、scale
- UI 组件：marker、popup、绘制、测量
- 图层组件：geojson、vector、raster、image、video、canvas、igs(doclayer、tilelayer、vectorlayer、wms、wmts)
- 状态组件：组图层、数据源、专题图、样式库等

2. 增加 Cesium Vue 组件，包括：

- 控制组件：state
- UI 组件：popup
- 图层组件：场景、栅格、影像、igs(doclayer、tilelayer）、3dTile、m3d、mapv
- 状态组件：组图层、数据源、专题图、样式库等

3. 新增 mapbox 和 cesium 的组件示例及文档

### <font color=red>V10.5.0.10</font>

1. 全面整合了脚本库，代码模块化，采用最新的 JavaScript ES6 标准；
2. 采用 Vue、React 框架

## 第三方依赖

- Vue：是一套用于构建用户界面的渐进式 JavaScript 框架，高效开发（<a href="https://cn.vuejs.org/" target="_blank">https://cn.vuejs.org/</a>）

- MapboxGL：使用 WebGL 技术独立渲染的开源 JavaScript 库，作为前端渲染矢量瓦片交互地图的工具（<a href="https://docs.mapbox.com/mapbox-gl-js/api/" target="_blank">https://docs.mapbox.com/mapbox-gl-js/api/</a>）

- Cesium：用于显示三维地球和地图的开源 JavaScript 库，基于 WebGL 的地图引擎（<a href="https://cesium.com/platform/cesiumjs/" target="_blank">https://cesium.com/platform/cesiumjs/</a>）

- ECharts：基于 JavaScript 的开源可视化图表库（<a href="https://echarts.apache.org/zh/index.html" target="_blank">https://echarts.apache.org/zh/index.html</a>）

- MapV：地理信息可视化开源库（<a href="https://mapv.baidu.com/" target="_blank">https://mapv.baidu.com/</a>）

- Turf：客户端空间分析开源库（<a href="https://turfjs.org/" target="_blank">https://turfjs.org/</a>）

- D3：基于 Web 标准的 JavaScript 图形可视化库（<a href="https://d3js.org/" target="_blank">https://d3js.org/</a>）