如何在Vue3+OpenLayers中获取匹配Django SRID4326的坐标

问题根源 #

你犯了两个关键错误：

• toLonLat(event.coordinate)返回的已经是EPSG:4326（WGS84）的度数格式坐标（经度在前，纬度在后），不需要再做弧度转度数的计算——你的convertToSRID4326函数完全多余，反而把正确的度数转成了错误的小数值。
• 地图初始中心没设置为曼谷，导致你点击的位置接近0,0（几内亚湾），所以得到的坐标数值极小。

修正后的代码实现 #

Template部分（保持基础结构，确保初始中心正确）

<ol-map
  :loadTilesWhileAnimating="true"
  :loadTilesWhileInteracting="true"
  style="height: 400px"
  @click="handleMapClick"
>
  <ol-view
    ref="view"
    :center="center"
    :rotation="rotation"
    :zoom="zoom"
    :projection="projection"
  />

  <ol-tile-layer>
    <ol-source-osm/>
  </ol-tile-layer>
</ol-map>

Script部分（修正转换逻辑，生成Django兼容格式）

import { ref } from 'vue';
import { fromLonLat, toLonLat } from 'ol/proj';

// 初始化地图中心：曼谷的经纬度转成Web Mercator（EPSG:3857）
const center = ref(fromLonLat([100.530077, 13.721325]));
const rotation = ref(0);
const zoom = ref(15);
const projection = ref('EPSG:3857');
const markers = ref([]);

// 直接生成Django需要的SRID4326格式字符串
const getDjangoSRIDFormat = (lon, lat) => {
  return `SRID=4326;MULTIPOINT (${lon} ${lat})`;
};

const handleMapClick = (event) => {
  // toLonLat直接返回EPSG:4326的[经度, 纬度]（度数格式）
  const [lon, lat] = toLonLat(event.coordinate);
  const djangoFormatCoord = getDjangoSRIDFormat(lon, lat);
  
  markers.value.push({ lon, lat, djangoFormat: djangoFormatCoord });
  console.log('原始经纬度:', [lon, lat]);
  console.log('Django兼容格式:', djangoFormatCoord);
};

关键说明 #

1. 坐标顺序：Django的MULTIPOINT格式是经度 纬度，和toLonLat返回的顺序一致，不需要调换。
2. 初始中心设置：用fromLonLat把曼谷的EPSG:4326坐标转成OpenLayers默认的EPSG:3857，确保地图加载后定位到目标区域。
3. 格式生成：直接拼接成Django需要的SRID=4326;MULTIPOINT (lon lat)字符串即可，无需额外转换。

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