@maptec/maptec-spatial
v0.2.0
Published
Maptec geometry library for spatial relationships
Maintainers
Readme
@maptec/maptec-spatial
Maptec 几何空间关系库。用于判断点、线、面之间的空间关系,多数方法返回 boolean。
本库负责计算;地图展示与高亮请使用 @maptec/maptec-js。
安装
npm install @maptec/maptec-spatial或:
pnpm add @maptec/maptec-spatial在项目中使用(推荐:打包工具)
import {GeoUtils} from '@maptec/maptec-spatial';
const point = {type: 'Point', coordinates: [103.86, 1.32]};
const polygon = {
type: 'Polygon',
coordinates: [[
[103.84, 1.30],
[103.88, 1.30],
[103.88, 1.34],
[103.84, 1.34],
[103.84, 1.30],
]],
};
const isInPolygon = GeoUtils.pointInPolygon(point, polygon);
console.log(isInPolygon);
const route = {
type: 'LineString',
coordinates: [[103.82, 1.31], [103.90, 1.33]],
};
const doesRouteEnterZone = GeoUtils.intersects(route, polygon);
console.log(doesRouteEnterZone);也可直接传入 Maptec 覆盖物(需实现 toGeoJSON())或 Marker:
const isIntersecting = GeoUtils.intersects(polygonOverlayA, polygonOverlayB);
console.log(isIntersecting);
const isMarkerInFence = GeoUtils.pointInPolygon(marker, fencePolygonOverlay);
console.log(isMarkerInFence);通过 CDN 引入(UMD,全局变量 MaptecSpatial)
unpkg
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Maptec Spatial CDN Demo</title>
</head>
<body>
<script src="https://unpkg.com/@maptec/maptec-spatial/dist/MaptecSpatial.js"></script>
<script>
const point = {type: 'Point', coordinates: [103.86, 1.32]};
const polygon = {
type: 'Polygon',
coordinates: [[
[103.84, 1.30],
[103.88, 1.30],
[103.88, 1.34],
[103.84, 1.34],
[103.84, 1.30],
]],
};
const isInPolygon = MaptecSpatial.GeoUtils.pointInPolygon(point, polygon);
console.log(isInPolygon);
</script>
</body>
</html>jsDelivr
<script src="https://cdn.jsdelivr.net/npm/@maptec/maptec-spatial/dist/MaptecSpatial.js"></script>
<script>
const isInPolygon = MaptecSpatial.GeoUtils.pointInPolygon(point, polygon);
console.log(isInPolygon);
</script>常用地址:
| 用途 | unpkg | jsDelivr |
|---|---|---|
| UMD 主包 | https://unpkg.com/@maptec/maptec-spatial/dist/MaptecSpatial.js | https://cdn.jsdelivr.net/npm/@maptec/maptec-spatial/dist/MaptecSpatial.js |
| ESM | https://unpkg.com/@maptec/maptec-spatial/dist/MaptecSpatial.esm.js | https://cdn.jsdelivr.net/npm/@maptec/maptec-spatial/dist/MaptecSpatial.esm.js |
锁定版本示例(推荐生产环境):
<script src="https://cdn.jsdelivr.net/npm/@maptec/[email protected]/dist/MaptecSpatial.js"></script>常用方法
| 方法 | 含义 |
|---|---|
| intersects / disjoint | 相交 / 相离 |
| touches / crosses / overlaps | 接触 / 穿越 / 重叠 |
| contains / within | 严格包含 / 严格位于内部(不含边界) |
| covers / coveredBy | 覆盖(含边界) |
| equals | 拓扑相等 |
| pointInPolygon / pointOnLine | 点在面 / 点在线 |
| filterByRelation | 一对多筛选 |
| findRelatedByRelation | 多源各自关联目标集合 |
按几何组合查阅
| 组合 | 推荐方法 |
|---|---|
| 点 × 面 | pointInPolygon / covers(含边界);严格内部用 within / contains |
| 点 × 线 | pointOnLine(可带米级容差) |
| 线 × 面 | intersects / within / crosses |
| 线 × 线 | intersects / crosses / touches |
| 面 × 面 | intersects / overlaps / contains |
常见问题
- 浏览器里怎么拿到对象?:CDN / UMD 会暴露全局
MaptecSpatial;打包工具使用import {GeoUtils} from '@maptec/maptec-spatial'。 - 和 Maptec 地图库什么关系?:本库只做几何关系计算,不负责渲染;展示与高亮请配合
@maptec/maptec-js。
License
BSD-3-Clause,详见 LICENSE。
开发
npm install
npm test
npm run build产物:
dist/MaptecSpatial.js— 浏览器 UMD(全局MaptecSpatial)dist/MaptecSpatial.esm.js— ESMdist/MaptecSpatial.cjs— CommonJSdist/types/— 类型声明
示例:
npm run demo:prepare然后用 Live Server 打开(本仓库端口 5504):
demo/SpatialRelationsBasic.html— 按「点×面 / 点×线 / 线×面 / 线×线 / 面×面」分类演示demo/SpatialRelationsBatch.html— 点×面批量筛选
Maptec 资源会同步到 demo/lib/。
API 文档
npm run docs # 生成到 docs/api/
npm run docs:serve # 生成并在 http://localhost:8000 打开