在 Vue 3 中上传 KML 文件并在地图上显示的实现方法

<?xml version="1.0" encoding="UTF-8"?> 
<kml xmlns="http://www.opengis.net/kml/2.2"> 
    <Document> 
    <name>Sample KML</name> 
    <Placemark> 
        <name>Point 1</name> 
        <Point> 
<coordinates>-95.6185,37.6185,0</coordinates> </Point> </Placemark> <Placemark> <name>Point 2</name> <Point> <coordinates>-118.2437,34.0522,0</coordinates> 
        </Point> 
    </Placemark> 
    </Document> 
</kml>

npm install -g @vue/cli vue create vue-kml-upload

cd vue-kml-upload

npm install ol d3-fetch

<!--
 * @Author: 彭麒
 * @Date: 2024/12/17
 * @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上传KML文件，并在map上显示</div>
      <h4>
        <input style="margin-top: 16px" type="file" id="fileselect" accept=".kml"/>
      </h4>
      <div id="vue-openlayers"></div>
    </div>
  </div>
</template>
<script setup>
import {ref, onMounted} from 'vue';
import 'ol/ol.css';
import {Map, View} from 'ol';
import SourceVector from 'ol/source/Vector';
import LayerVector from 'ol/layer/Vector';
import KML from 'ol/format/KML';
import {Tile} from 'ol/layer';
import OSM from 'ol/source/OSM';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Style from 'ol/style/Style';
import Text from 'ol/style/Text';
import router from "@/router";
const goBack = () => {
  router.push('/OpenLayers');
};
const map = ref(null); // 响应式地图对象
const source = ref(
  new SourceVector({
    wrapX: false,
    format: new KML({
      extractStyles: false, // 不提取样式
    }),
  })
);
const view = ref(
  new View({
    projection: 'EPSG:3857', // 地图投影
    center: [11585992.5, 3585872.5], // 地图中心点（成都市）
    zoom: 3, // 地图缩放级别
  })
);
// 读取上传的 KML 文件并添加到地图
const readFile = () => {
  const fileselect = document.querySelector('#fileselect'); // 获取文件选择器
  fileselect.addEventListener('change', function (e) {
    const files = e.target.files; // 获取选择的文件
    if (files.length === 0) {
      alert('没有数据，请重新上传新文件！'); // 提示没有选择文件
      return;
    }
    const reader = new FileReader();
    reader.readAsText(files[0]); // 读取KML文件的内容
    reader.onload = function (evt) {
      const shparray = evt.target.result; // 获取文件内容
      // 使用 KML 格式读取数据
      const allFeatures = source.value
        .getFormat()
        .readFeatures(shparray, {
          dataProjection: 'EPSG:4326', // 数据投影
          featureProjection: 'EPSG:3857', // 特征投影
        });
      // 添加所有的 Feature 到 Source
      source.value.addFeatures(allFeatures);
      // 设置样式
      source.value.forEachFeature(function (feature) {
        const style = new Style({
          fill: new Fill({color: 'purple'}), // 填充颜色
          stroke: new Stroke({color: 'orange'}), // 边框颜色
          text: new Text({
            text: feature.get('name'), // 显示的文本
            font: '12px Calibri,sans-serif', // 字体样式
            fill: new Fill({color: '#000'}), // 文本填充颜色
            stroke: new Stroke({
              color: '#fff', // 文本边框颜色
              width: 2,
            }),
          }),
        });
        feature.setStyle(style); // 应用样式
      });
    };
  });
};
// 初始化地图
const initMap = () => {
  map.value = new Map({
    target: 'vue-openlayers', // 地图渲染的目标元素
    layers: [
      new Tile({
        source: new OSM(), // 添加 OSM 图层
      }),
      new LayerVector({
        source: source.value, // 添加矢量图层
      }),
    ],
    view: view.value,
  });
};
onMounted(() => {
  initMap(); // 组件挂载时初始化地图
  readFile(); // 读取文件
});
</script>
<style scoped>
.container {
  width: 840px;
  height: 590px;
  margin: 50px auto;
  border: 1px solid #42b983;
}
#vue-openlayers {
  width: 800px;
  height: 400px;
  margin: 0 auto;
  border: 1px solid #42b983;
  position: relative;
}
</style>