JavaScript大前端java
WKT 转 GeoJSON 技巧与 Leaflet 加载应用实战
WKT 与 GeoJSON 是 WebGIS 核心数据格式。提供三种转换方案：PostGIS 数据库函数、Java GeoTools 后端库及前端 wellknown.js 组件。结合 Leaflet 地图库演示 GeoJSON 加载与渲染流程。涵盖前后端不同场景下的实现逻辑与代码示例，解决 WebGIS 开发中的数据兼容问题。
WKT 与 GeoJSON 是 WebGIS 核心数据格式。提供三种转换方案：PostGIS 数据库函数、Java GeoTools 后端库及前端 wellknown.js 组件。结合 Leaflet 地图库演示 GeoJSON 加载与渲染流程。涵盖前后端不同场景下的实现逻辑与代码示例，解决 WebGIS 开发中的数据兼容问题。
本节以 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 组件。在工程项目中首先要引入 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(String[] args) {
String wkt = "POLYGON ((0 0, 0 1, 1 1, 1 0, 0 0))";
String geoJson = 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。
在 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 方法的转换，从而实现空间属性的展示。如果在完全没有后端的前提下，可以采用这种方式来进行转换。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 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