@mapgis/webclient-leaflet-plugin
Version:
开发时需要引入MapGIS Client for JavaScript（Leaflet）开发包；其中包括必备的 CSS 文件和 JS 文件；
444 lines (268 loc) • 10.9 kB
Markdown
# 1、获取 MapGIS Client for JavaScript（Leaflet） 开发包
开发时需要引入MapGIS Client for JavaScript（Leaflet）开发包；其中包括必备的 CSS 文件和 JS 文件；
开发库分为正式发行版和Beta版;
* 正式版：面向公网用户，半年发行一次，发行后不会增加新功能，仅会修订BUG
* Beta版：面向内网用户，每周发行一次，会修订BUG并增加新功能
下面分别介绍两种版本包的获取方式：
## 1.1、正式发行版及其更新包
### 1.1.1、文件方式引入
**前往**[司马云官网](http://smaryun.com/dev/download_detail.html#/download828)**下载MapGIS Client for JavaScript开发库**
以10.6.2.10为例，其中：
* mapgis-client-for-javascript-dist-v10.6.2.10.rar为开发库
* mapgis-client-for-javascript-all-v10.6.2.10.rar为开发库+示例站点
**Webclient-Leaflet-Plugin所需开发包位于如下文件夹中**
* webclient-leaflet-plugin库：`mapgis-client-for-javascript-all-v10.6.2.10\dist\cdn\zondyclient\webclient-leaflet-plugin.min.js`
* Leaflet库：`mapgis-client-for-javascript-all-v10.6.2.10\dist\cdn\leaflet`
**之后请将webclient-leaflet-plugin.min.js文件和leaflet文件夹拷贝出来，放入项目的静态资源目录**。
### 1.1.2、npm 方式引入
**通过公网NPM的方式进行安装**
```plain
npm install @mapgis/webclient-leaflet-plugin
```
## 1.2、Beta版
### 1.2.1、文件方式引入
**请前往内网开发库下载Webclient-Leaflet-Plugin相关开发包**
* [@mapgis/webclient-leaflet-plugin](http://192.168.11.130:4873/-/web/detail/@mapgis/webclient-leaflet-plugin)
* [@mapgis/leaflet](http://192.168.11.130:4873/-/web/detail/@mapgis/leaflet)
以 16.1.26版本为例进行说明
1.在该网页中请先选择要下载的版本
<center>
<img src="http://webclient.smaryun.com/static/modules/leaflet/source/img/开发指南_1.png" style="zoom:100%;" />
</center>
2.之后点击相应的版本号，在右侧点击下载按钮，下载压缩包
<center>
<img src="http://webclient.smaryun.com/static/modules/leaflet/source/img/开发指南_2.png" style="zoom:100%;" />
</center>
**开发包位于如下文件夹中**
* webclient-leaflet-plugin库：`webclient-leaflet-plugin-16.3.32\package\dist\webclient-leaflet-plugin.min.js`
* Leaflet库：`leaflet-16.3.1\package\dist`
**请将**`leaflet-16.3.1\package\dist`**改名为leaflet，之后将**`webclient-leaflet-plugin.min.js`
**文件和leaflet文件夹拷贝出来，放入项目的静态资源目录**
### 1.2.2、npm 方式引入
**请先将npm源切换为内网：**
```typescript
npm set registry http://192.168.11.130:4873/
```
**通过内网NPM的方式进行安装**
```plain
npm install @mapgis/webclient-leaflet-plugin
```
# 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">
<!--引擎库-->
<link rel="stylesheet" href="http://{ip}:{port}/{你的路径}/leaflet/leaflet.css">
<script src="http://{ip}:{port}/{你的路径}/leaflet/leaflet.js"></script>
<!--plugin库-->
<script src="http://{ip}:{port}/{你的路径}/zondyclient/webclient-leaflet-plugin.min.js"></script>
</head>
</html>
```
## 2.1、npm 方式引入
**通过npm的方式安装@mapgis/webclient-leaflet-plugin插件库**
```typescript
npm install @mapgis/webclient-leaflet-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">
<!--引擎库-->
<link rel="stylesheet" href="http://{ip}:{port}/{你的路径}/leaflet/leaflet.css">
<script src="http://{ip}:{port}/{你的路径}/leaflet/leaflet.js"></script>
<!--plugin库-->
<script src="http://{ip}:{port}/{你的路径}/zondyclient/webclient-leaflet-plugin.min.js"></script>
<style>
/*设置地图视图的样式，一定要设置否则地图无法显示*/
#你的地图视图的id {
width: 100%;
height: 100%;
position: absolute;
}
</style>
<script>
// 初始化图层管理容器
const map = new zondy.Map()
// 初始化地图视图对象
const mapView = new zondy.leaflet.MapView({
// 视图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;
}
```
**在你的vue组件的template中设置地图视图容器的div元素**
```typescript
<!--地图视图容器div-->
<div id="你的地图视图的id">
</div>
```
**引入需要的构造函数**
```typescript
import { MapViewLeaflet } from '@mapgis/webclient-leaflet-plugin'
import { Map } from "@mapgis/webclient-common"
```
**在mounted生命周期中初始化地图视图**
```typescript
// 初始化图层管理容器
const map = new Map();
// 初始化地图视图对象
const mapView = new MapViewLeaflet({
// 视图id
viewId: "你的地图视图的id",
// 图层管理容器
map: map
});
```
# 4、@mapgis/webclient-leaflet-plugin 版本说明
## 4.1、正式版
### v17.2.12
**更新说明：**
1. 功能优化
- 修复地图服务一张图模式出图异常问题
### v17.2.11
**更新说明：**
1. 功能优化
- 修复已知问题
### v17.2.10
**更新说明：**
1. 功能优化
- 修复已知问题
### v17.2.9
**更新说明：**
1. 功能优化
- 修复屏幕快照获取的截图高度异常问题
### v17.2.8
**更新说明：**
1. 功能优化
- 二维（Leaflet）引擎修复已知问题
### v17.2.7
**更新说明：**
1. 功能优化
- 二维（Leaflet）引擎修复图层服务数据范围异常时的地图加载问题
### v17.2.6
**更新说明：**
1. 功能优化
- 二维（Leaflet）引擎修复图层服务数据范围异常时的地图加载问题
### v17.2.5
**更新说明：**
1. 功能优化
- 二维（Leaflet）引擎修复文字注记转换问题
### v17.2.4
**更新说明：**
1. 功能优化
- 二维（Leaflet）引擎优化聚合效果
- 二维（Leaflet）引擎矢量瓦片服务支持配置请求头token
### v17.2.3
**更新说明：**
1. 功能优化
- 二维（Leaflet）引擎修复已知问题
### v17.2.2
**更新说明：**
1. 功能优化
- 二维（Leaflet）引擎修复已知问题
### v17.2.1
**更新说明：**
1. 功能优化
- 二维（Leaflet）引擎优化命名空间结构
- 二维（Leaflet）引擎修复已知问题
### v17.2.0
**更新说明：**
1. 功能新增
- 二维（Leaflet）引擎矢量瓦片支持多区、带洞区裁剪
- 二维（Leaflet）引擎ArcGIS地图支持出一张图模式
### v17.0.0
**更新说明：**
1. 功能新增
- 二维Leaflet插件支持相同空间参考系支持不同裁图方式瓦片图层的叠加显示
- 二维Leaflet插件增加地图旋转功能
- 二维Leaflet插件支持动态服务图层支持多区、带洞区裁剪
2. 功能优化
- 二维Leaflet插件符号体系优化:
增加文字光晕效果
二维虚线样式优化
- 地图视图Leaflet插件 MapImageLayer 平滑更新
### V16.8.0
**更新说明：**
- SpatialReference支持自定义坐标系（深汕坐标系）
- 二维地图增加地图旋转功能
- 示例数据及二维示例丰富、更新、完善
### V16.6.0
**更新说明：**
1. 功能新增
- 新增自定义坐标系（如高斯）数据和服务(含矢量瓦片)的接入功能
- 新增全局的请求拦截器
2. 功能优化
- 完善和增强前端符号体系在 leaflet 引擎上的实现。
### V16.4.0
**更新说明：**
- 基础对象接口优化升级，为不同地图引擎提供统一的数据模型支持，便于功能在不同引擎上的快速移植。
- 增强 MapGIS 高性能 GIS 服务接入能力，全面适配 MapGIS IGServer 2.0 服务接口。
- 新增支持 EPSG:4326 空间参考系矢量瓦片接入。
- 基础功能丰富与完善：地图图片图层支持根据视图全图范围取图；新增绘制工具和地图出图工具等。
- 增强客户端专题图功能，矢量瓦片图层、要素图层、WFS 图层、GeoJson 图层新增支持客户端专题图；地图图片图层新增支持服务端专题图；并统一不同地图引擎专题图接口。
- 示例完善：新增 MapGIS 瓦片/要素服务、ArcGIS 瓦片/地图服务、GeoJson 图层、矢量瓦片图层、图形图层、长度测量等示例，并优化若干示例。
### V16.2.0
**更新说明：**
- 维护更新，修复若干 Bug
### V16.0.0
**更新说明：**
- 维护更新，修复若干 Bug
### V15.6.0
**更新说明：**
- 维护更新，修复若干 Bug
### V15.4.0
**更新说明：**
- 维护更新，修复若干 Bug
### V15.2.0
**更新说明：**
1. 功能新增
- Leaflet 示例全面优化，提供配套示例说明文档与 API；
- 新增支持 ElasticSearch 的分布式大数据搜索与分析能力，可实现热力分析、聚类分析等功能。
2. 站点维护
- 示例说明文档美化
### V15.0.0
**更新说明：**
- 全面整合了 Leaflet 等脚本库，代码模块化，采用最新的 JavaScript ES6 标准；
- 提供 Leaflet 开发库、示例、API，支持基于 OpenLayers5 的二维数据可视化（含 OGC、MapGIS 地图服务、第三方地图服务等）、量算、查询编辑、空间分析、专题图、矢量瓦片，以及大数据可视化与分析等功能；
- 新增集成 Echarts、MapV 可视化库，支持在 Web 三维模式下实现大数据可视化、大数据分析功能；
- 新增集成 Turf.js 客户端空间分析库，提供客户端空间计算能力，支持实现在客户端层的空间分析、拓扑分析、空间关系计算等功能。