如何在JavaScript中实现GEOMETRY点到经纬度（latlng）的便捷转换？

问题梳理 #

先提个小细节：你写的UpdateGeometrySRID语句里，如果要转成WGS84（全球通用的经纬度坐标系），SRID应该是4326，而不是3857（3857是Web墨卡托坐标系），这点先纠正下，避免后续坐标系混乱~

回到你的核心问题：从PostGIS拿到的GEOMETRY类型数据没法直接给Leaflet的L.circleMarker()用，想要在JS里实现类似ST_AsText()的转换，完全可行，而且有好几种简便方法：

方法1：从SQL层面直接输出可直接用的数据（最推荐） #

与其在JS里折腾转换，不如在查询PostGIS的时候就把数据处理成Leaflet能直接用的格式，效率更高：

方式A：直接提取经纬度值

用PostGIS的ST_X()和ST_Y()函数直接取出点的坐标，同时记得把坐标系转成4326（Leaflet默认用这个）：

SELECT 
  name,
  -- 注意ST_Y是纬度，ST_X是经度，先转坐标系再提取
  ST_Y(ST_Transform(location, 4326)) AS lat,
  ST_X(ST_Transform(location, 4326)) AS lng,
  radius
FROM waypoint;

拿到数据后，在JS里直接这样用：

// 假设从接口拿到的数据是{lat: 153.0, lng: -27.0, radius:50}
const latlng = L.latLng(data.lat, data.lng);
// 注意：L.circleMarker的第二个参数是配置对象，radius要放里面！
WPcircle = L.circleMarker(latlng, { radius: data.radius }).addTo(mymap);

方式B：转成GeoJSON格式

用ST_AsGeoJSON()把Geometry转成标准GeoJSON字符串，JS里解析后直接用：

SELECT 
  name,
  ST_AsGeoJSON(ST_Transform(location, 4326)) AS location_geojson,
  radius
FROM waypoint;

JS里的处理代码：

// 解析GeoJSON字符串
const geoJsonPoint = JSON.parse(data.location_geojson);
// GeoJSON的坐标顺序是[经度, 纬度]，所以要反过来传给L.latLng
const latlng = L.latLng(geoJsonPoint.coordinates[1], geoJsonPoint.coordinates[0]);
WPcircle = L.circleMarker(latlng, { radius: data.radius }).addTo(mymap);

方法2：在JavaScript中直接解析WKT/WKB格式 #

如果你的接口返回的是WKT（比如POINT(-27.0 153.0)）或者WKB格式的Geometry，也可以在JS里处理：

解析WKT（自己写简单函数）

WKT格式很规整，自己写个小函数就能解析：

function wktToLatLng(wktStr) {
  // 匹配括号里的坐标部分
  const coordsMatch = wktStr.match(/\((.*?)\)/);
  if (!coordsMatch) throw new Error('Invalid WKT format');
  // 分割经纬度字符串转成数字
  const [lng, lat] = coordsMatch[1].split(' ').map(Number);
  // 返回Leaflet的LatLng对象
  return L.latLng(lat, lng);
}

// 使用示例
const wktLocation = 'POINT(-27.0 153.0)';
const latlng = wktToLatLng(wktLocation);
WPcircle = L.circleMarker(latlng, { radius: 50 }).addTo(mymap);

解析WKB（用现成库）

如果是WKB二进制格式，推荐用wkx这个轻量库来解析，安装后直接用：

import wkx from 'wkx';

// 假设接口返回的是WKB的Buffer或者十六进制字符串
const pointGeometry = wkx.Geometry.parse(data.location);
const latlng = L.latLng(pointGeometry.y, pointGeometry.x);
WPcircle = L.circleMarker(latlng, { radius: data.radius }).addTo(mymap);

最后再提个坑 #

你原代码里L.circleMarker(location, radius)的写法是错的！L.circleMarker的第二个参数是配置对象，半径要写成{radius: 你的数值}，这也是你可能报错的原因之一，别忽略这个细节~

内容的提问来源于stack exchange，提问作者PPrime