JSTS介绍和功能简单示例

本文介绍了JavaScript空间拓扑库JSTS的使用,包括如何与OpenLayers集成,以及如何进行缓冲区、交集、差集和融合等空间操作。虽然JSTS的文档不如turf清晰,但它提供了直接适用于OL的几何对象。通过示例代码,展示了如何实现这些功能,并提供了错误处理提示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

JSTS是一个符合OGC标准的,包含空间拓扑功能的JavaScript类库。和turf类似,区别在于,JSTS是通过原始JTS Java 源代码翻译来的,保留了JTSAPI;而turf来自MapBox。个人感觉JSTS的文档不如turf明了(一些网址还404了),但是可以直接适用OpenLayers(以下简称OL)的几何对象,对JTS API熟悉的话在OL工程里可能会更方便。

JSTS的参考文档比较分散,GitHub库里有比较全面的简介,这个地址里有一些简单的示例,JTS API直接用的JavaAPI,看起来并不直观,另外使用了一些空间数据类型读取类代替JavaAPI里的IO部分。

所以若想比较完整的了解JSTS类库和基础使用,建议按照顺序,先浏览Github库的README.md,直接用谷歌浏览器的机翻大概看一遍,然后看一下简单示例,到具体的代码编写时,数据读写部分参考http://bjornharrtell.github.io/jsts/1.6.1/doc/index.html,空间功能部分参考JavaAPI。

注,以下个人应用示例用的是Vue2+TS,若你的环境不一样请自行修改

安装和调用

没啥好说的,使用npm/yarn啥的自行安装,或者引用在线地址
引用时,若使用npm包,由于jsts没有类型声明文件,固然有一些比较好的方法,我这里还是图省事直接用的require。调用代码如下

// 引入OL几何类
import Geometry from "ol/geom/Geometry";
import { LineString, LinearRing, MultiLineString, MultiPoint, MultiPolygon, Point, Polygon } from "ol/geom";

// 引入jsts
const jsts = require("jsts/dist/jsts.min.js");

// 实例化OL解析类
const OLParser = new jsts.io.OL3Parser();
// 注入OL几何对象
OLParser.inject(Point, LineString, LinearRing, Polygon, MultiPoint, MultiLineString, MultiPolygon);

功能示例

先定义了一个函数类型

type TopoFunc = (...params: any) => Geometry | null;

缓冲区
在这里插入图片描述

/**
 * 缓冲区
 * @param geom
 * @param len 缓冲区距离,单位米
 * @returns
 */
const getBuffer: TopoFunc = (geom: Geometry, len: number) => {
  const jstsGeom = OLParser.read(geom);
  if (!jstsGeom.isValid()) {
    console.error("几何对象出现拓扑错误,请检查修复");
    return null;
  }

  const buffered = jstsGeom.buffer(len);
  return OLParser.write(buffered);
};

取交
在这里插入图片描述

/**
 * 取交
 * @param geom
 * @param geomB
 * @returns
 */
const intersects: TopoFunc = (geom: Geometry, geomB: Geometry) => {
  const jstsGeom = OLParser.read(geom);
  const jstsGeomB = OLParser.read(geomB);

  if (!jstsGeom.isValid() || !jstsGeomB.isValid()) {
    console.error("几何对象出现拓扑错误,请检查修复");
    return null;
  }

  const difference = jstsGeom.intersection(jstsGeomB);
  return OLParser.write(difference);
};

取补
在这里插入图片描述

/**
 * 取geom中geomB的补集
 * @param geom
 * @param geomB
 * @returns
 */
const getDifference: TopoFunc = (geom: Geometry, geomB: Geometry) => {
  const jstsGeom = OLParser.read(geom);
  const jstsGeomB = OLParser.read(geomB);

  if (!jstsGeom.isValid() || !jstsGeomB.isValid()) {
    console.error("几何对象出现拓扑错误,请检查修复");
    return null;
  }

  const difference = jstsGeom.difference(jstsGeomB);
  return OLParser.write(difference);
};

融合
在这里插入图片描述

/**
 * 融合
 * @param geom
 * @param geomB
 * @returns
 */
const union: TopoFunc = (geom: Geometry, geomB: Geometry) => {
  const jstsGeom = OLParser.read(geom);
  const jstsGeomB = OLParser.read(geomB);

  if (!jstsGeom.isValid() || !jstsGeomB.isValid()) {
    console.error("几何对象出现拓扑错误,请检查修复");
    return null;
  }

  const difference = jstsGeom.union(jstsGeomB);
  return OLParser.write(difference);
};

对等差分
在这里插入图片描述

/**
 * 对等差分
 * @param geom
 * @param geomB
 * @returns
 */
const symDifference: TopoFunc = (geom: Geometry, geomB: Geometry) => {
  const jstsGeom = OLParser.read(geom);
  const jstsGeomB = OLParser.read(geomB);

  if (!jstsGeom.isValid() || !jstsGeomB.isValid()) {
    console.error("几何对象出现拓扑错误,请检查修复");
    return null;
  }

  const difference = jstsGeom.symDifference(jstsGeomB);
  return OLParser.write(difference);
};

备注

工作中遇到个拓扑错误,多边形自相交
在这里插入图片描述
尝试使用GeometryPrecisionReducer降低精度,但还是有问题,就索性代码里直接抛出,手动修改数据来修复吧。GeometryPrecisionReducer的代码也附下,执行没啥问题,但是结果依然不好,感兴趣可以研究下

function topoFix(jstsGeom: any) {
  if (jstsGeom.isValid()) {
    return jstsGeom;
  }
  const reducer = new jsts.precision.GeometryPrecisionReducer();
  // 这里直接使用reduce方法会直接报错
  // 若使用reducer.fixPolygonalTopology会正常执行,但返回的几何不大对,后面使用会报一样的错
  return reducer.reduce(jstsGeom);
}

错误
在这里插入图片描述

### JavaScript 与 TypeScript 在项目开发中的差异对比 在项目开发中,JavaScript TypeScript 的主要区别体现在类型系统、开发体验、代码维护性以及生态系统支持等方面。以下是详细的对比分析: #### 1. 类型系统 TypeScript 提供了静态类型检查功能,而 JavaScript 是一种动态类型的编程语言[^3]。这意味着,在 TypeScript 中,开发者可以在编译阶段捕获许多潜在的类型错误,从而减少运行时错误的发生。例如: ```typescript function add(a: number, b: number): number { return a + b; } ``` 上述代码明确指定了 `add` 函数的参数返回值类型,而在 JavaScript 中则无法实现这种类型约束。 #### 2. 开发体验 TypeScript 的类型系统不仅提高了代码质量,还增强了开发工具的支持,如智能提示、自动补全重构功能等[^4]。这使得开发者能够更高效地编写维护代码。相比之下,JavaScript 的动态特性虽然提供了更大的灵活性,但在大型项目中可能导致更高的出错率。 #### 3. 代码维护性 由于 TypeScript 是 JavaScript 的超集,并且引入了接口、类模块等面向对象编程的概念[^2],它更适合用于构建复杂且需要长期维护的应用程序。这些特性有助于提高代码的可读性可维护性。例如: ```typescript interface User { id: number; name: string; } function greetUser(user: User): void { console.log(`Hello, ${user.name}!`); } ``` 通过定义接口 `User`,可以确保传递给 `greetUser` 函数的对象结构符合预期。 #### 4. 生态系统支持 尽管 TypeScript 的生态系统正在快速发展,但 JavaScript 仍然拥有更为广泛的库框架支持[^4]。然而,许多现代框架(如 Angular、Vue 3 React)已经对 TypeScript 提供了深度集成,这为开发者提供了更多的选择。 #### 5. 性能表现 在运行时,TypeScript 编译后的 JavaScript 代码与普通的 JavaScript 代码性能相同[^3]。这是因为 TypeScript 的类型信息仅在编译阶段使用,最终生成的仍然是纯 JavaScript 代码。 #### 6. 使用场景 根据项目需求技术选型指南[^5],以下是一些推荐的使用场景: - **TypeScript**:适用于大型工程、团队协作场景或需要严格代码规范的项目。 - **JavaScript**:适合快速原型开发、小型脚本工具开发或已有大型 JavaScript 代码库的渐进式迁移。 ### 示例代码对比 以下是一个简单示例,展示两种语言在函数定义上的差异: ```javascript // JavaScript 示例 function multiply(a, b) { return a * b; } ``` ```typescript // TypeScript 示例 function multiply(a: number, b: number): number { return a * b; } ``` TypeScript 的版本通过类型注解明确了参数返回值的类型,从而减少了因类型不匹配导致的错误。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值