JavaScript 空间分析库——JSTS和Turf

本文介绍了JSTS和Turf.js两个JavaScript空间分析库。JSTS用于空间位置判定,符合OGC规范,支持WKT、GeoJSON等格式。Turf.js由Mapbox提供,实现缓冲区生成、等高线计算等功能,支持GeoJSON数据,适用于浏览器及服务器端。

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

前言


项目中有管线的空间拓扑关系查询需求,在npm中检索到JSTS和Turf两个JavaScript 空间分析库。

JSTS


       JSTS是一个符合OGC规范的简单要素空间位置判定函数JavaScript库,JSTS也是Java类库JTS的一个接口,且与OpenLayer3具有互操作性。
       目前原生的OpenLayers3并不支持空间拓扑关系查询,此类库可以作为重要的补充。通过此类库,可以判断多种空间几何的位置关系,最初建立这个工程的目的是为web地图应用提供一套完整的类库来处理和分析简单几何体,但jsts也可以作为一个独立的几何库。
       JSTS是利用原JTS java源码通过AST AST自动翻译转换而成并保持了该API,除了对IO相关的部分类进行了选择性的并手动移植使其支持WKT,GeoJSON和OpenLayers 3。

Turf.js


       Turf.js:JavaScript 空间分析库,由Mapbox 提供,Turf 实现了常用的空间分析操作,例如生成缓冲区、计算等高线,建立 TIN 等等。以往只属于桌面 GIS 的分析功能,已经可以在浏览器中使用。
Turf 使用 JavaScript 编写,通过 npm 进行包管理。良好的模块化设计使得 Turf 不仅可用于浏览器端,还可以通过 Node.js 在服务器端使用。
       Turf 原生支持 GeoJSON 矢量数据。GeoJSON 的优点是结构简单,并且得到了所有网页地图API的支持;但 GeoJSON 不支持空间索引,这个缺点可能会限制 Turf 处理大型文件的能力效率。
       Turf 可以非方便地集成到 Leaflet.js 地图控件中,Mapbox 也为其提供了相应的 Mapbox.js 插件。

​英文介绍:


JSTS is an ECMAScript library of spatial predicates and functions for processing geometry conforming to the Simple Features Specification for SQL published by the Open Geospatial Consortium. JSTS is also a port of the well established Java library JTS.

The primary goal of the project is to provide web mapping applications with a complete library for processing and analyzing simple geometries but JSTS can also be used as a free standing geometry library.

JSTS was made using automatic translation of the original JTS Java source via AST to AST transformation preserving the JTS API, except for the I/O related classes which has been selectively and manually ported with support for WKT, GeoJSON and OpenLayers.


Turf is a JavaScript library for spatial analysis. It includes traditional spatial operations, helper functions for creating GeoJSON data, and data classification and statistics tools. Turf can be added to your website as a client-side plugin, or you can run Turf server-side with Node.js


参考链接:


npm: https://www.npmjs.com/search?q=%20processing%20geometry

JSTS: https://www.npmjs.com/package/jsts

Turf: http://turfjs.org/

JSTS学习(一) - 简介

https://bjornharrtell.github.io/jsts/

https://github.com/bjornharrtell/jsts

http://locationtech.github.io/jts/javadoc/

https://github.com/Turfjs/turf

示例:

https://openlayers.org/en/latest/examples/turf.html

 

### Vue 中封装天地图组件 #### 创建 `useLeafletMap` Hook 为了实现对 Leaflet 地图的功能扩展,在 Vue 项目中创建了一个名为 `useLeafletMap.js` 的 hook 文件。此文件提供了设置地图缩放级别的方法: ```javascript // useLeafletMap.js import { ref, onMounted } from 'vue'; import L from 'leaflet'; export function useLeafletMap() { const mapRef = ref(null); const setZoomLevels = (minLevel, maxLevel) => { if (!mapRef.value) return; mapRef.value.setMinZoom(minLevel); mapRef.value.setMaxZoom(maxLevel); }; onMounted(() => { // 初始化地图实例并挂载到DOM节点上 mapRef.value = L.map('map').setView([39.9042, 116.4074], 13); // 默认北京坐标 }); return { mapRef, setZoomLevels }; } ``` 该函数允许开发者通过调用 `setZoomLevels(12, 18)` 来限定地图展示的最大最小比例尺[^1]。 #### 构建 `useTdtMap` Hook 针对特定的地图服务提供商——天地图(Tianditu),还开发了另一个辅助工具 `useTdtMap.js`,用于处理与 Tianditu API 相关的操作,比如向地图添加标记或其他类型的覆盖物: ```javascript // useTdtMap.js import { inject } from 'vue'; import L from 'leaflet'; import TDT from '@turf/turf'; // 假设这里引入的是Tianditu官方或适配器 const tdtKey = Symbol(); export default function provideTdt(key){ provide(tdtKey, key); } export function useTdtMap(){ const apiKey = inject(tdtKey); const addMapOverlay = (overlayElement)=>{ let layer = new TDT.Layer(apiKey).addTo(map); overlayElement.addTo(layer); } return {addMapOverlay}; } ``` 这段代码展示了如何利用依赖注入机制传递密钥,并提供了一种简便的方法来往现有地图层面上增加新的图形元素[^2]。 #### 实现基于 VUE 组件的地图标注功能 对于更复杂的交互需求,则可以通过构建专门的 Vue 组件来进行管理。例如下面这个案例描述了怎样在一个 CesiumJS 支持下的三维地球仪表面上放置多个兴趣点(Point of Interest): ```html <!-- PointLayer.vue --> <template> <div id="cesiumContainer"></div> </template> <script setup lang="ts"> import * as Cesium from 'cesium'; import './Cesium/Widgets/widgets.css' import 'cesium/Build/CesiumUnminified/Cesium' onMounted(()=>{ var viewer = new Cesium.Viewer('cesiumContainer',{ terrainProvider : Cesium.createWorldTerrain() }); props.poiData.forEach(poi=>{ var entity=viewer.entities.add({ position:Cesium.Cartesian3.fromDegrees(Number(poi.lng),Number(poi.lat)), point:{pixelSize:5,color:Cesium.Color.RED}, label:{ text:`${poi.name}`, font:'14px sans-serif', fillColor:Cesium.Color.BLACK, outlineColor:Cesium.Color.WHITE, verticalOrigin:Cesium.VerticalOrigin.BOTTOM } }) }); }) </script> <style scoped> #cesiumContainer{ width:100%; height:calc(100vh - 1rem); } </style> ``` 上述例子不仅实现了基本的位置渲染逻辑,同时也考虑到了样式定制化的需求,确保最终呈现出来的界面既美观又实用[^3]。 #### 自定义地图容器样式 最后值得注意的一点是,除了核心的地图绘制外,还可以借助 CSS 对地图承载区域进行美化调整,从而更好地融入整个应用的设计风格之中。如下所示即为一段简单的样式声明片段,它能够有效控制地图窗口的实际大小以及边距等属性[^4]: ```css /* Map Container Style */ #map-container { width: 100%; height: 400px; /* 可根据实际页面布局灵活设定 */ border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, .1); } ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值