SuperMap iClient for Leaflet 添加绘制与量测

wowwwai GIS研习社 · 工具流程与项目排障

SuperMap iClient for Leaflet 添加绘制与量测，核心做法是引入 Leaflet.draw（或 leaflet-geoman）实现点、线、面等图形绘制，再用 L.supermap.MeasureParameters 与 L.supermap.MeasureService 调用 iServer 完成服务端距离/面积量算；也可集成 Turf.js 做纯客户端量算。截至 2026 年 11 月，推荐使用 npm 包 @supermapgis/iclient-leaflet 12.1.3（兼容 Leaflet 1.0.3～1.9.4）。绘制时创建 FeatureGroup 作为编辑图层并监听 L.Draw.Event.CREATED；量测时传入有效 geometry 与单位即可返回结果。下面给出可直接落地的步骤与验收标准。

环境准备：依赖与版本怎么选

先解决“能跑起来”的问题。绘制依赖第三方插件，量测依赖 iClient 的 Measure 模块与（服务端场景下的）可用地图服务。桌面端若要发布量测所需的 REST 地图服务，可先参考本站 SuperMap iDesktop 下载与试用许可申请 完成软件与许可准备。

• 核心库：Leaflet（CSS + JS）+ @supermapgis/iclient-leaflet（或 CDN 的 iclient-leaflet.js / .min.css）
• 绘制：Leaflet.draw（基础绘制）或 @geoman-io/leaflet-geoman-free（支持捕捉吸附）
• 客户端量算：Turf.js（iClient 已集成相关能力，按需引入）
• 服务端量算：有效的 SuperMap iServer 地图服务地址（如世界地图 REST）

npm 方式示例（模块化项目需配合 babel-loader 处理 ES6）：

1. 执行 npm install @supermapgis/iclient-leaflet leaflet leaflet-draw（捕捉场景再装 leaflet-geoman）
2. 按需 import：{ TiledMapLayer, MeasureService, MeasureParameters } from ‘@supermapgis/iclient-leaflet’
3. 地图初始化时指定 crs（常用 L.CRS.EPSG4326）、center、zoom，并添加 L.supermap.TiledMapLayer
4. CDN 场景则按顺序引入 Leaflet CSS/JS → iclient-leaflet → Leaflet.draw CSS/JS

浏览器兼容以官方 2026 产品说明为准：桌面 Chrome 26+、Firefox 23+ 等；Leaflet 1.2.0+ 对 IE8 支持不完整，老环境建议锁定 Leaflet 1.0.3。数据坐标或导入乱码时，先在桌面处理好再发布服务，可参考 SuperMap 导入乱码与坐标转换参数设置。

添加绘制：Leaflet.draw 与捕捉绘制怎么做

Leaflet 本身不提供点线面绘制控件，官方开发指南明确要求引入 Leaflet.draw。基本流程如下，可直接对照验收。

1. 创建编辑图层：var drawnItems = new L.FeatureGroup(); map.addLayer(drawnItems);
2. 配置控件：var drawControl = new L.Control.Draw({ edit: { featureGroup: drawnItems }, draw: { polyline: true, polygon: true, circle: true, rectangle: true, marker: true, remove: true } }); map.addControl(drawControl);
3. 监听创建事件：map.on(L.Draw.Event.CREATED, function (e) { drawnItems.addLayer(e.layer); /* 此处可拿 geometry 去量测 */ });
4. 需要鼠标吸附已有顶点时，改用 leaflet-geoman：map.pm.addControls({ position: ‘topleft’, drawPolygon: true, drawPolyline: true, … })，并按需开启 snappable 等选项

绘制结果常作为后续空间分析或量测的 geometry 输入。官方示例仓库中不少分析示例（如单对象查询）也依赖自定义绘制范围，可到 GitHub iClient Leaflet 示例目录 查看完整 html。注意：动态标绘（点标号/线面标号）属于 iclient-plot-leaflet 独立能力，与基础绘制控件不是同一套 API，不要混用。

实现量测：服务端距离/面积与客户端方案

量测分两条路：连 iServer 做服务端量算（精度与投影由服务端控制），或本地用 Turf 做客户端量算（无需服务、适合离线或快速预览）。

服务端量算步骤：

1. 准备 geometry：来自绘制结果的 L.Polyline / L.Polygon，或 GeoJSON 等有效矢量
2. 构造参数：var params = new L.supermap.MeasureParameters(geometry, { unit: ‘METER’ /* 默认 */, distanceMode: ‘Geodesic’ /* 或 Planar */, prjCoordSys: 可选 });
3. 调用服务：new L.supermap.MeasureService(url, { /* proxy、headers 等 */ }).measureDistance(params) 或 .measureArea(params)，返回 Promise
4. 处理结果：then 中读取 distance / area 与 unit，在地图或面板上展示

参数/能力	说明	常用取值
unit	量算结果单位	默认 METER；也可按业务设为公里等（以服务支持为准）
distanceMode	距离计算模式	Geodesic（默认，大地线）或 Planar（平面）
prjCoordSys	投影坐标系	可选；与地图/服务 CRS 一致时更稳妥
geometry	输入对象	L.Polyline、L.Polygon、GeoJSON 等有效矢量
服务方法	API	measureDistance / measureArea（Promise）

客户端量算则直接用 Turf 对绘制出的坐标做 length / area 等计算，无需 iServer，适合原型或弱网环境。官方开发指南“面积和距离量算”“客户端计算”章节有对应说明；示例文件名常见为 01_measure_distance.html、01_measure_area.html。若底图或业务数据来自 BIM/Revit 管线，可先用本站 SuperMap 加载 Revit 与插件导出设置 理顺数据再发布服务，避免量测几何异常。

验收标准与常见踩坑

做完后按下面标准自检，能快速定位是依赖、坐标还是服务问题。

• 绘制：控件出现，能画出折线/多边形，CREATED 后图层进入 FeatureGroup，控制台无插件未定义报错
• 服务端量测：Promise resolve，结果含 distance 或 area 与 unit；同一段线用 Geodesic 与 Planar 结果差异符合预期
• 客户端量测：Turf 计算结果与屏幕坐标量级匹配，无 CRS 混用导致的“长度离谱”
• 地图：TiledMapLayer 正常加载，crs 与服务一致；跨域时正确配置 proxy / crossOrigin / headers

常见出错：忘记引入 Leaflet.draw 的 CSS/JS 导致控件空白；geometry 为空或类型不对导致量测失败；服务 URL 无效或无量算权限；投影与 distanceMode 不匹配导致结果偏差。先确认 Leaflet 与 iClient 版本组合在 12.1.x 兼容范围内，再查网络与参数。

常见问题

绘制和动态标绘有什么区别？

基础绘制用 Leaflet.draw / geoman 画普通点线面，供量测或分析；动态标绘是军事/行业标号体系，需单独引入 iclient-plot-leaflet 与 PlottingLayer、PlotDrawControl，两者 API 与用途不同，不要当成同一功能。

没有 iServer 能不能量测？

可以。用客户端方案集成 Turf.js 对绘制几何做距离与面积计算即可；需要权威投影与服务端算法时再接 MeasureService。

量测结果单位和精度怎么控？

通过 MeasureParameters 的 unit（默认 METER）和 distanceMode（Geodesic/Planar）控制；精度还受输入几何质量、CRS 与服务端配置影响，重要项目以实际服务实测为准。

示例代码去哪里找？

优先看官方 examples/leaflet 下的量测与绘制相关 html；分析类示例里也常嵌入 Leaflet.draw 自定义范围，例如单对象查询作业相关页面可作参考。

总结：先搭好 Leaflet + iClient 12.1.3 与 Leaflet.draw，用 FeatureGroup + CREATED 完成绘制；量测优先 MeasureService + MeasureParameters，离线场景改用 Turf。建议你先跑通一条“绘制折线 → measureDistance”闭环，再按业务加上捕捉与面积量算；发布服务前把桌面许可与坐标问题处理干净，能少走很多弯路。