JtsGeometry 接口文档

本文档提供了 JtsGeometry 类的 JavaScript 接口。该类封装了 JTS 库的常见几何操作方法，用于处理点、线、多边形等几何对象的创建、转换、归一化、地理坐标转换以及几何计算等功能。同时该接口描述了在图像上绘制多边形、标签和全局文本的方法，支持基于 URL 和 Base64 编码的图像。

方法

`createCoordinates(coords)`

根据坐标列表创建坐标数组。

参数

coords (Array<Array<number>>): 坐标列表，每个元素是一个长度为 2 或 3 的数组，分别表示 x 和 y 坐标（可选 z 坐标）。

返回值

Array<{x: number, y: number, z?: number}>: 坐标对象数组，确保多边形闭合（起点和终点相同）。

注意事项

如果输入坐标未闭合（起点和终点不同），会自动添加起点坐标作为终点以闭合多边形。

示例

const coords = [[100, 100], [200, 100], [200, 200]];
const coordinates = JtsGeometry.createCoordinates(coords);
// 返回: [{x: 100, y: 100}, {x: 200, y: 100}, {x: 200, y: 200}, {x: 100, y: 100}]

`normalizeCoordinates(coordinates, width, height)`

对坐标数组进行归一化处理。

参数

coordinates (Array<{x: number, y: number}>): 要归一化的坐标对象数组。
width (number): 归一化参考宽度。
height (number): 归一化参考高度。

返回值

Array<{x: number, y: number}>: 归一化后的坐标对象数组，x 和 y 坐标分别除以宽度和高度。

示例

const coordinates = [{x: 100, y: 100}, {x: 200, y: 200}];
const normalized = JtsGeometry.normalizeCoordinates(coordinates, 400, 300);
// 返回: [{x: 0.25, y: 0.333...}, {x: 0.5, y: 0.666...}]

`denormalizeCoordinates(coordinates, width, height)`

对归一化的坐标数组进行去归一化处理。

参数

coordinates (Array<{x: number, y: number}>): 归一化的坐标对象数组。
width (number): 去归一化参考宽度。
height (number): 去归一化参考高度。

返回值

Array<{x: number, y: number}>: 去归一化后的坐标对象数组，x 和 y 坐标分别乘以宽度和高度。

示例

const coordinates = [{x: 0.25, y: 0.333}, {x: 0.5, y: 0.666}];
const denormalized = JtsGeometry.denormalizeCoordinates(coordinates, 400, 300);
// 返回: [{x: 100, y: 99.9}, {x: 200, y: 199.8}]

`createCoordinatesXYXY(coords)`

将 xyxy 格式的坐标转换为多边形坐标数组。

参数

coords (Array<number>): 长度为 4 的数组，分别表示左上角 x、左上角 y、右下角 x、右下角 y。

返回值

Array<{x: number, y: number}>: 包含 5 个坐标对象的数组（左上、右上、右下、左下、左上），表示闭合多边形。

示例

const coords = [100, 100, 200, 200];
const coordinates = JtsGeometry.createCoordinatesXYXY(coords);
// 返回: [{x: 100, y: 100}, {x: 200, y: 100}, {x: 200, y: 200}, {x: 100, y: 200}, {x: 100, y: 100}]

`createCoordinatesXYWH(coords)`

将 xywh 格式的坐标转换为多边形坐标数组。

参数

coords (Array<number>): 长度为 4 的数组，分别表示中心点 x、中心点 y、宽度、高度。

返回值

Array<{x: number, y: number}>: 包含 5 个坐标对象的数组（左上、右上、右下、左下、左上），表示闭合多边形。

示例

const coords = [150, 150, 100, 100];
const coordinates = JtsGeometry.createCoordinatesXYWH(coords);
// 返回: [{x: 100, y: 100}, {x: 200, y: 100}, {x: 200, y: 200}, {x: 100, y: 200}, {x: 100, y: 100}]

`toCoordinatesByArray(coords)`

将二维数组转换为坐标对象数组。

参数

coords (Array<Array<number>>): 坐标列表，每个元素是长度为 2 或 3 的数组，分别表示 x 和 y 坐标（可选 z 坐标）。

返回值

Array<{x: number, y: number, z?: number}>: 坐标对象数组。

示例

const coords = [[100, 100], [200, 200, 10]];
const coordinates = JtsGeometry.toCoordinatesByArray(coords);
// 返回: [{x: 100, y: 100}, {x: 200, y: 200, z: 10}]

`toCoordinates(coords)`

将单个坐标数组转换为坐标对象。

参数

coords (Array<number>): 长度为 2 或 3 的数组，分别表示 x 和 y 坐标（可选 z 坐标）。

返回值

{x: number, y: number, z?: number}: 坐标对象。

示例

const coords = [100, 100, 10];
const coordinate = JtsGeometry.toCoordinates(coords);
// 返回: {x: 100, y: 100, z: 10}

`pixelToGeoCoordinates(pixelCoordinates, pixelOrigin, geoOrigin, geoDistancePerPixelX, geoDistancePerPixelY)`

将像素坐标转换为地理坐标。

参数

pixelCoordinates (Array<{x: number, y: number}>): 像素坐标对象数组。
pixelOrigin ({x: number, y: number}): 像素原点坐标。
geoOrigin ({x: number, y: number, z?: number}): 地理原点坐标。
geoDistancePerPixelX (number): 每个像素在 x 方向的地理距离。
geoDistancePerPixelY (number): 每个像素在 y 方向的地理距离。

返回值

Array<{x: number, y: number, z?: number}>: 地理坐标对象数组。

示例

const pixelCoordinates = [{x: 100, y: 100}];
const pixelOrigin = {x: 0, y: 0};
const geoOrigin = {x: 10, y: 20};
const geoCoordinates = JtsGeometry.pixelToGeoCoordinates(pixelCoordinates, pixelOrigin, geoOrigin, 0.1, 0.2);
// 返回: [{x: 20, y: 40}]

`pixelToGeoCoordinatesByScale(pixelCoordinates, pixelOrigin, geoOrigin, scale)`

使用统一比例尺将像素坐标转换为地理坐标。

参数

pixelCoordinates (Array<{x: number, y: number}>): 像素坐标对象数组。
pixelOrigin ({x: number, y: number}): 像素原点坐标。
geoOrigin ({x: number, y: number, z?: number}): 地理原点坐标。
scale (number): 统一比例尺。

返回值

Array<{x: number, y: number, z?: number}>: 地理坐标对象数组。

示例

const pixelCoordinates = [{x: 100, y: 100}];
const pixelOrigin = {x: 0, y: 0};
const geoOrigin = {x: 10, y: 20};
const geoCoordinates = JtsGeometry.pixelToGeoCoordinatesByScale(pixelCoordinates, pixelOrigin, geoOrigin, 0.1);
// 返回: [{x: 20, y: 30}]

`createPoint(x, y)`

创建点对象。

参数

x (number): 点的 x 坐标。
y (number): 点的 y 坐标。

返回值

Point: 点对象。

示例

const point = JtsGeometry.createPoint(100, 100);
// 返回: Point 对象

`createLineString(coords)`

创建线对象。

参数

coords (Array<Array<number>>): 坐标列表，每个元素是长度为 2 的数组，分别表示 x 和 y 坐标。

返回值

LineString: 线对象。

示例

const coords = [[100, 100], [200, 200]];
const line = JtsGeometry.createLineString(coords);
// 返回: LineString 对象

`createPolygon(coordinates)`

创建多边形对象。

参数

coordinates (Array<{x: number, y: number}>): 多边形的坐标对象数组，需闭合（起点和终点相同）。

返回值

Polygon: 多边形对象。

示例

const coordinates = [{x: 100, y: 100}, {x: 200, y: 100}, {x: 200, y: 200}, {x: 100, y: 200}, {x: 100, y: 100}];
const polygon = JtsGeometry.createPolygon(coordinates);
// 返回: Polygon 对象

`isIntersects(geom1, geom2)`

判断两个几何对象是否相交。

参数

geom1 (Geometry): 第一个几何对象。
geom2 (Geometry): 第二个几何对象。

返回值

boolean: 如果相交返回 true，否则返回 false。

示例

const geom1 = JtsGeometry.createPolygon([...]);
const geom2 = JtsGeometry.createPolygon([...]);
const intersects = JtsGeometry.isIntersects(geom1, geom2);
// 返回: true 或 false

`isContains(container, contained)`

判断一个几何对象是否包含另一个几何对象。

参数

container (Geometry): 包含者几何对象。
contained (Geometry): 被包含者几何对象。

返回值

boolean: 如果包含返回 true，否则返回 false。

示例

const container = JtsGeometry.createPolygon([...]);
const contained = JtsGeometry.createPoint(150, 150);
const contains = JtsGeometry.isContains(container, contained);
// 返回: true 或 false

`intersection(geom1, geom2)`

计算两个几何对象的交集。

参数

geom1 (Geometry): 第一个几何对象。
geom2 (Geometry): 第二个几何对象。

返回值

Geometry: 交集的几何对象。

示例

const geom1 = JtsGeometry.createPolygon([...]);
const geom2 = JtsGeometry.createPolygon([...]);
const intersection = JtsGeometry.intersection(geom1, geom2);
// 返回: Geometry 对象

`intersectionArea(geom1, geom2)`

计算两个几何对象的交集面积。

参数

geom1 (Geometry): 第一个几何对象。
geom2 (Geometry): 第二个几何对象。

返回值

number: 交集的面积。

示例

const geom1 = JtsGeometry.createPolygon([...]);
const geom2 = JtsGeometry.createPolygon([...]);
const area = JtsGeometry.intersectionArea(geom1, geom2);
// 返回: 面积值

`union(geom1, geom2)`

计算两个几何对象的并集。

参数

geom1 (Geometry): 第一个几何对象。
geom2 (Geometry): 第二个几何对象。

返回值

Geometry: 并集的几何对象。

示例

const geom1 = JtsGeometry.createPolygon([...]);
const geom2 = JtsGeometry.createPolygon([...]);
const union = JtsGeometry.union(geom1, geom2);
// 返回: Geometry 对象

`buffer(geometry, distance)`

计算几何对象的缓冲区。

参数

geometry (Geometry): 几何对象。
distance (number): 缓冲区距离。

返回值

Geometry: 缓冲区的几何对象。

示例

const geometry = JtsGeometry.createPoint(100, 100);
const buffer = JtsGeometry.buffer(geometry, 10);
// 返回: Geometry 对象

`distance(geom1, geom2)`

计算两个几何对象之间的距离。

参数

geom1 (Geometry): 第一个几何对象。
geom2 (Geometry): 第二个几何对象。

返回值

number: 两个几何对象之间的距离。

示例

const geom1 = JtsGeometry.createPoint(100, 100);
const geom2 = JtsGeometry.createPoint(200, 200);
const distance = JtsGeometry.distance(geom1, geom2);
// 返回: 距离值

`isPointOnLine(lineString, point)`

判断点是否在线上。

参数

lineString (LineString): 线对象。
point (Point): 点对象。

返回值

boolean: 如果点在线上返回 true，否则返回 false。

示例

const line = JtsGeometry.createLineString([[100, 100], [200, 200]]);
const point = JtsGeometry.createPoint(150, 150);
const isOnLine = JtsGeometry.isPointOnLine(line, point);
// 返回: true 或 false

`toText(geometry)`

将几何对象转换为 WKT 字符串。

参数

geometry (Geometry): 几何对象。

返回值

string: WKT 格式的字符串。

示例

const geometry = JtsGeometry.createPoint(100, 100);
const wkt = JtsGeometry.toText(geometry);
// 返回: "POINT (100 100)"

`drawBox(imageSource, boxes)`

在图像上绘制多边形，使用默认样式。

参数

imageSource (string)：图像来源，可以是 URL（以 http:// 或 https:// 开头）或 Base64 编码字符串（包含或不包含 data:image/...;base64, 前缀）。
boxes (Array<Array<{x: number, y: number}>>)：多边形数组，每个多边形是一个包含 x 和 y 属性的坐标对象数组。

返回值

string | null：结果图像的 Base64 编码字符串（不包含 data:image/jpeg;base64, 前缀），如果图像无法处理则返回 null。

默认样式

边框颜色：RGB(255, 245, 51)
边框宽度：2 像素
填充颜色：RGBA(255, 245, 158, 0.5)
标签文字颜色：黑色
标签背景颜色：RGB(255, 177, 177)
标签填充颜色：RGB(255, 216, 216)
标签字体大小：12px

示例

const imageSource = "data:image/jpeg;base64,...";
const boxes = [
  [{x: 100, y: 100}, {x: 200, y: 100}, {x: 200, y: 200}, {x: 100, y: 200}]
];
const result = JtsGeometry.drawBox(imageSource, boxes);

`drawBox(imageSource, boxes, globalLabel, labels)`

在图像上绘制多边形，可选择添加全局标签和每个多边形的标签，使用默认样式。

参数

imageSource (string)：图像来源，可以是 URL 或 Base64 编码字符串。
boxes (Array<Array<{x: number, y: number}>>)：多边形数组，每个多边形是一个坐标对象数组。
globalLabel (string | null)：显示在图像左上角的全局标签。如果为 null 或空，则不绘制全局标签。
labels (Array<string> | null)：每个多边形对应的标签数组。如果为 null 或长度小于 boxes，缺失的标签视为 null。

返回值

string | null：结果图像的 Base64 编码字符串，如果图像无法处理则返回 null。

默认样式

与 drawBox(imageSource, boxes) 方法相同。

示例

const imageSource = "https://example.com/image.jpg";
const boxes = [
  [{x: 100, y: 100}, {x: 200, y: 100}, {x: 200, y: 200}, {x: 100, y: 200}]
];
const globalLabel = "全局标签";
const labels = ["多边形 1"];
const result = JtsGeometry.drawBox(imageSource, boxes, globalLabel, labels);

`drawBox(imageSource, boxes, lineColor, lineWidth, fillColor, globalLabel, labels, labelColor, labelBgColor, labelFillColor, labelFontSize)`

在图像上绘制多边形，支持完全自定义的样式、标签和全局文本。

参数

imageSource (string)：图像来源，可以是 URL 或 Base64 编码字符串。
boxes (Array<Array<{x: number, y: number}>>)：多边形数组，每个多边形是一个坐标对象数组。
lineColor (string | Object)：多边形边框颜色。可以是十六进制字符串（例如 "#FFFF33"）或 RGB/A 对象（例如 {r: 255, g: 245, b: 51} 或 {r: 255, g: 245, b: 51, a: 1.0}）。
lineWidth (number)：多边形边框宽度（像素）。
fillColor (string | Object)：多边形填充颜色。可以是十六进制字符串或 RGB/A 对象。
globalLabel (string | null)：显示在图像左上角的全局标签。如果为 null 或空，则不绘制全局标签。
labels (Array<string> | null)：每个多边形对应的标签数组。如果为 null 或长度小于 boxes，缺失的标签视为 null。
labelColor (string | Object)：标签文字颜色。可以是十六进制字符串或 RGB/A 对象。
labelBgColor (string | Object)：标签背景颜色。可以是十六进制字符串或 RGB/A 对象。
labelFillColor (string | Object)：标签背景边框颜色。可以是十六进制字符串或 RGB/A 对象。
labelFontSize (number)：标签字体大小（像素）。

返回值

string | null：结果图像的 Base64 编码字符串，如果图像无法处理则返回 null。

注意事项

多边形绘制包含填充内部和边框。每个顶点用白色填充圆圈（半径 4px）标记，圆圈边框与 lineColor 一致。
标签在每个多边形的第一个坐标处绘制，带有圆角矩形背景（圆角半径 8px）和内边距（水平 8px，垂直 2px）。
如果第一个坐标靠近图像边缘（10px 以内），标签会调整以保持在图像范围内。
全局标签在图像左上角绘制，带有圆角矩形背景，字体大小为 labelFontSize 的四倍。
启用抗锯齿以改善多边形和圆圈的渲染平滑度。
使用的字体为 "Microsoft YaHei"，加粗样式。

示例

const imageSource = "data:image/jpeg;base64,...";
const boxes = [
  [{x: 100, y: 100}, {x: 200, y: 100}, {x: 200, y: 200}, {x: 100, y: 200}]
];
const lineColor = "#FFFF33";
const lineWidth = 3;
const fillColor = {r: 255, g: 245, b: 158, a: 0.5};
const globalLabel = "全局标签";
const labels = ["多边形 1"];
const labelColor = "#000000";
const labelBgColor = "#FFB1B1";
const labelFillColor = "#FFD8D8";
const labelFontSize = 14;
const result = JtsGeometry.drawBox(
  imageSource,
  boxes,
  lineColor,
  lineWidth,
  fillColor,
  globalLabel,
  labels,
  labelColor,
  labelBgColor,
  labelFillColor,
  labelFontSize
);

`parseColor(colorStr)`

将颜色字符串解析为颜色对象。

参数

colorStr (string)：十六进制格式的颜色字符串（例如 "#FF0000" 或 "0xFF0000"）。

返回值

Object | null：包含 r、g、b（可选 a）属性的对象，如果颜色字符串无效则返回 null。

示例

const color = JtsGeometry.parseColor("#FF0000");
// 返回: {r: 255, g: 0, b: 0}

`parseColor(r, g, b)`

从 RGB 值创建颜色对象。

参数

r (number)：红色分量 (0-255)。
g (number)：绿色分量 (0-255)。
b (number)：蓝色分量 (0-255)。

返回值

Object：包含 r、g、b 属性的对象。

示例

const color = JtsGeometry.parseColor(255, 0, 0);
// 返回: {r: 255, g: 0, b: 0}

`parseColor(r, g, b, a)`

从 RGBA 值创建颜色对象。

参数

r (number)：红色分量 (0-255)。
g (number)：绿色分量 (0-255)。
b (number)：蓝色分量 (0-255)。
a (number)：透明度分量 (0.0-1.0)。

返回值

Object：包含 r、g、b 和 a 属性的对象。

示例

const color = JtsGeometry.parseColor(255, 245, 158, 0.5);
// 返回: {r: 255, g: 245, b: 158, a: 0.5}

作者：北京-产品-yantings 创建时间：2026-07-01 09:56
最后编辑：北京-产品-yantings 更新时间：2026-07-07 18:14

上一篇： MockXMLHttpRequest类
下一篇：

JtsGeometry类

JtsGeometry 接口文档

方法

createCoordinates(coords)

参数

返回值

注意事项

示例

normalizeCoordinates(coordinates, width, height)

参数

返回值

示例

denormalizeCoordinates(coordinates, width, height)

参数

返回值

示例

createCoordinatesXYXY(coords)

参数

返回值

示例

createCoordinatesXYWH(coords)

参数

返回值

示例

toCoordinatesByArray(coords)

参数

返回值

示例

toCoordinates(coords)

参数

返回值

示例

pixelToGeoCoordinates(pixelCoordinates, pixelOrigin, geoOrigin, geoDistancePerPixelX, geoDistancePerPixelY)

参数

返回值

示例

pixelToGeoCoordinatesByScale(pixelCoordinates, pixelOrigin, geoOrigin, scale)

参数

返回值

示例

createPoint(x, y)

参数

返回值

示例

createLineString(coords)

参数

返回值

示例

createPolygon(coordinates)

参数

返回值

示例

isIntersects(geom1, geom2)

参数

返回值

示例

isContains(container, contained)

参数

返回值

示例

intersection(geom1, geom2)

参数

返回值

示例

intersectionArea(geom1, geom2)

参数

返回值

示例

union(geom1, geom2)

参数

返回值

示例

buffer(geometry, distance)

参数

返回值

示例

distance(geom1, geom2)

参数

返回值

示例

`createCoordinates(coords)`

`normalizeCoordinates(coordinates, width, height)`

`denormalizeCoordinates(coordinates, width, height)`

`createCoordinatesXYXY(coords)`

`createCoordinatesXYWH(coords)`

`toCoordinatesByArray(coords)`

`toCoordinates(coords)`

`pixelToGeoCoordinates(pixelCoordinates, pixelOrigin, geoOrigin, geoDistancePerPixelX, geoDistancePerPixelY)`

`pixelToGeoCoordinatesByScale(pixelCoordinates, pixelOrigin, geoOrigin, scale)`

`createPoint(x, y)`

`createLineString(coords)`

`createPolygon(coordinates)`

`isIntersects(geom1, geom2)`

`isContains(container, contained)`

`intersection(geom1, geom2)`

`intersectionArea(geom1, geom2)`

`union(geom1, geom2)`

`buffer(geometry, distance)`

`distance(geom1, geom2)`

`isPointOnLine(lineString, point)`

`toText(geometry)`

`drawBox(imageSource, boxes)`

`drawBox(imageSource, boxes, globalLabel, labels)`

`drawBox(imageSource, boxes, lineColor, lineWidth, fillColor, globalLabel, labels, labelColor, labelBgColor, labelFillColor, labelFontSize)`

`parseColor(colorStr)`

`parseColor(r, g, b)`

`parseColor(r, g, b, a)`