跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI 生图工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScript大前端java

WKT 转 GeoJSON 技巧与 Leaflet 加载应用实战

WKT 与 GeoJSON 是 WebGIS 核心数据格式。提供三种转换方案:PostGIS 数据库函数、Java GeoTools 后端库及前端 wellknown.js 组件。结合 Leaflet 地图库演示 GeoJSON 加载与渲染流程。涵盖前后端不同场景下的实现逻辑与代码示例,解决 WebGIS 开发中的数据兼容问题。

黑客帝国发布于 2026/3/15更新于 2026/10/1891 浏览
WKT 转 GeoJSON 技巧与 Leaflet 加载应用实战

WKT 后台转换实现

本节以 PostGIS 空间数据库和 Java 后台为例,介绍如何基于空间数据库和 Geotools 库实现 WKT 转为 GeoJSON。

1、基于 PostGIS 实现

如果开发数据库中有空间数据库,可以直接利用空间数据的空间函数进行处理。使用以下 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 查询将结果返回给前端。此方案本质是直接利用了空间数据库的空间查询能力。

2、GeoTools 实现

这里介绍完全基于 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 的转换。

wellknown.js 转换

如果在开发 WebGIS 应用时,第三方接口返回给了一个 WKT 字符串,而没有对应的后台支撑,此时又该怎么办呢?如果我们只有前端,那么应该如何集成对应的 WKT,从而达到页面的渲染展示。本节重点讲解如何基于纯前端 wellknown.js 组件进行 WKT 到 GeoJSON 的转换,并提供加载的功能。

1、wellknown.js 是什么?

不论是使用 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 几何体。

2、wellknown.js 的方法

这款插件很迷你,核心方法就是实现两种格式的转换。对外提供的两个核心函数就是实现从 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.js 中集成 wellknown.js

本节将详细讲解如何在 Leaflet 中集成 wellknown.js。

1、资源引入

在 Leaflet.js 页面中引入 wellknown.js 的方法很简单,最简单的方式就是直接使用 <script> 的方式直接引入即可。核心代码如下:

<script src="/pcwater/static/js/wellknown.js"></script>

2、将 wkt 转为 geojson

引入资源以后,接下来就可以调用提供的 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 方法的转换,从而实现空间属性的展示。如果在完全没有后端的前提下,可以采用这种方式来进行转换。

目录

  1. WKT 后台转换实现
  2. 1、基于 PostGIS 实现
  3. 2、GeoTools 实现
  4. wellknown.js 转换
  5. 1、wellknown.js 是什么?
  6. 2、wellknown.js 的方法
  7. 在 Leaflet.js 中集成 wellknown.js
  8. 1、资源引入
  9. 2、将 wkt 转为 geojson

更多推荐文章

查看全部
  • NISP 国家信息安全水平考试介绍与证书价值分析
  • 《Agent Runtime 工程化》第三章 最小 Agent Loop
  • OpenClaw 本地部署与远程监控实战指南
  • TinyEngine 低代码实时协作技术详解:原理与实操
  • 排序算法详解:直接插入、希尔与选择排序原理及实现
  • 基于 Go 语言构建命令行 AI 对话客户端:从环境部署到核心实现
  • Python 进阶:INI 配置文件读写详解
  • 人工智能与深度学习技术发展趋势及核心原理详解
  • NWPU VHR-10 遥感目标检测与 YOLO 实践
  • Stable Diffusion v1.5 中文提示词避坑指南:翻译策略与参数调优
  • Flutter Web 跨域(CORS)问题本地调试解决方案
  • Electron 架构解析:突破浏览器沙盒实现桌面应用开发
  • Java 数据结构实战:二叉树与哈希表详解
  • 利用 OpenVINO 部署 Qwen2.5 模型实战指南
  • Spring 2.5 Web 层注解配置详解
  • Windows 下 OpenClaw 开源 AI 代理框架部署指南
  • Photoshop 集成 Stable Diffusion 插件实战指南
  • 无需第三方工具直接下载 macOS 官方镜像指南
  • VS Code Copilot 深度使用指南:从安装到高级配置
  • SD3 Medium 上手:照片级出图与 ComfyUI 快速体验

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online