@mapgis/webclient-mapboxgl-plugin 17.0.0 → 17.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/README.md +234 -89
  2. package/dist/es5/webclient-common.min.js +4 -4
  3. package/dist/es5/webclient-mapboxgl-plugin.min.js +1 -1
  4. package/dist/webclient-mapboxgl-plugin-es6.min.js +1 -1
  5. package/documention/EchartsLayer.html +6 -177
  6. package/documention/MapViewMapboxgl.html +8 -179
  7. package/documention/Popup.html +9 -180
  8. package/documention/Screenshot.html +6 -177
  9. package/documention/SketchEditorMapboxgl.html +7 -178
  10. package/documention/global.html +7 -178
  11. package/documention/index.html +6 -6
  12. package/documention/module-%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%8F%AF%E8%A7%86%E5%8C%96.MapvLayer.html +7 -178
  13. package/documention/scripts/sideBar.js +76 -0
  14. package/documention/styles/app.min.css +1 -1
  15. package/documention/tutorial-1./345/277/253/351/200/237/345/205/245/351/227/250.html +7 -155
  16. package/package.json +1 -1
package/README.md CHANGED
@@ -1,89 +1,234 @@
1
- ## @mapgis/webclient-mapboxgl-plugin 版本说明
2
-
3
- ### v17.0.0
4
-
5
- **更新说明：**
6
-
7
- 1. 功能新增
8
-
9
- - 二维Mapboxgl插件适配草图编辑模块功能
10
- - 二维Mapboxgl插件实现统一、单值、分段、等级、聚合专题图
11
-
12
-
13
-
14
- ### V16.8.0
15
-
16
- **更新说明：**
17
-
18
- - 维护更新，修复若干 Bug
19
-
20
-
21
-
22
- ### V16.6.0
23
-
24
- **更新说明：**
25
-
26
- - 引擎库新增自定义坐标系（如高斯）数据和服务(含矢量瓦片)的接入功能
27
-
28
-
29
-
30
- ### V16.4.0
31
-
32
- **更新说明：**
33
-
34
- - 维护更新，修复若干 Bug
35
-
36
-
37
- ### V16.2.0
38
-
39
- **更新说明：**
40
-
41
- - 新增接入离线 TMS 的高德(GCJ02)地图
42
- - 新增接入离线百度(BD09)地图
43
- - 新增接入 Google(GCJ02)地图
44
- - 新增行业标绘功能：支持基础、军事两类符号的交互式编辑，支持属性、生长、显隐、闪烁、路径、比例等动画类型，支持态势编辑、管理、推演等功能
45
- - 维护更新，修复若干 Bug
46
-
47
-
48
- ### V16.0.0
49
-
50
- **更新说明：**
51
-
52
- - 维护更新，修复若干 Bug
53
-
54
-
55
- ### V15.6.0
56
-
57
- **更新说明：**
58
-
59
- - 维护更新，修复若干 Bug
60
-
61
-
62
- ### V15.4.0
63
- - 维护更新，修复若干 Bug
64
-
65
-
66
- ### V15.2.0
67
-
68
- **更新说明：**
69
-
70
- 1. 功能新增
71
- - 新增直接支持 ArcGIS 地图服务与 OGC 服务；
72
- - 新增 PostGIS 支持，可实现基于 PostGIS 的数据查询统计、实时矢量瓦片等功能；
73
- - 新增支持 ElasticSearch 的分布式大数据搜索与分析能力，可实现热力分析、聚类分析等功能。
74
-
75
- 2. 站点维护
76
- - 示例说明文档美化
77
-
78
-
79
-
80
-
81
- ### V15.0.0
82
-
83
- **更新说明：**
84
-
85
- - 全面整合了 MapboxGL 等脚本库，代码模块化，采用最新的 JavaScript ES6 标准；
86
- - 提供 MapboxGL 开发库、示例、API，支持基于 MapboxGL 的二维数据可视化（含 OGC、MapGIS 地图服务、第三方地图服务等）、量算、查询编辑、空间分析、专题图，以及大数据可视化与分析等功能；
87
- - 新增集成 Echarts、Echarts GI、MapV 可视化库，支持在 Web 三维模式下实现大数据可视化、大数据分析功能；
88
- - 新增集成 Turf.js 客户端空间分析库，提供客户端空间计算能力，支持实现在客户端层的空间分析、拓扑分析、空间关系计算等功能；
89
- - MapboxGL 示例全面优化，提供配套示例说明文档与 API。
1
+ # 1、获取 MapGIS Client for JavaScript（Mapboxgl） 开发包
2
+
3
+ 开发时需要引入MapGIS Client for JavaScript（Mapboxgl）开发包；其中包括必备的 CSS 文件和 JS 文件；
4
+
5
+ 开发库分为正式发行版和Beta版;
6
+
7
+ * 正式版：面向公网用户，半年发行一次，发行后不会增加新功能，仅会修订BUG
8
+ * Beta版：面向内网用户，每周发行一次，会修订BUG并增加新功能
9
+ 下面分别介绍两种版本包的获取方式：
10
+
11
+ ## 1.1、正式发行版及其更新包
12
+
13
+ ### 1.1.1、文件方式引入
14
+
15
+ **前往**[司马云官网](http://smaryun.com/dev/download_detail.html#/download828)**下载MapGIS Client for JavaScript开发库**
16
+
17
+ 以10.7.0.10为例，其中：
18
+
19
+ * mapgis-client-for-javascript-dist-v10.7.0.10.rar为开发库
20
+ * mapgis-client-for-javascript-all-v10.7.0.10.rar为开发库+示例站点
21
+ **Webclient-Mapboxgl-Plugin所需开发包位于如下文件夹中**
22
+
23
+ * webclient-mapboxgl-plugin库：`mapgis-client-for-javascript-all-v10.7.0.10\dist\cdn\zondyclient\webclient-mapboxgl-plugin.min.js`
24
+ * Mapboxgl库：`mapgis-client-for-javascript-all-v10.7.0.10\dist\cdn\mapboxgl`
25
+ **之后请将webclient-mapboxgl-plugin.min.js文件和mapboxgl文件夹拷贝出来，放入项目的静态资源目录**。
26
+
27
+ ### 1.1.2、npm 方式引入
28
+
29
+ **通过公网NPM的方式进行安装**
30
+
31
+ ```plain
32
+ npm install @mapgis/webclient-mapboxgl-plugin
33
+ ```
34
+
35
+ ## 1.2、Beta版
36
+
37
+ ### 1.2.1、文件方式引入
38
+
39
+ **请前往内网开发库下载Webclient-Mapboxgl-Plugin相关开发包**
40
+
41
+ * [@mapgis/webclient-mapboxgl-plugin](http://192.168.11.130:4873/-/web/detail/@mapgis/webclient-mapboxgl-plugin)
42
+ * [@mapgis/mapboxgl](http://192.168.11.130:4873/-/web/detail/@mapgis/mapbox-gl)
43
+ 以 17.0.0版本为例进行说明
44
+
45
+ 1.在该网页中请先选择要下载的版本
46
+
47
+ <center>
48
+ <img src="http://webclient.smaryun.com/static/modules/mapboxgl/source/img/开发指南_1.png" style="zoom:100%;" />
49
+ </center>
50
+
51
+ 2.之后点击相应的版本号，在右侧点击下载按钮，下载压缩包
52
+
53
+ <center>
54
+ <img src="http://webclient.smaryun.com/static/modules/mapboxgl/source/img/开发指南_2.png" style="zoom:100%;" />
55
+ </center>
56
+
57
+ **开发包位于如下文件夹中**
58
+
59
+ * webclient-mapboxgl-plugin库：`webclient-mapboxgl-plugin-17.0.0\package\dist\webclient-mapboxgl-plugin.min.js`
60
+ * Mapboxgl库：`mapboxgl-17.0.0\package\dist`
61
+
62
+ **请将**`mapboxgl-17.0.0\package\dist`**改名为mapboxgl，之后将**`webclient-mapboxgl-plugin.min.js`
63
+
64
+ **文件和mapboxgl文件夹拷贝出来，放入项目的静态资源目录**
65
+
66
+ ### 1.2.2、npm 方式引入
67
+
68
+ **请先将npm源切换为内网：**
69
+
70
+ ```typescript
71
+ npm set registry http://192.168.11.130:4873/
72
+ ```
73
+
74
+ **通过内网NPM的方式进行安装**
75
+
76
+ ```plain
77
+ npm install @mapgis/webclient-mapboxgl-plugin
78
+ ```
79
+
80
+ # 2、如何引入开发库
81
+
82
+ ## 2.1、文件方式引入
83
+
84
+ **在index.html中引入引擎库和插件库**
85
+
86
+ ```typescript
87
+ <!DOCTYPE html>
88
+ <html>
89
+ <head>
90
+ <meta charset="utf-8">
91
+ <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
92
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
93
+ <!--引擎库-->
94
+ <link rel="stylesheet" href="http://{ip}:{port}/{你的路径}/mapboxgl/mapbox-gl.css">
95
+ <script src="http://{ip}:{port}/{你的路径}/mapboxgl/mapbox-gl.js"></script>
96
+ <!--plugin库-->
97
+ <script src="http://{ip}:{port}/{你的路径}/zondyclient/webclient-mapboxgl-plugin.min.js"></script>
98
+ </head>
99
+ </html>
100
+ ```
101
+
102
+ ## 2.1、npm 方式引入
103
+
104
+ **通过npm的方式安装@mapgis/webclient-mapboxgl-plugin插件库**
105
+
106
+ ```typescript
107
+ npm install @mapgis/webclient-mapboxgl-plugin
108
+ ```
109
+
110
+ # 3、初始化场景视图
111
+
112
+ ## 3.1、文件方式引入
113
+
114
+ **在项目的css文件中设置地图视图容器的样式，否则地图视图无法显示**
115
+
116
+ ```typescript
117
+ /*设置地图视图的样式，一定要设置否则地图无法显示*/
118
+ #你的地图视图的id {
119
+ width: 100%;
120
+ height: 100%;
121
+ position: absolute;
122
+ }
123
+ ```
124
+
125
+ **初始化地图视图对象**
126
+
127
+ ```typescript
128
+ <!DOCTYPE html>
129
+ <html>
130
+ <head>
131
+ <meta charset="utf-8">
132
+ <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
133
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
134
+ <!--引擎库-->
135
+ <link rel="stylesheet" href="http://{ip}:{port}/{你的路径}/mapboxgl/mapbox-gl.css">
136
+ <script src="http://{ip}:{port}/{你的路径}/mapboxgl/mapbox-gl.js"></script>
137
+ <!--plugin库-->
138
+ <script src="http://{ip}:{port}/{你的路径}/zondyclient/webclient-mapboxgl-plugin.min.js"></script>
139
+ <style>
140
+ /*设置地图视图的样式，一定要设置否则地图无法显示*/
141
+ #你的地图视图的id {
142
+ width: 100%;
143
+ height: 100%;
144
+ position: absolute;
145
+ }
146
+ </style>
147
+ <script>
148
+ // 初始化图层管理容器
149
+     const map = new Zondy.Map()
150
+     // 初始化地图视图对象
151
+     const mapView = new Zondy.MapViewMapboxgl({
152
+     // 视图id
153
+       viewId: '你的地图视图的id',
154
+       // 图层管理容器
155
+       map: map
156
+     })
157
+ </script>
158
+ </head>
159
+ <!--地图视图容器div-->
160
+ <div id="你的地图视图的id">
161
+ </div>
162
+ </html>
163
+ ```
164
+
165
+ ## 3.2、npm 方式引入
166
+
167
+ **以VUE项目为例，React和Angular类似**
168
+
169
+ **在项目的css文件中设置地图视图容器的样式，否则地图视图无法显示**
170
+
171
+ ```typescript
172
+ /*设置地图视图的样式，一定要设置否则地图无法显示*/
173
+ #你的地图视图的id {
174
+ width: 100%;
175
+ height: 100%;
176
+ position: absolute;
177
+ }
178
+ ```
179
+
180
+ **在你的vue组件的template中设置地图视图容器的div元素**
181
+
182
+ ```typescript
183
+ <!--地图视图容器div-->
184
+ <div id="你的地图视图的id">
185
+ </div>
186
+ ```
187
+
188
+ **引入需要的构造函数**
189
+
190
+ ```typescript
191
+ import { MapViewMapboxgl } from '@mapgis/webclient-mapboxgl-plugin'
192
+ import { Map } from "@mapgis/webclient-common"
193
+ ```
194
+
195
+ **在mounted生命周期中初始化地图视图**
196
+
197
+ ```typescript
198
+ // 初始化图层管理容器
199
+ const map = new Map();
200
+ // 初始化地图视图对象
201
+ const mapView = new MapViewMapboxgl({
202
+ // 视图id
203
+ viewId: "你的地图视图的id",
204
+ // 图层管理容器
205
+ map: map
206
+ });
207
+ ```
208
+
209
+
210
+
211
+ # 4、@mapgis/webclient-leaflet-plugin 版本说明
212
+
213
+ ## 4.1、正式版
214
+ ### v17.0.2
215
+
216
+ **更新说明：**
217
+
218
+ 1. 功能优化
219
+
220
+ - 修复部分已知问题
221
+
222
+ ### v17.0.0
223
+
224
+ **更新说明：**
225
+
226
+ 1. 功能新增
227
+
228
+ - 新增支持自定义空间参考系图层服务
229
+ - 新增支持自定义裁图方式图层服务
230
+ - 地图服务支持一张图出图模式
231
+
232
+ **备注：**
233
+
234
+ @mapgis/mapbox-gl v17.0.0 基于官方 Mapbox-GL v1.10.0 进行了定制和扩展开发