Vue使用jsts，将wkt转为geojson

eggcode

已于 2025-03-10 11:15:09 修改

阅读量508

点赞数 3

分类专栏：前端文章标签： jsts vue

于 2025-03-09 23:07:27 首次发布

本文链接：https://blog.csdn.net/liqian_ken/article/details/146140655

版权

前端专栏收录该内容

8 篇文章

订阅专栏

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>