WebGIS开发实战:WKT转GeoJSON的多种技巧与Leaflet加载应用详解

WebGIS开发实战:WKT转GeoJSON的多种技巧与Leaflet加载应用详解

目录

前言

一、WKT后台转换实现

1、基于PostGIS实现

2、GeoTools实现

二、wellknown.js转换

1、wellknown.js是什么?

2、wellknown.js的方法

三、在Leaflet.js中集成wellknow.js

1、资源引入

2、将wkt转为geojson

四、总结


前言

        在当今数字化浪潮中,地理信息系统(GIS)技术正以前所未有的速度融入我们的生活与工作。从城市规划到环境监测,从物流配送到旅游出行,地理空间数据的价值日益凸显。而 WebGIS,作为 GIS 技术与 Web 技术的深度融合,更是为地理信息的共享与交互开辟了广阔天地。它让地理数据能够通过网络在各种终端设备上轻松呈现,极大地拓展了 GIS 的应用场景和受众群体。然而,在 WebGIS 开发过程中,数据格式的转换与兼容始终是一个关键挑战。其中,WKT(Well-Known Text)和 GeoJSON 作为两种常见的地理空间数据格式,它们之间的转换更是开发者们经常需要面对的问题。WKT 是一种简单易读的文本格式,广泛用于地理数据的存储与交换,但其在 Web 环境下的可视化和交互性相对较弱;而 GeoJSON 则以其简洁的 JSON 结构,完美契合了 Web 开发的需求,便于与各种前端框架和库进行集成,实现地图的渲染、交互以及地理数据的动态展示。

        那么,如何高效地将 WKT 数据转换为 GeoJSON 格式,以便更好地在 WebGIS 应用中使用呢?这正是本文将深入探讨的核心问题。在 WebGIS 开发实战中,我们有幸接触到了多种 WKT 转 GeoJSON 的方法,从基于开源库的便捷转换,到自定义算法的灵活实现,每一种方法都有其独特的优势和适用场景。这些方法不仅能够帮助我们快速完成数据格式转换,还能在一定程度上优化数据处理流程,提升应用性能。

        在本文中,我们将详细介绍这些 WKT 转 GeoJSON 的技巧,包括它们的原理、实现步骤以及优缺点分析。同时,我们还将结合 Leaflet 这一广受欢迎的开源 JavaScript 地图库,深入解析如何将转换后的 GeoJSON 数据加载到 Leaflet 地图中,实现地图的绘制、图层管理、交互功能开发等一系列实战应用。Leaflet 以其轻量级、高性能、易扩展的特点,在 WebGIS 前端开发领域占据着重要地位。通过 Leaflet 加载 GeoJSON 数据,我们能够轻松构建出功能丰富、交互流畅的地图应用,满足不同用户的需求。

        无论你是 GIS 领域的开发人员,希望提升 WebGIS 应用的数据处理与可视化能力;还是 Web 开发者,想要将地理信息融入你的项目中,本文都将为你提供宝贵的知识和实用的技巧。让我们一起踏上这场 WebGIS 开发实战之旅,解锁 WKT 转 GeoJSON 的奥秘,探索 Leaflet 加载应用的无限可能,共同推动地理信息在 Web 环境下的创新与发展。

一、WKT后台转换实现

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

1、基于PostGIS实现

        如果大家的开发数据库中有空间数据库的话,我们可以直接利用空间数据的空间函数来进行处理,以我们之前介绍过的地震信息数据为例,使用以下SQL语句可以查询空间属性的WKT格式,查询语句如下:

select st_asewkt(geom) from biz_ceic_earthquake limit 10;

        在Navicat执行上述语句后,可以看到如下结果:

        如果要实现对应的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 和 WKTReader GeometryFactory geometryFactory = JTSFactoryFinder.getGeometryFactory(null); WKTReader reader = new WKTReader(geometryFactory); // 解析 WKT 字符串为 Geometry 对象 Geometry geometry = reader.read(wkt); // 创建 GeometryJSON 对象,用于将 Geometry 转换为 GeoJSON GeometryJSON geometryJson = new GeometryJSON(); // 将 Geometry 转换为 GeoJSON 格式的字符串 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))"; //{"type":"Polygon","coordinates":[[[0.0,0.0],[0.0,1],[1,1],[1,0.0],[0.0,0.0]]]} String geoJson = wktToJson(wkt); System.out.println(geoJson); } }

        这里主要使用WKTReader读取WKT的字符串,然后转为Geometry,最后通过GeometryJSON进行GeoJSON格式化,从而实现从WKT到GeoJSON的转换。代码完成后,我们使用程序进行验证,输出如下,说明转换成功:

二、wellknown.js转换

        如果在开发WebGIS应用时,按照约定的标准,第三方接口返回给了一个WKT字符串,而我们没有对应的后台支撑,此时又该怎么办呢?如果我们只有前端,那么应该如何集成对应的WKT,从而达到页面的渲染展示。相信这是很多从事webgis开发的同学会遇到的问题。以此本节重点讲解如何基于纯前端wellkonw.js组件进行Wkt到GeoJSON的转换,并提供加载的功能。

1、wellknown.js是什么?

        不论是使用Leaflet还是openlayers或者Cesium来进行WebGIS开发,如果遇到WKT,还真不是一下子就能介入的,而GeoJSON是一种比较同样的格式,因此急需一款可以直接将Wkt转为GeoJSON的工具。这里介绍wellknow.js这款组件,是大名鼎鼎的Mapbox开源的一个成熟组件,开源地址如下:wellknown/

Parse & stringify Well-Known Text into GeoJSON.

SupportPoint + MultiPointLineString + MultiLineStringPolygon + MultiPolygonGeometryCollection2D, 3D, 4D geometries

        因此这款组件我们完全可以用来解决遇到的问题。

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. Throws an error if given a FeatureCollection or unknown input.

        请熟练这两个方法,尤其是第一个方法,将是我们实现WKT转为GeoJSON的基础。了解了wellknow的基本知识后,下面我们就以Leaflet为例,重点讲解如何进行集成。

三、在Leaflet.js中集成wellknow.js

        本节将详细讲解如何在Leaflet中集成wellknow.js。当然大家可以根据自己的需要和熟练程度,选择自己熟悉的二三维引擎来进行WebGIS应用的开发。

1、资源引入

        在Leaflet.js页面中引入wellknow.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方法的转换,从而实现空间是属性的展示。如果在完全没有后端的前提下,可以采用这种方式来进行转换。

四、总结

        以上就是今天的主要内容,本文详细的介绍了如何在后台基于空间数据库和Geotools组件实现Wkt转换为GeoJSON,也介绍了一个前端组件wellknowjs这种纯前端的解决方案。在本文中,我们将详细介绍这些 WKT 转 GeoJSON 的技巧,包括它们的原理、实现步骤以及优缺点分析。同时,我们还将结合 Leaflet 这一广受欢迎的开源 JavaScript 地图库,深入解析如何将转换后的 GeoJSON 数据加载到 Leaflet 地图中,实现地图的绘制、图层管理、交互功能开发等一系列实战应用。Leaflet 以其轻量级、高性能、易扩展的特点,在 WebGIS 前端开发领域占据着重要地位。通过 Leaflet 加载 GeoJSON 数据,我们能够轻松构建出功能丰富、交互流畅的地图应用,满足不同用户的需求。行文仓促,定有不足之处,欢迎各位朋友在评论区批评指正,不胜感激。

Read more

Flutter 组件 riverpod_signals 的适配 鸿蒙Harmony 实战 - 驾驭双剑合璧状态架构、实现鸿蒙端强依赖注入与细粒度刷新深度融合方案

Flutter 组件 riverpod_signals 的适配 鸿蒙Harmony 实战 - 驾驭双剑合璧状态架构、实现鸿蒙端强依赖注入与细粒度刷新深度融合方案

欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.ZEEKLOG.net Flutter 组件 riverpod_signals 的适配 鸿蒙Harmony 实战 - 驾驭双剑合璧状态架构、实现鸿蒙端强依赖注入与细粒度刷新深度融合方案 前言 在鸿蒙(OpenHarmony)生态的极繁数字化政务底座、大型分布式供应链管理系统以及对架构严密性与交互流畅度有“双重严苛审计要求”的各类企业级应用开发中,“架构的解耦深度与 UI 的响应广度”是衡量软件成熟度的两把关键标尺。面对包含上百个全局服务(Service)与数千个高频局部刷新节点(Widget)的复杂资产体系。如果全量使用 Riverpod 的 Consumer 监听,可能会在大型列表中产生不必要的树扫描开销;而如果仅使用 Signals,又会因为缺乏完善的依赖注入(DI)机制。导致业务逻辑流的组织变得松散且难以维护。 我们需要一种“顶级架构对齐、局部响应闭环”的融合艺术。 riverpod_signals 是一套专注于将

By Ne0inhk
微服务学习笔记(2)——SpringCloud Nacos

微服务学习笔记(2)——SpringCloud Nacos

🔥我的主页:九转苍翎⭐️个人专栏:《Java SE 》《Java集合框架系统精讲》《MySQL高手之路:从基础到高阶 》《计算机网络 》《Java工程师核心能力体系构建》《RabbitMQ理论与实践》天行健,君子以自强不息。 0.前言 * SpringBoot版本:3.2.5 * SpringCloud版本:2023.0.3 * SpringCloud Alibaba版本:2023.0.1.0 * nacos版本:2.2.3(已免费上传至我的资源) * 项目源码:spring-cloud-blog 1.概述 Nacos(Dynamic Naming and Configuration Service)是阿里巴巴开源的一个更易于构建云原生应用的动态服务发现、配置和管理平台。在 Spring Cloud 体系中,

By Ne0inhk
Flutter for OpenHarmony:Flutter 三方库 postgrest — 鸿蒙端直接访问 PostgreSQL 数据库的极速连接器

Flutter for OpenHarmony:Flutter 三方库 postgrest — 鸿蒙端直接访问 PostgreSQL 数据库的极速连接器

欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.ZEEKLOG.net 前言 在开发 Flutter for OpenHarmony 应用时,传统的“端-接口-数据库”模式往往显得过于沉重。 如果只是为了实现基础的增删改查,却需要编写大量的后端 API 逻辑、处理复杂的 SQL 拼写以及繁琐的 JSON 打包,这不仅增加了开发成本,也导致系统在面对业务变动时极其脆弱。 postgrest 正是解决这一痛点的利器。它是专门为 PostgREST(一个能将 PostgreSQL 数据库直接转换为 RESTful API 的高性能网关)打造的 Dart 客户端驱动。通过它,开发者可以在鸿蒙端以类似于编写 SQL 的语义,直接完成对云端数据库的高级检索与操作。 今天,我们将深入探讨如何利用该库在鸿蒙平台上实现“零接口开发”的数据交互体验。 一、原理解析 / 概念介绍

By Ne0inhk
Flutter 组件 project_template 适配鸿蒙 HarmonyOS 实战:工程脚手架标准化,构建标准化架构、工业级工程隔离与高性能模块化研发模板

Flutter 组件 project_template 适配鸿蒙 HarmonyOS 实战:工程脚手架标准化,构建标准化架构、工业级工程隔离与高性能模块化研发模板

欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.ZEEKLOG.net Flutter 组件 project_template 适配鸿蒙 HarmonyOS 实战:工程脚手架标准化,构建标准化架构、工业级工程隔离与高性能模块化研发模板 前言 在鸿蒙(OpenHarmony)生态迈向大规模团队协同、涉及多端同步开发及严苛交付标准的背景下,如何实现工程结构的“强约束”与“规范化”,已成为决定项目研发效率与后期维护成本的基石。在鸿蒙设备这类强调分布式部署与多内核适配的环境下,如果应用依然采用杂乱无章、缺乏分层逻辑的“面条式”代码结构,由于由于业务模块的耦合,极易由于由于“工程资产腐化”导致版本迭代时的牵一发而动全身。 我们需要一种能够预定义目录结构、集成核心中间件且符合鸿蒙企业级研发规范的工程模板方案。 project_template 为 Flutter 开发者引入了“架构工程化”范式。它超越了简单的代码片段,提供了一套完整的生产力平衡体系。在适配到鸿蒙 HarmonyOS 流程中,这一组件能够作为鸿蒙大规模研发的“底盘图纸”

By Ne0inhk