当前位置：首页 > news >正文

Vue使用jsts，将wkt转为geojson

news 2025/5/14 17:46:25

jsts库相关官方资料：

JSTS是一个ECMAScript空间谓词和函数库，用于处理符合开放地理空间联盟发布的SQL简单特征规范的几何图形。JSTS也是成熟的Java库JTS的移植。

npm库的地址：https://www.npmjs.com/package/jsts

Github开源项目地址：https://github.com/bjornharrtell/jsts

JTS API：https://locationtech.github.io/jts/javadoc/

示例

创建vue2项目
引入jstsnpm install jsts
在js中引入jsts相关模块

<script>
//import { GeometryFactory, Coordinate } from 'jsts/org/locationtech/jts/geom';
import { WKTReader, GeoJSONWriter } from 'jsts/org/locationtech/jts/io';
export default {mounted(){let wktReader = new WKTReader();let geo = wktReader.read("linestring(0 0,0 10,10 10)");let geoJsonWriter = new GeoJSONWriter();var geojson = geoJsonWriter.write(geo);console.log(geojson);console.log(JSON.stringify(geojson));    }
}
</script>

控制台打印效果：

在这里插入图片描述

一些资料上说可以import jsts from 'jsts';但是试了会报错说找不到jsts模块：Module not found: Error: Can't resolve 'jsts'，所以还是按照路径逐个引入吧。

使用CDN方式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="https://unpkg.com/jsts/dist/jsts.min.js"></script></head><body><script>const WKTReader = jsts.io.WKTReader;const GeoJSONWriter = jsts.io.GeoJSONWriter;let wktReader = new WKTReader();let geo = wktReader.read("linestring(0 0,0 10,10 10)");let geoJsonWriter = new GeoJSONWriter();var geojson = geoJsonWriter.write(geo);console.log(geojson);console.log(JSON.stringify(geojson));</script></body>
</html>