4.3 客户端分析与交互

4.3 客户端分析与交互

本节摘要：地图不只是看，还要操作。本节讲客户端绘制、量算、空间查询、要素交互——让地图"活"起来。

阅读收获

阅读完本节，你应当能够：

1. 实现绘制和编辑
2. 做量算（距离、面积）
3. 实现空间查询和要素交互

概念脉络

一、客户端能做什么

浏览器里能做轻量 GIS 分析：绘制点线面、量算距离面积、空间查询（点选、框选）、要素属性查看。复杂分析仍要后端，但客户端够用日常交互。

二、绘制与编辑

// OpenLayers 绘制
import Draw from 'ol/interaction/Draw';
const draw = new Draw({ source: vectorSource, type: 'Polygon' });
map.addInteraction(draw);
draw.on('drawend', (e) => {
  const geom = e.feature.getGeometry();
  const area = ol.sphere.getArea(geom);
  console.log('面积', area);
});
​

绘制后可继续编辑顶点、移动要素，前端做轻量编辑。

三、量算

图 4-3 客户端分析交互

量算要考虑球面（不是平面），用大地测量公式，否则误差大。

四、空间查询

// 点选要素
map.on('click', (e) => {
  map.forEachFeatureAtPixel(e.pixel, (feature) => {
    showPopup(feature.getProperties());
  });
});
​

客户端可做点选、框选、缓冲区查询，基于已加载的要素。大数据或复杂拓扑分析要发后端（PostGIS）。

五、Turf.js 客户端分析

Turf.js 是客户端空间分析库：

import * as turf from '@turf/turf';
const buffer = turf.buffer(point, 1, { units: 'kilometers' });
const intersect = turf.intersect(poly1, poly2);
​

支持缓冲、相交、量算、空间关系判断等，适合轻量分析。

六、要素交互

• 弹窗：点击要素显示属性
• 高亮：悬停/选中改变样式
• 事件：点击/悬停触发回调
• 图层控制：显隐、透明度

七、客户端 vs 后端分析

⚠️ 常见坑：客户端做大数据分析——浏览器内存和性能有限。大数据或复杂分析发后端 PostGIS，客户端只做轻量交互。

💡 关键直觉：客户端做绘制/量算/点选/框选等轻量交互，Turf.js 做空间分析。大数据和复杂拓扑发后端 PostGIS。

八、绘制状态的完整控制

绘制交互最容易出错的是"状态管理"：用户画到一半取消、重复进入绘制模式、绘制后临时图层残留。规范做法是维护一个绘制会话对象，统一管理开始、结束、清理：

import Draw from 'ol/interaction/Draw';
import Snap from 'ol/interaction/Snap';

let draw; // 当前绘制会话

function startDraw(map, source, type) {
  // 先清掉旧的绘制交互，避免叠加
  map.removeInteraction(draw);
  draw = new Draw({ source, type });
  map.addInteraction(draw);
  map.addInteraction(new Snap({ source })); // 捕捉到已有要素，画得更准
  return draw;
}

function stopDraw(map) {
  map.removeInteraction(draw);
}
​

绘制结束后的数据要能回传后端保存，一般把几何转成 GeoJSON 提交接口；同时前端要处理"取消绘制""绘制中按 ESC 键"等边界情况。

九、点选查询的完整链路

客户端点选看起来简单，完整链路涉及前端拿坐标、请求服务、解析结果、展示：

map.on('click', async (e) => {
  const coord = e.coordinate; // 视图坐标系
  // 转成 WGS84 经纬度
  const lonLat = ol.proj.toLonLat(coord);
  // 请求后端接口做空间查询（后端用 PostGIS）
  const resp = await fetch('/api/query-point?lon=' + lonLat[0] + '&lat=' + lonLat[1]);
  const features = await resp.json();
  // 把结果加到图层展示
  resultSource.clear();
  resultSource.addFeatures(features.map(f => new Feature({
    geometry: new GeoJSON().readGeometry(f.geometry)
  })));
});
​

关键细节是坐标系转换：前端视图可能是 3857，业务接口一般按 4326 经纬度传参，必须在客户端先 toLonLat，后端再 ST_Transform 或直接按 4326 查询，否则查询结果偏到别处。

十、交互性能与体验

• 悬停高亮：用临时样式而不是频繁重建要素，避免闪烁。
• 弹窗节流：高频移动事件不要每次都创建弹窗，用定时器或帧节流。
• 大数据图层：几万要素的交互要配合 WebGL 图层或聚合，普通 Canvas 渲染加点击命中测试会吃力。
• 加载态：空间查询要展示 loading，避免用户反复点击造成请求堆积。

十一、量算的精度细节

客户端量算最容易被质疑的就是精度，几个细节要注意：

• 投影与球面：量距离分"平面距离"和"球面距离"。城市范围 50 公里内两者差不了多少，跨省跨国必须用球面公式，OpenLayers 的 ol/sphere 或 Turf 的距离函数都支持。
• 面积同理：多边形面积在墨卡托投影下高纬被放大，正式成果用等积投影或球面面积。
• 显示与业务分离：用户看到"约 1.2 公里"可以，但业务统计、计费、监管要求的面积必须用服务端精确值，客户端结果只做展示。

// Turf 球面距离示例
const from = turf.point([116.4, 39.9]);
const to = turf.point([116.5, 39.95]);
const km = turf.distance(from, to, { units: 'kilometers' });
​

十二、客户端分析的边界把握

一个实用的判断原则：单次操作涉及的数据量小于一万、计算不依赖数据库拓扑的，可以在客户端做；涉及全表、需要空间索引、要保证结果权威的，交给后端。这个边界会随硬件提升缓慢移动，但"交互走前端、权威走后端"的原则长期有效。出现"前端越写越重"的苗头时，回头把分析挪到服务端，往往比继续堆前端代码更省力。

要点串联

• 客户端能力：绘制编辑、量算、空间查询、要素交互，轻量 GIS。
• 绘制：点线面绘制、顶点编辑、要素移动。
• 量算：距离/面积/坐标，球面公式避免误差。
• 空间查询：点选/框选/缓冲区，基于已加载要素。
• Turf.js：客户端空间分析库，缓冲/相交/量算。
• 要素交互：弹窗、高亮、事件、图层控制。
• 客户端 vs 后端：客户端轻量交互，后端大数据复杂分析。

第 4 章结束。下一章讲空间分析算法。