企业官网建设流程全解析

1. 从“画地图”到“算地图”：为什么我们需要JSTS？

如果你用过OpenLayers或者Leaflet这样的前端地图库，那你一定很熟悉怎么在地图上画点、线、面，怎么给它们换个颜色，或者怎么让它们动起来。这些库把“可视化”这件事做得非常出色，让我们能轻松地在网页上展示地理数据。但是，你有没有遇到过这样的场景：用户在地图上画了两个多边形，你需要判断它们是否相交？或者，用户上传了一个GeoJSON文件，你需要检查里面的几何图形是不是有效的（比如，一个多边形不能自相交）？又或者，你需要把一条复杂的线简化一下，或者把两个面合并成一个？

这时候，你可能会发现，你手里的“画笔”（OpenLayers）虽然画得漂亮，但它不擅长“计算”。它提供的几何对象（ol/geom）主要功能是存储坐标和渲染，虽然有一些基础的空间关系方法，但功能相对有限，尤其是在处理复杂的空间拓扑运算、几何有效性验证、坐标变换（如投影转换）等方面。你需要一个更专业的“数学工具箱”。

这就是JSTS（JavaScript Topology Suite）登场的时候。简单来说，JSTS是一个纯JavaScript编写的空间几何库，它实现了著名的Java拓扑套件（JTS）的核心功能。JTS是地理信息系统（GIS）领域的基石级库，被PostGIS、GeoTools等众多后端GIS软件用作空间运算引擎。JSTS把这份强大的能力带到了浏览器端。

它的核心价值在于：为前端JavaScript环境提供了工业级、标准化的空间数据分析和处理能力。它不关心怎么把图形画出来（那是OpenLayers的活儿），它只关心图形本身的关系和计算：相交吗？包含吗？距离多远？合并后是什么形状？缓冲区怎么做？这些计算都严格遵循开放地理空间联盟（OGC）的简单要素访问规范，这意味着它的计算结果与PostGIS、QGIS等专业GIS软件是相互兼容、可互操作的。

所以，当你的WebGIS项目从简单的“展示”迈向复杂的“分析”时，JSTS几乎是一个必然的选择。它填补了前端地图可视化库与专业空间分析能力之间的鸿沟。

2. JSTS核心能力全景：不止于“判断相交”

很多人对JSTS的第一印象就是“用来判断两个图形相不相交的”。这没错，但它的能力远不止于此。我们可以把它的核心功能分成几个层次来理解，这能帮助我们在合适的场景下想起它。

2.1 几何模型与创建：一切的起点

JSTS定义了一套自己的几何对象模型，与OpenLayers的几何对象是两套独立的体系，但可以方便地相互转换。它的核心类都在jsts/geom命名空间下：

• Coordinate: 代表一个二维坐标点(x, y)。注意，在未指定坐标系的情况下，JSTS默认处理的是平面坐标（如经纬度或Web墨卡托坐标），不涉及球面运算。
• Point: 点。
• LineString: 线串，由一系列坐标点顺序连接而成。
• LinearRing: 线性环，一种首尾闭合的、不自相交的LineString，是构成多边形的基础。
• Polygon: 多边形，由一个外边界环和零个或多个内边界环（孔洞）组成。
• GeometryCollection: 几何集合，可以包含任意类型几何对象的集合。

创建这些几何对象，通常有两种方式：

1. 通过JSTS自身的工厂类：使用new jsts.geom.GeometryFactory()创建工厂实例，然后调用其方法如createPoint、createPolygon等。
2. 更常用的：从OpenLayers几何对象转换：这是99%的使用场景。JSTS贴心地提供了olParser工具。

// 假设我们有一个OpenLayers的Polygon对象：olPolygon import { GeoJSON } from 'ol/format'; import * as jsts from 'jsts'; // 1. 创建解析器（Reader） const parser = new jsts.io.OL3Parser(); // 需要将OpenLayers的几何库注入给解析器，使其理解ol的几何类型 parser.inject( Point, LineString, LinearRing, Polygon, MultiPoint, MultiLineString, MultiPolygon, GeometryCollection ); // 2. 将OpenLayers几何对象转换为JSTS几何对象 const jstsPolygon = parser.read(olPolygon); // 3. 进行JSTS的各种运算... // const buffer = jstsPolygon.buffer(0.01); // 4. 将JSTS几何对象转换回OpenLayers几何对象 const newOlPolygon = parser.write(buffer);

这个“读”和“写”的过程，是连接可视化层（OpenLayers）与分析层（JSTS）的桥梁。

2.2 空间谓词与关系运算：回答“在哪里”

这是最常用的功能，用于判断两个几何对象之间的空间关系。核心方法是geometry.谓词方法(otherGeometry)，返回布尔值。

• intersects(geom): 是否相交？这是最宽松的关系，只要图形有任何一个公共点（包括边界接触）就返回true。
• contains(geom): 是否完全包含？geom的所有点都在原图形内部，且边界不接触。
• within(geom): 是否完全位于内部？原图形的所有点都在geom内部，是contains的反关系。
• covers(geom)/coveredBy(geom): 与contains/within类似，但允许边界接触。例如，一条线的端点正好在多边形的边上，contains为false，但covers为true。这在某些精确判断场景下非常有用。
• disjoint(geom): 是否相离？没有任何公共点，与intersects相反。
• touches(geom): 是否接触？仅有边界接触，内部无交集。
• crosses(geom): 是否交叉？通常用于线/线，线/面之间，指相交且交点的维度小于参与图形的最大维度（例如，两条线相交于一点）。
• overlaps(geom): 是否重叠？两个同维度图形部分相交，且相交部分也是同维度的（如面与面重叠部分仍是面）。

实操心得：contains和within要求非常严格，边界上的一点接触都会导致返回false。在判断“点是否在多边形内”这种常见需求时，如果点可能落在边界上，使用covers或intersects会更符合直觉。务必根据业务逻辑的精确要求来选择谓词。

2.3 空间分析方法：生成新的几何图形

这类方法会对原图形进行计算，并返回一个新的几何图形。

• buffer(distance): 缓冲区分析。给定一个距离，为图形周围生成一个等距区域。对于面，可以是外扩（正距离）或内缩（负距离）。buffer方法的第二个参数可以指定缓冲区的精细度（quadrantSegments），值越大，生成的缓冲区边界越圆滑，但计算量也越大。
• convexHull(): 凸壳。返回包含原图形所有点的最小凸多边形。
• intersection(geom): 求交。返回两个图形的公共部分。
• union(geom): 求并。返回两个图形合并后的图形。
• difference(geom): 求差。返回原图形减去与另一个图形重叠部分后剩下的图形。
• symDifference(geom): 对称差。返回两个图形不相交的部分（即并集减去交集）。
• centroid(): 几何中心。返回一个位于图形内部的点（对于面而言），不一定是形心。
• envelope(): 外包矩形。返回能完全包含该图形的最小矩形（轴对齐边界框）。

踩坑记录：buffer操作在球面坐标系（如EPSG:4326）下进行时，其“距离”单位是度，这在实际地理距离上差异很大（赤道上1度约111公里，高纬度地区则短很多）。通常的做法是，先将几何图形投影到平面坐标系（如EPSG:3857）进行计算，再将结果转回地理坐标系显示。JSTS本身不负责投影转换，这需要借助ol/proj或proj4库来完成。

2.4 几何操作与有效性：让数据更“健康”

• simplify(tolerance): 道格拉斯-普克算法简化。在保持图形形状大致不变的前提下，移除冗余的顶点，减小数据量。tolerance是容差，值越大简化越激进。
• isValid(): 几何有效性验证。检查几何图形是否符合OGC简单要素规范。例如，Polygon的环不能自相交，线性环必须闭合等。在处理用户绘制或来源不可靠的数据时，这是必不可少的一步。
• isSimple(): 对于LineString和MultiLineString，检查其是否自相交。
• norm(): 规范化几何。对几何的坐标进行排序和去重，使得几何在数学上“标准”。这对于比较两个几何图形是否相等非常有用，因为坐标顺序不同但形状相同的两个多边形，在未规范化前，JSTS会认为它们不相等。

3. 实战示例：从用户绘制的图形中提取分析结果

光说不练假把式。我们来看一个结合了OpenLayers和JSTS的完整示例。场景是：用户在地图上随意绘制一个多边形（比如规划区域），我们需要自动计算并展示这个多边形的面积、周长，以及其向外扩展500米的缓冲区。

3.1 环境搭建与基础绘制

首先，确保你的项目已经引入了OpenLayers和JSTS。

npm install ol jsts

然后，创建一个基础的HTML页面和JavaScript文件。

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JSTS实战：多边形分析与缓冲</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css"> <style> #map { width: 100%; height: 600px; } #info-panel { position: absolute; top: 10px; right: 10px; background: white; padding: 15px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); font-family: sans-serif; max-width: 300px; } </style> </head> <body> <div id="map"></div> <div id="info-panel"> <h4>分析结果</h4> <p>请在地图上绘制一个多边形。</p> <div id="results"></div> </div> <script type="module" src="./main.js"></script> </body> </html>

接下来是核心的JavaScript逻辑 (main.js)。

import Map from 'ol/Map'; import View from 'ol/View'; import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'; import { OSM } from 'ol/source'; import { Vector as VectorSource } from 'ol/source'; import { Draw, Modify, Snap } from 'ol/interaction'; import { Style, Stroke, Fill } from 'ol/style'; import Polygon from 'ol/geom/Polygon'; import { getArea, getLength } from 'ol/sphere'; // OpenLayers的球面面积/长度计算 import { LineString, LinearRing } from 'ol/geom'; import * as jsts from 'jsts'; // 1. 初始化地图和图层 const rasterLayer = new TileLayer({ source: new OSM() }); const source = new VectorSource(); const vectorLayer = new VectorLayer({ source: source, style: new Style({ stroke: new Stroke({ color: 'blue', width: 3 }), fill: new Fill({ color: 'rgba(0, 0, 255, 0.1)' }) }) }); const map = new Map({ target: 'map', layers: [rasterLayer, vectorLayer], view: new View({ center: [0, 0], zoom: 2 }) }); // 2. 初始化绘制交互（多边形） const draw = new Draw({ source: source, type: 'Polygon', style: new Style({ stroke: new Stroke({ color: 'red', width: 2 }), fill: new Fill({ color: 'rgba(255, 0, 0, 0.2)' }) }) }); map.addInteraction(draw); // 添加修改和吸附交互，提升用户体验 const modify = new Modify({ source: source }); map.addInteraction(modify); const snap = new Snap({ source: source }); map.addInteraction(snap); // 3. 初始化JSTS解析器 // 注意：需要注入OpenLayers的几何类型 const parser = new jsts.io.OL3Parser(); parser.inject( // 注入OpenLayers的几何类 // 这里需要根据你的OpenLayers版本和引入方式调整 // 假设我们通过import引入了所需的类 // 如果遇到问题，可以尝试：parser.inject(...ol.geom); // 但更推荐明确注入 // 我们稍后在事件处理函数中动态获取 ); // 4. 核心：绘制完成事件处理 draw.on('drawend', async (event) => { const olGeometry = event.feature.getGeometry(); if (!(olGeometry instanceof Polygon)) return; // 动态注入几何类（确保在事件触发时可用） // 这是一种更稳妥的方式，避免因模块加载顺序问题导致注入失败 const geom = await import('ol/geom'); parser.inject( geom.Point, geom.LineString, geom.LinearRing, geom.Polygon, geom.MultiPoint, geom.MultiLineString, geom.MultiPolygon, geom.GeometryCollection ); // 将OpenLayers几何转换为JSTS几何 const jstsGeometry = parser.read(olGeometry.clone()); // 克隆一份，避免影响原图形 // 示例1：计算面积和周长（地理坐标系下） // 注意：OpenLayers的getArea/getLength是球面计算，更准确 const area = getArea(olGeometry); // 平方米 const perimeter = getLength(olGeometry.getLinearRing(0)); // 米 // JSTS的getArea()是平面计算，在经纬度下不准确，此处仅作演示 const planarArea = jstsGeometry.getArea(); // 示例2：创建缓冲区（500米） // 关键点：JSTS的buffer操作需要在投影坐标系下进行 // 1. 将几何图形从EPSG:4326（地图视图可能用的）转换到EPSG:3857（Web墨卡托，单位是米） const proj = await import('ol/proj'); const transformedCoords = olGeometry.clone().transform('EPSG:4326', 'EPSG:3857').getCoordinates(); const olGeometry3857 = new Polygon(transformedCoords); const jstsGeometry3857 = parser.read(olGeometry3857); // 2. 在EPSG:3857坐标系下进行buffer操作（距离500米） const bufferDistance = 500; // 米 const bufferedJstsGeom3857 = jstsGeometry3857.buffer(bufferDistance); // 3. 将缓冲结果转换回EPSG:4326坐标系用于显示 const bufferedOlGeom3857 = parser.write(bufferedJstsGeom3857); const bufferedOlGeom = bufferedOlGeom3857.transform('EPSG:3857', 'EPSG:4326'); // 将缓冲区图形添加到地图 const bufferFeature = new Feature({ geometry: bufferedOlGeom, name: '500米缓冲区' }); const bufferStyle = new Style({ stroke: new Stroke({ color: 'green', width: 2 }), fill: new Fill({ color: 'rgba(0, 255, 0, 0.1)' }) }); bufferFeature.setStyle(bufferStyle); source.addFeature(bufferFeature); // 示例3：检查原多边形是否是有效的简单多边形 const isValid = jstsGeometry.isValid(); const isSimple = jstsGeometry.isSimple(); // 对于Polygon，isSimple()总是返回true，有效性检查用isValid() // 更新信息面板 const resultsDiv = document.getElementById('results'); resultsDiv.innerHTML = ` <p><strong>几何信息：</strong></p> <ul> <li>球面面积：${(area / 1e6).toFixed(2)} 平方公里</li> <li>球面周长：${(perimeter / 1000).toFixed(2)} 公里</li> <li>平面面积（JSTS，仅供参考）：${planarArea.toFixed(6)} 平方度</li> <li>几何有效性：${isValid ? '✅ 有效' : '❌ 无效'}</li> </ul> <p><strong>已生成500米缓冲区（绿色区域）。</strong></p> <p>尝试修改原多边形（蓝色），缓冲区和计算结果会实时更新。</p> `; // 5. 绑定修改事件，实现交互式更新 // 当用户修改多边形时，重新计算所有信息 modify.on('modifyend', (modifyEvent) => { // 找到被修改的原始多边形特征（不是缓冲区特征） const modifiedFeature = modifyEvent.features.getArray().find(f => f.get('name') !== '500米缓冲区'); if (modifiedFeature && modifiedFeature.getGeometry() instanceof Polygon) { // 移除旧的缓冲区特征 const bufferFeatures = source.getFeatures().filter(f => f.get('name') === '500米缓冲区'); bufferFeatures.forEach(f => source.removeFeature(f)); // 重新触发计算逻辑（这里可以抽象成一个函数避免重复代码） // 为简洁起见，这里直接调用上面的计算逻辑，实际应封装 const newOlGeom = modifiedFeature.getGeometry(); const newJstsGeom = parser.read(newOlGeom.clone()); const newArea = getArea(newOlGeom); const newPerimeter = getLength(newOlGeom.getLinearRing(0)); const newPlanarArea = newJstsGeom.getArea(); // 重新计算并添加缓冲区 const newTransformedCoords = newOlGeom.clone().transform('EPSG:4326', 'EPSG:3857').getCoordinates(); const newOlGeometry3857 = new Polygon(newTransformedCoords); const newJstsGeometry3857 = parser.read(newOlGeometry3857); const newBufferedJstsGeom3857 = newJstsGeometry3857.buffer(bufferDistance); const newBufferedOlGeom3857 = parser.write(newBufferedJstsGeom3857); const newBufferedOlGeom = newBufferedOlGeom3857.transform('EPSG:3857', 'EPSG:4326'); const newBufferFeature = new Feature({ geometry: newBufferedOlGeom, name: '500米缓冲区' }); newBufferFeature.setStyle(bufferStyle); source.addFeature(newBufferFeature); // 更新显示 resultsDiv.innerHTML = ` <p><strong>几何信息（已更新）：</strong></p> <ul> <li>球面面积：${(newArea / 1e6).toFixed(2)} 平方公里</li> <li>球面周长：${(newPerimeter / 1000).toFixed(2)} 公里</li> <li>平面面积（JSTS）：${newPlanarArea.toFixed(6)} 平方度</li> <li>几何有效性：${newJstsGeom.isValid() ? '✅ 有效' : '❌ 无效'}</li> </ul> <p><strong>缓冲区已更新。</strong></p> `; } }); }); // 初始提示 document.getElementById('results').innerHTML = '<p>请使用左侧工具栏的绘制多边形工具，在地图上画一个区域。</p>';

这个示例虽然代码较长，但清晰地展示了JSTS与OpenLayers协作的完整流程：

1. 事件驱动：监听绘制完成事件。
2. 坐标转换：在缓冲区计算前，将几何图形转换到以米为单位的投影坐标系（EPSG:3857），这是进行真实距离计算的关键。
3. JSTS核心运算：调用buffer()方法。
4. 结果回显：将JSTS几何对象写回OpenLayers格式，并转换回显示坐标系。
5. 交互增强：通过Modify交互，实现了图形修改后分析结果的实时更新，提供了动态的、用户友好的体验。

重要提示：在实际项目中，频繁进行buffer等复杂计算（尤其是对复杂图形）可能会阻塞主线程，影响页面响应。对于计算密集型任务，考虑使用Web Worker在后台线程中执行JSTS运算，算完后再将结果传回主线程更新UI。

4. 性能优化与常见问题排查

将JSTS引入生产环境，除了功能实现，我们还需要关注性能和稳定性。

4.1 几何数据预处理：提升运算效率

JSTS的运算性能与几何图形的复杂度（顶点数量）直接相关。在处理大规模或高精度数据时，预处理是必须的。

• 简化（Simplification）：使用geometry.simplify(tolerance)方法。在允许的精度损失范围内，大幅减少顶点数。例如，从GPS轨迹或高精度测绘数据生成的线/面，通常包含大量冗余点。

  const tolerance = 0.0001; // 容差值，需要根据你的数据范围和精度需求调整 const simplifiedGeometry = originalJstsGeometry.simplify(tolerance);

  容差值的选择是个经验活。可以先取一个较小的值（如0.00001），观察简化后的图形在屏幕上的显示是否还能接受，同时对比运算时间的提升。

• 有效性验证与修复：在运算前，务必使用geometry.isValid()进行检查。无效的几何图形（如自相交多边形）会导致buffer、union等运算抛出异常或返回错误结果。

  • 常见无效原因：多边形外环不是逆时针方向、内环（孔洞）不是顺时针方向、环自相交、环与环相交。
  • JSTS的修复能力有限：JSTS核心库主要提供验证。对于修复，你可能需要更复杂的算法或考虑在数据源头（如后端用PostGIS的ST_MakeValid）进行处理。

• 使用外包矩形（Envelope）进行快速过滤：在进行大量几何关系判断（如“哪些要素与这个区域相交？”）时，先计算每个几何图形的envelope()（一个矩形）。判断两个矩形是否相交的速度远快于判断两个复杂多边形是否相交。如果矩形都不相交，那几何图形肯定不相交，可以快速跳过。这在大规模空间查询中是非常经典的优化手段。

4.2 坐标系陷阱：为什么我的缓冲区形状不对？

这是新手最常踩的坑，上面示例中已经提到，这里再强调一下其原理和解决方案。

• 问题根源：JSTS的buffer(distance)方法是在二维笛卡尔平面上进行计算的。它认为坐标(x, y)中的x和y是同一线性单位的数值。而地理坐标系（如EPSG:4326，WGS84）的坐标是(经度, 纬度)，单位是度。在地球球面上，1度经度对应的实际米数随纬度变化很大。直接用度做距离单位进行buffer(0.01)，得到的不是一个“圆”，而是一个在经度方向被严重拉伸的椭圆。

• 标准解决方案：

  1. 投影转换：如示例所示，将几何图形从地理坐标系转换到投影坐标系（如EPSG:3857 Web墨卡托、EPSG:32633 UTM等），这些坐标系单位是米。
  2. 在投影坐标系下进行JSTS运算。
  3. 将结果转换回地理坐标系用于显示。

• 进阶考量：Web墨卡托（EPSG:3857）在高纬度地区变形极大，不适合做精确的大范围空间分析。对于精度要求高的应用（如工程测量），应该使用当地的UTM投影或其它适当投影。这意味着你的应用可能需要动态加载不同的投影定义（使用proj4库），并管理多套坐标转换逻辑。

4.3 异常处理与调试

• TopologyException：这是JSTS运算中最常见的异常，通常意味着输入的几何图形存在问题（如无效、精度过低导致坐标过于接近等）。在调用union,intersection,buffer等方法时，用try...catch包裹起来是个好习惯。

  try { const result = geomA.union(geomB); } catch (error) { console.error('拓扑运算失败:', error); // 降级处理：例如返回原始图形，或使用envelope进行近似 if (error instanceof jsts.geom.TopologyException) { console.log('尝试对输入图形进行简化或精度降低后再试。'); const simplifiedA = geomA.simplify(0.00001); const simplifiedB = geomB.simplify(0.00001); // 再次尝试... } }

• 精度问题（precisionModel）：JSTS内部使用双精度浮点数。当坐标值非常大（如Web墨卡托坐标）或非常小时，浮点数精度误差可能导致运算失败。JSTS允许设置PrecisionModel来固定有效数字位数或缩放坐标。对于Web墨卡托坐标，有时需要降低精度模型或对坐标进行缩放/偏移来保证稳定性。这属于高级话题，在大多数WebGIS场景下，做好坐标转换和几何简化已足够。

• 内存与性能监控：处理超大的GeometryCollection或极其复杂的Polygon（例如国界）时，注意内存使用。可以考虑分块处理（将大区域拆分成瓦片），或使用web worker防止界面卡顿。在浏览器开发者工具的“性能”面板中录制操作过程，可以直观看到JSTS运算所占用的CPU时间和内存。

5. 超越基础：JSTS在复杂业务场景中的应用思路

掌握了基本操作后，JSTS可以成为解决复杂业务逻辑的利器。

5.1 空间查询与过滤

假设你有一批点状设施数据（Feature[]），和一个用户绘制的多边形选区。需要快速找出所有落在选区内的设施。

// facilities 是 OpenLayers VectorSource 中的一组点要素 // selectedPolygonJsts 是用户绘制多边形转换后的JSTS几何对象 const selectedPolygonJsts = parser.read(userDrawnPolygon); const facilitiesInside = facilities.filter(feature => { const pointGeom = feature.getGeometry(); const pointJsts = parser.read(pointGeom); // 使用 covers，允许点在边界上 return selectedPolygonJsts.covers(pointJsts); });

结合前面提到的外包矩形快速过滤，可以进一步提升大规模数据查询的性能。

5.2 几何差异与变化检测

比较两个版本的区域图形（如规划方案V1和V2），找出新增、删除和修改的部分。

const oldAreaJsts = parser.read(oldPolygon); const newAreaJsts = parser.read(newPolygon); // 新增区域：新版本有，旧版本没有的部分 const addedPart = newAreaJsts.difference(oldAreaJsts); // 删除区域：旧版本有，新版本没有的部分 const deletedPart = oldAreaJsts.difference(newAreaJsts); // 未变区域：两个版本的公共部分 const unchangedPart = newAreaJsts.intersection(oldAreaJsts); // 将结果可视化 source.addFeature(new Feature({ geometry: parser.write(addedPart), name: '新增' })); source.addFeature(new Feature({ geometry: parser.write(deletedPart), name: '删除' })); // 未变区域可以用不同样式表示

5.3 生成复杂几何图形

例如，生成一个围绕中心点、宽度不等的“星形”缓冲区，或者根据道路中心线生成车道面。这需要结合buffer与union/difference。

// 假设有一条中心线 centerLineJsts (LineString) // 生成不同宽度的缓冲区 const leftBuffer = centerLineJsts.buffer(10); // 左侧10米 const rightBuffer = centerLineJsts.buffer(5); // 右侧5米 // 合并成一个不对称的车道面（这里简化处理，实际需考虑方向） const totalBuffer = leftBuffer.union(rightBuffer); // 更复杂的例子：先生成一个大缓冲区，再“挖”掉一些小缓冲区来模拟孔洞 const largeBuffer = someGeometry.buffer(100); const hole1 = aPoint.buffer(20); const hole2 = anotherPoint.buffer(15); const finalGeometry = largeBuffer.difference(hole1.union(hole2));

5.4 与Turf.js的对比与选型

你可能会听到另一个流行的前端空间分析库：Turf.js。它同样功能强大，API设计更现代化（函数式风格），且内置了球面几何计算（如turf.area直接返回平方米）。

如何选择？

• 选择JSTS的情况：

  • 你的后端栈使用了JTS/PostGIS，希望前后端空间计算逻辑和结果完全一致，保证无缝对接。
  • 你需要处理非常复杂的拓扑运算，JTS/JSTS算法经过几十年工业级应用的考验，在极端情况下的稳定性和正确性可能更有优势。
  • 你的项目已经深度集成OpenLayers，JSTS的olParser让转换极其方便。

• 选择Turf.js的情况：

  • 你的项目是全新的，或者与Mapbox GL JS集成更紧密。
  • 你更需要方便的、开箱即用的地理空间（球面）计算函数，不想手动处理投影转换。
  • 你更喜欢函数式、模块化的API风格。

好消息是，它们并不完全互斥。在一些项目中，我见过混合使用的情况：用Turf.js进行快速的地理距离/面积计算和简单空间过滤，用JSTS处理复杂的多边形布尔运算。了解两者的特点，能让你在技术选型时更加从容。

我个人在长期使用OpenLayers的生态中，更倾向于JSTS。那种从OpenLayers几何对象直接parser.read()进来，算完再parser.write()回去的流畅感，以及与后端PostGIS“讲同一种语言”的安心感，是其他组合难以替代的。尤其是在处理来自数据库的、已经经过ST_MakeValid等处理的复杂几何时，JSTS能确保前端验证与后端逻辑高度一致，避免了很多潜在的边界情况问题。