使用ST_AsSVG将EPSG:4326转EPSG:3857生成匹配谷歌地图的SVG

问题根因 #

1. 你的SQL写法错误导致坐标转换完全未生效：ST_Transform 直接传入几何体字段即可，你用 ST_AsEWKT 将几何体转成了文本类型，PostGIS无法识别文本的原SRID，所以转换没执行，这就是你去掉 ST_Transform 结果完全一致的原因。
2. SVG 多余的旋转变换导致拉伸：你设置了 rotate(90) 会将多边形旋转90度，和viewBox的宽高比叠加后直接产生横向拉伸。

具体修复步骤 #

1. 修正SQL查询 #

去掉多余的类型转换，同时查询多边形的边界用来计算正确的viewBox：

SELECT ST_AsSVG(ST_Transform(geometria, 3857)), 
       ST_XMin(ST_Transform(geometria, 3857)) AS xmin,
       ST_YMin(ST_Transform(geometria, 3857)) AS ymin,
       ST_XMax(ST_Transform(geometria, 3857)) AS xmax,
       ST_YMax(ST_Transform(geometria, 3857)) AS ymax
FROM public.locations_locationdata WHERE id = %s

2. 修正SVG生成逻辑 #

• 用查询得到的边界计算viewBox：calculated_view_box = f"{xmin} {ymin} {xmax - xmin} {ymax - ymin}"
• 去掉SVG中多余的旋转和变换原点设置，仅保留Y轴翻转适配坐标系（SVG默认Y轴向下，Web墨卡托投影Y轴向上），修改后的代码如下：

svg_string = []
svg_string.append('<svg viewBox="')
svg_string.append(calculated_view_box)
svg_string.append('" xmlns="http://www.w3.org/2000/svg" width="512" height="512" version="1.1" transform="scale(1 -1)">')
svg_string.append('<path fill="green" stroke="blue" stroke-width="1" d="')
svg_string.append(reconstruct_path_string)
svg_string.append('"/></svg>')

完成以上修改后生成的SVG就和谷歌地图上的形状完全一致。

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