264：vue+openlayers 坐标转换 WGS84-GCJ02-BD09

在Vue和OpenLayers中进行WGS84坐标系到GCJ02和BD09坐标系的转换，可以使用第三方库如coordtransform。以下是一个简单的例子：

首先，安装coordtransform库：

npm install coordtransform

然后，在Vue组件中使用该库进行转换：

<template>
  <div id="map" class="map"></div>
</template>
 
<script>
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { fromLonLat } from 'ol/proj';
import coordtransform from 'coordtransform';
 
export default {
  name: 'MapComponent',
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new Map({
        target: 'map',
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        view: new View({
          center: fromLonLat([126.6, 45.76], 'EPSG:3857'), // 原点坐标，例如北京
          zoom: 4,
        }),
      });
    },
    transformCoordinates(coordinates) {
      const wgs84 = coordtransform.wgs84_to_gcj02(coordinates[0], coordinates[1]);
      const bd09 = coordtransform.gcj02_to_bd09(wgs84[0], wgs84[1]);
      return [bd09[0], bd09[1]];
    },
  },
};
</script>
 
<style>
.map {
  width: 100%;
  height: 100%;
}
</style>

在上述代码中，transformCoordinates方法负责从WGS84坐标系转换到GCJ02，再转换到BD09坐标系。这个方法可以根据需要在地图交互或其他逻辑中调用。

请注意，这个例子中的坐标系转换是基于假设用户的原始坐标是在WGS84坐标系下的。如果原始坐标是其他坐标系，需要先转换到WGS84，然后才能进行后续的转换。