JavaScript大前端java
WebGIS 开发中 WKT 转 GeoJSON 的技巧与 Leaflet 加载应用
WebGIS 开发中 WKT 转 GeoJSON 的多种实现方案，涵盖基于 PostGIS 数据库函数、Java GeoTools 库的后端转换方法，以及纯前端的 wellknown.js 组件方案。详细阐述各方法的原理与代码示例，结合 Leaflet 地图库演示如何将转换后的 GeoJSON 数据加载至地图进行渲染和交互，提供从后端处理到前端可视化的完整技术路径。
WebGIS 开发中 WKT 转 GeoJSON 的多种实现方案，涵盖基于 PostGIS 数据库函数、Java GeoTools 库的后端转换方法，以及纯前端的 wellknown.js 组件方案。详细阐述各方法的原理与代码示例，结合 Leaflet 地图库演示如何将转换后的 GeoJSON 数据加载至地图进行渲染和交互，提供从后端处理到前端可视化的完整技术路径。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
在 WebGIS 开发过程中，数据格式的转换与兼容始终是一个关键挑战。WKT（Well-Known Text）和 GeoJSON 作为两种常见的地理空间数据格式，它们之间的转换是开发者经常需要面对的问题。WKT 是一种简单易读的文本格式，广泛用于地理数据的存储与交换；而 GeoJSON 则以其简洁的 JSON 结构，完美契合了 Web 开发的需求，便于与各种前端框架和库进行集成。
本文将深入探讨将 WKT 数据转换为 GeoJSON 格式的方法，并结合 Leaflet 这一开源 JavaScript 地图库，解析如何将转换后的 GeoJSON 数据加载到地图中，实现地图的绘制、图层管理及交互功能开发。
本节以 PostGIS 空间数据库和 Java 后台为例，介绍如何基于空间数据库和 GeoTools 库实现 WKT 转为 GeoJSON。
如果开发数据库中有空间数据库，可以直接利用空间数据的空间函数来进行处理。使用以下 SQL 语句可以查询空间属性的 WKT 格式：
SELECT ST_AsEWKT(geom) FROM biz_ceic_earthquake LIMIT 10;
如果要实现对应的 WKT 转为 GeoJSON，只需要使用 ST_AsGeoJSON 函数即可完成转换。示例 SQL 查询语句如下：
SELECT ST_AsEWKT(geom), ST_AsGeoJSON(geom) FROM biz_ceic_earthquake LIMIT 10;
在返回的结果集中可以看到 GeoJSON 类型的数据。有了这个 SQL 语句之后，就可以在 Java 中结合 SQL 查询将结果返回给前端。这个方案的本质还是直接利用了空间数据库的空间查询能力。
这里介绍完全基于 GeoTools 的纯后台转换逻辑。在工程项目中首先要引入 GeoTools 组件，在 Pom.xml 中首先引入以下依赖：
<dependency>
<groupId>org.geotools</groupId>
<artifactId>gt-geojson</artifactId>
<version>28.2</version>
</dependency>
<dependency>
<groupId>org.locationtech.jts</groupId>
<artifactId>jts-core</artifactId>
<version>1.19.0</version>
</dependency>
引入相应的资源后，接下来就可以使用 GeoTools 来实现把 WKT 字符串转为 GeoJSON。核心转换代码如下：
package com.yelang.project.geotools.wkt2json;
import org.geotools.geojson.geom.GeometryJSON;
import org.geotools.geometry.jts.JTSFactoryFinder;
import org.locationtech.jts.geom.Geometry;
import org.locationtech.jts.geom.GeometryFactory;
import org.locationtech.jts.io.WKTReader;
import java.io.StringWriter;
public class WKTToGeoJSON {
public static String wktToJson(String wkt) {
String json = null;
try {
GeometryFactory geometryFactory = JTSFactoryFinder.getGeometryFactory(null);
WKTReader reader = new WKTReader(geometryFactory);
Geometry geometry = reader.read(wkt);
GeometryJSON geometryJson = new GeometryJSON();
StringWriter writer = new StringWriter();
geometryJson.write(geometry, writer);
json = writer.toString();
} catch (Exception e) {
e.printStackTrace();
}
return json;
}
public static void main {
;
wktToJson(wkt);
System.out.println(geoJson);
}
}
这里主要使用 WKTReader 读取 WKT 的字符串，然后转为 Geometry，最后通过 GeometryJSON 进行 GeoJSON 格式化，从而实现从 WKT 到 GeoJSON 的转换。
如果在开发 WebGIS 应用时，第三方接口返回给了一个 WKT 字符串，而我们没有对应的后台支撑，此时又该怎么办呢？如果我们只有前端，那么应该如何集成对应的 WKT，从而达到页面的渲染展示。本节重点讲解如何基于纯前端 wellknown.js 组件进行 WKT 到 GeoJSON 的转换，并提供加载的功能。
不论是使用 Leaflet 还是 OpenLayers 或者 Cesium 来进行 WebGIS 开发，如果遇到 WKT，还真不是一下子就能介入的，而 GeoJSON 是一种比较通用的格式，因此急需一款可以直接将 WKT 转为 GeoJSON 的工具。这里介绍 wellknown.js 这款组件，是大名鼎鼎的 Mapbox 开源的一个成熟组件，开源地址如下：wellknown。
该组件支持将 Well-Known Text 解析并序列化为 GeoJSON，支持 Point、MultiPoint、LineString、MultiLineString、Polygon、MultiPolygon、GeometryCollection 等 2D、3D、4D 几何体。
这款插件很迷你，核心方法就是实现两种格式的转换。对外提供的两个核心函数就是实现从 WKT 到 GeoJSON 的转换和互转。
parse(wkt): Given WKT as a string, return a GeoJSON geometry object or null if parse fails.stringify(geojson): Given a GeoJSON geometry object or Feature object, return a WKT representation as a string.请熟练这两个方法，尤其是第一个方法，将是我们实现 WKT 转为 GeoJSON 的基础。
本节将详细讲解如何在 Leaflet 中集成 wellknown.js。当然大家可以根据自己的需要和熟练程度，选择自己熟悉的二三维引擎来进行 WebGIS 应用的开发。
在 Leaflet.js 页面中引入 wellknown.js 的方法很简单，最简单的方式就是直接使用 <script> 标签的方式直接引入即可。核心代码如下：
<script src="/pcwater/static/js/wellknown.js"></script>
引入资源以后，接下来就可以调用提供的 API 实现将 WKT 转为 GeoJSON，代码也非常的简洁，如下所示：
var myStyle = {color:"red",weight:5,"opacity":1, "fillOpacity": 0};
const geojson = wellknown.parse(_tempPolyline);
var areaLayer = L.geoJSON(geojson,{style:myStyle}).addTo(showLayerGroup);
这里指定了一个 GeoJSON 的展示样式，包括颜色、透明度和填充透明度，最后再调用 Leaflet 的 geoJSON 展示方法实现 WKT 方法的转换，从而实现空间属性的展示。如果在完全没有后端的前提下，可以采用这种方式来进行转换。
本文详细介绍了如何在后台基于空间数据库和 GeoTools 组件实现 WKT 转换为 GeoJSON，以及介绍了前端组件 wellknown.js 这种纯前端的解决方案。通过结合 Leaflet 地图库，实现了将转换后的 GeoJSON 数据加载到地图中进行渲染和交互。这些技巧为 WebGIS 开发中的数据格式转换提供了多种可行的技术路径。