@mapgis/webclient-leaflet-plugin

v17.10.10

Published

16 days ago

MapGIS Leaflet plugin for lightweight 2D mapping with native IGS layer support and drawing capabilities.

0High
0Medium
0Low

1、获取 MapGIS Client for JavaScript（Leaflet）开发包

MapGIS Client for JavaScript（Leaflet）是 WebClient 面向 Leaflet 引擎的轻量二维地图插件包，承接 @mapgis/webclient-common 的地图、图层、几何、符号和工具等通用接口，并完成二维地图场景下的引擎适配。

该包提供 Leaflet 引擎下的核心能力扩展，覆盖轻量二维地图、地图服务与图层、绘制编辑、量算、打印和基础交互等 WebGIS 应用能力。

示例站点：http://webclient.smaryun.com

1.1、获取方式

1.1.1、npm 安装

推荐在现代工程中直接通过 npm 引入：

npm install @mapgis/webclient-common @mapgis/webclient-leaflet-plugin

安装完成后，构建工具会解析插件运行时依赖；项目仍需要按 Leaflet 的要求引入基础样式。

1.1.2、静态资源引入

如果项目暂时不接入构建链，可以直接使用发布包中的静态资源：

如果需要通过 CDN 格式开发包或离线示例站点集成，可前往：http://smaryun.com/dev/download_detail.html#/download828。

dist/esm/webclient-leaflet-plugin.js
dist/umd/webclient-leaflet-plugin.min.js
Leaflet 引擎的 leaflet.js 和 leaflet.css

常见做法是将 Leaflet 引擎文件和 webclient-leaflet-plugin.min.js 拷贝到项目静态资源目录，再通过 <script> 和 <link> 加载。

1.2、能力范围

view：二维地图视图、图层视图和视图交互
layer：地图、影像、瓦片、矢量、WMS、WMTS 和要素图层
editor：绘制、草图编辑和图形交互编辑
tool：地图量算、打印、截图和常用视图工具
popup：地图弹窗、要素信息展示和交互反馈
adapter：Leaflet 引擎对象与 WebClient 通用模型桥接

2、引入方式

2.1、ESM 引入

现代工程建议使用 ESM 方式按需引入：

import 'leaflet/dist/leaflet.css'
import { Map as ZondyMap } from '@mapgis/webclient-common'
import { MapView, IGSMapImageLayer } from '@mapgis/webclient-leaflet-plugin'

这种方式便于 tree-shaking，也更适合后续做国际化拆分和模块化维护。

2.2、全局引入

如果使用传统页面或旧工程，可直接挂载全局对象：

<link rel="stylesheet" href="/static/leaflet/leaflet.css" />
<script src="/static/leaflet/leaflet.js"></script>
<script src="/static/libs/zondyclient/webclient-common.min.js"></script>
<script src="/static/libs/zondyclient/webclient-leaflet-plugin.min.js"></script>
<script>
  const { Map: ZondyMap } = window.MapGISWebClientCommon
  const { MapView } = window.MapGISWebClientLeafletPlugin
  const legacyNamespace = window.zondy
  const compatNamespace = window.Zondy
</script>

全局对象同时保留新命名空间和 window.zondy、window.Zondy 兼容入口，便于旧代码迁移。

3、快速开始

下面示例展示二维地图视图的最小初始化方式。实际项目中，请将容器尺寸设置为可见区域高度。

3.1、创建地图视图

import { Map as ZondyMap } from '@mapgis/webclient-common'
import { MapView } from '@mapgis/webclient-leaflet-plugin'

const zondyMap = new ZondyMap()
const mapView = new MapView({
  viewId: 'map-container',
  map: zondyMap
})

3.2、加载地图服务

import { Map as ZondyMap } from '@mapgis/webclient-common'
import { IGSMapImageLayer } from '@mapgis/webclient-leaflet-plugin'

const zondyMap = new ZondyMap()
const layer = new IGSMapImageLayer({
  url: 'http://server/igs/rest/services/map/MapServer'
})

zondyMap.add(layer)

3.3、全局方式

<div id="map-container"></div>
<script>
  const zondyMap = new zondy.Map()
  const mapView = new zondy.leaflet.MapView({
    viewId: 'map-container',
    map: zondyMap
  })
</script>

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

v17.10.4

修复

修复线符号 solid/none 样式切换失效以及同 id 图形缓存问题

v17.10.0

新增

要素图层增加动态注记能力

优化

优化大数据量graphic渲染性能

修复

修复已知问题

v17.8.10

修复

修复已知问题

v17.8.9

修复

修复已知问题

v17.8.8

修复

修复第三方插件、扩展写法混合使用时报错的问题
修复视图跳转动画持续时间存在的问题

v17.8.7

修复

修复已知问题

v17.8.6

修复

修复已知问题

v17.8.5

修复

修复已知问题

v17.8.4

修复

修复已知问题

v17.8.3

修复

修复已知问题

v17.8.2

修复

修复已知问题

v17.8.1

修复

修复已知问题

v17.8.0

新增

新增视图卷帘工具

v17.6.25

修复

修复已知问题

v17.6.24

修复

修复已知问题

v17.6.23

修复

修复已知问题

v17.6.18

修复

修复部分图层截屏报错的问题

v17.6.17

新增

增加图层出图完毕的监听事件

v17.6.16

新增

提供卷帘相关的原生控件接口 L.Control.Swipe 、混合接口 SwipeControl、工具接口 SwipeTool

v17.6.15

修复

修复已知问题

v17.6.14

修复

修复地图图片图层图层过滤参数失效的问题

v17.6.0

新增

支持百度、高德瓦片服务纠偏显示

v17.4.7

修复

修复Leaflet-plugin混合加载的方式去加载动态服务显示异常的问题

v17.4.4

修复

修复 IGSMapImageLayer 图层动态出图级别受限问题

v17.4.1

修复

修复API文档中部分接口文档缺失的问题
优化视图截图功能

v17.4.0

新增

矢量瓦片支持设置请求头

修复

优化聚合效果
修复文字注记转换问题

v17.2.8

修复

二维（Leaflet）引擎修复已知问题

v17.2.7

修复

二维（Leaflet）引擎修复图层服务数据范围异常时的地图加载问题

v17.2.6

修复

二维（Leaflet）引擎修复图层服务数据范围异常时的地图加载问题

v17.2.5

修复

二维（Leaflet）引擎修复文字注记转换问题

v17.2.4

新增

二维（Leaflet）引擎矢量瓦片服务支持配置请求头token

修复

二维（Leaflet）引擎优化聚合效果

v17.2.3

修复

二维（Leaflet）引擎修复已知问题

v17.2.2

修复

二维（Leaflet）引擎修复已知问题

v17.2.1

修复

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

v17.2.0

新增

二维（Leaflet）引擎矢量瓦片支持多区、带洞区裁剪
二维（Leaflet）引擎ArcGIS地图支持出一张图模式

v17.0.0

新增

二维Leaflet插件支持相同空间参考系支持不同裁图方式瓦片图层的叠加显示
二维Leaflet插件增加地图旋转功能
二维Leaflet插件支持动态服务图层支持多区、带洞区裁剪

修复

二维Leaflet插件符号体系优化:
地图视图Leaflet插件 MapImageLayer 平滑更新

v16.8.0

新增

SpatialReference支持自定义坐标系（深汕坐标系）
二维地图增加地图旋转功能
示例数据及二维示例丰富、更新、完善

v16.6.0

新增

新增自定义坐标系（如高斯）数据和服务(含矢量瓦片)的接入功能
新增全局的请求拦截器

修复

完善和增强前端符号体系在 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

新增

新增支持 ElasticSearch 的分布式大数据搜索与分析能力，可实现热力分析、聚类分析等功能。
示例说明文档美化

修复

Leaflet 示例全面优化，提供配套示例说明文档与 API；

v15.0.0

新增

全面整合了 Leaflet 等脚本库，代码模块化，采用最新的 JavaScript ES6 标准；
提供 Leaflet 开发库、示例、API，支持基于 OpenLayers5 的二维数据可视化（含 OGC、MapGIS 地图服务、第三方地图服务等）、量算、查询编辑、空间分析、专题图、矢量瓦片，以及大数据可视化与分析等功能；
新增集成 Echarts、MapV 可视化库，支持在 Web 三维模式下实现大数据可视化、大数据分析功能；
新增集成 Turf.js 客户端空间分析库，提供客户端空间计算能力，支持实现在客户端层的空间分析、拓扑分析、空间关系计算等功能。