在Vue 3中使用OpenLayers加载GPX数据并显示图形效果

<gpx version="1.1" creator="GPSBabel - http://www.gpsbabel.org"> 
    <trk> 
        <name>Track example</name> 
        <trkseg> 
            <trkpt lat="38.5" lon="-120.2"> 
                <ele>100.0</ele> 
                <time>2024-01-01T12:00:00Z</time> 
            </trkpt> 
            <trkpt lat="38.6" lon="-120.3"> 
                <ele>120.0</ele> 
                <time>2024-01-01T12:05:00Z</time> 
            </trkpt> 
        </trkseg> 
    </trk> 
</gpx>

vue create vue-openlayers-gpx cd vue-openlayers-gpx npm install ol

<!--
 * @Author: 彭麒
 * @Date: 2024/12/14
 * @Email: 1062470959@qq.com
 * @Description: 此源码版权归吉檀迦俐所有，可供学习和借鉴或商用。
 -->
<template>
  <button class="back-button" @click="goBack">返回</button>
  <div class="container">
    <div class="w-full flex justify-center">
      <div class="font-bold text-[24px]">在Vue3中使用OpenLayers加载GPX数据，显示图形</div>
    </div>
    <div id="vue-openlayers"></div>
  </div>
</template>
<script setup>
import {ref, onMounted} from 'vue';
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Style from 'ol/style/Style';
import Circle from 'ol/style/Circle';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import GPX from 'ol/format/GPX';
const map = ref(null);
import router from "@/router";
const goBack = () => {
  router.push('/OpenLayers');
};
const initMap = () => {
  const OSMlayer = new TileLayer({
    source: new OSM(),
    visible: true,
    zIndex: 1,
  });
  const style = {
    Point: new Style({
      image: new Circle({
        fill: new Fill({
          color: '#00FA9A',
        }),
        radius: 5,
        stroke: new Stroke({
          color: 'blue',
          width: 1,
        }),
      }),
    }),
    LineString: new Style({
      stroke: new Stroke({
        color: '#FF00FF',
        width: 3,
      }),
    }),
    MultiLineString: new Style({
      stroke: new Stroke({
        color: 'blue',
        width: 3,
      }),
    }),
  };
  const vectorLayer = new VectorLayer({
    visible: true,
    zIndex: 3,
    source: new VectorSource({
      url: '/map/gpx1.gpx',
      format: new GPX(),
    }),
    style: (feature) => {
      return style[feature.getGeometry().getType()];
    },
  });
  map.value = new Map({
    target: 'vue-openlayers',
    layers: [OSMlayer, vectorLayer],
    view: new View({
      center: [11585992.5, 3585872.5], // 成都市的 EPSG:3857 坐标
      zoom: 10,
    }),
  });
};
onMounted(() => {
  initMap();
});
</script>
<style scoped>
.container {
  width: 840px;
  height: 590px;
  margin: 50px auto;
  border: 1px solid #42B983;
}
#vue-openlayers {
  width: 800px;
  height: 470px;
  margin: 0 auto;
  border: 1px solid #42B983;
  position: relative;
}
</style>