【Openlayers】Vue上传KML文件显示（完整示例）

---

前言

在OpenLayers中上传KML文件，可以通过以下步骤完成：

一、创建一个地图对象：

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([0, 0]),
        zoom: 2
    })
});

二、创建一个矢量图层：

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector()
});
map.addLayer(vectorLayer);

三、创建一个文件选择器和读取器，并监听文件选择事件：

在HTML中，需要添加一个文件选择器的元素：

 <input type="file" @change="handleFileUpload" />

监听文件选择事件，读取文件数据，添加并且定位到图层

handleFileUpload(event) {
        const file = event.target.files[0];
        if (file && file.name.endsWith('.kml')) {
          const reader = new FileReader();
          reader.onload = (e) => {

            const kmlText = e.target.result;
            console.log("kmlText",kmlText,e)
            const features = new KML().readFeatures(kmlText, {
              featureProjection: 'EPSG:4490',
            });
            console.log("features",features)
            this.vectorLayer.getSource().clear();
            this.vectorLayer.getSource().addFeatures(features);
            this.map.getView().fit(this.vectorLayer.getSource().getExtent(), {
              size: this.map.getSize(),
            });
          };
          reader.readAsText(file);
        } else {
          alert('Please upload a valid KML file.');
        }
      },

---

完整示例

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <div ref="map" class="map"></div>
  </div>
</template>

<script>
  import 'ol/ol.css';
  import Map from 'ol/Map';
  import View from 'ol/View';
  import { Tile as TileLayer } from 'ol/layer';
  import { OSM } from 'ol/source';
  import KML from 'ol/format/KML';
  import VectorSource from 'ol/source/Vector';
  import VectorLayer from 'ol/layer/Vector';

  export default {
    data() {
      return {
        map: null,
        vectorLayer: null,
      };
    },
    mounted() {
      this.initMap();
    },
    methods: {
      initMap() {
        this.vectorLayer = new VectorLayer({
          source: new VectorSource(),
        });

        this.map = new Map({
          target: this.$refs.map,
          layers: [
            new TileLayer({
              source: new OSM(),
            }),
            this.vectorLayer,
          ],
          view: new View({
            center: [0, 0],
            zoom: 2,
          }),
        });
      },
      handleFileUpload(event) {
        const file = event.target.files[0];
        if (file && file.name.endsWith('.kml')) {
          const reader = new FileReader();
          reader.onload = (e) => {

            const kmlText = e.target.result;
            console.log("kmlText",kmlText,e)
            const features = new KML().readFeatures(kmlText, {
              featureProjection: 'EPSG:4490',
            });
            console.log("features",features)
            this.vectorLayer.getSource().clear();
            this.vectorLayer.getSource().addFeatures(features);
            this.map.getView().fit(this.vectorLayer.getSource().getExtent(), {
              size: this.map.getSize(),
            });
          };
          reader.readAsText(file);
        } else {
          alert('Please upload a valid KML file.');
        }
      },
    },
  };
</script>

<style>
  .map {
    width: 100%;
    height: 500px;
  }
</style>

---

总结

这样，当用户选择一个KML文件后，文件读取器会将其内容读取为字符串，然后使用ol.format.KML解析为矢量要素，并添加到矢量图层中。