openlayer加载本地kml的方法

openlayer官网上有kml加载显示的方法：
openlayer官网加载kml示例
只是其中url是相对前端服务器根目录路径：

然而开发过程中出现需要加载本地文件的需求，本来是想通过上传ftp曲线救国，但是考虑到现在很多浏览器放弃了对ftp的支持，故而放弃ftp思路，决定直接选择本地kml文件加载。
  由于直接使用file://协议会出现跨域问题，所以使用js的fileReader方式读取kml内容，然后使用openlayer的vectorsource 中kml format解析feature添加到数据源中，代码如下所示：

function addkmllayer(file) {
let newlayer;

var vectorSource2 = new VectorSource({
  format:new KML({
    extractStyles: false,
    // crossOrigin:"*"
  }),
  loader: function(extent, resolution, projection) {
     var reader = new FileReader();
    reader.onload = function() {
      let features=vectorSource2.getFormat().readFeatures(this.result
        ,
        {
          dataProjection: 'EPSG:4326',
          featureProjection: 'EPSG:3857'
        }
      );
      vectorSource2.addFeatures(features);

      let extent=newlayer.getSource().getExtent();
      map.getView().fit(extent);

      }
    reader.readAsText(file);
  },
);

newlayer = new VectorLayer({
  source:vectorSource2,
  style:new Style({
    fill:new Fill({
      color:[0xff,0xff,0x33,0.7]
    }),
    stroke:new Stroke({
      color:'black'
    })
  })
})
map.addLayer(
  newlayer
);
}

静态页面vue部件代码：

<template>
  <div>

    <input type="file" @change="upload($event)" accept=".kml"/>
    <div id="map" class="map">

    </div>
  </div>

</template>

<script>
 
    export default {
      name: "totalmap",
        mounted() {
        totalmaphandler.createnewmap();
      },
      methods:{
        upload(input){
          console.log(input);
           addkmllayer(input.currentTarget.files[0])
        }
      }
    }

</script>

<style scoped>

  .map {
    height: 800px;
    width: 100%;
  }

</style>

其中省略了map创建代码。
注意kml的epsg为4326，所以需要设置feature的坐标系：

   let features=vectorSource2.getFormat().readFeatures(this.result
        ,
        {
          dataProjection: 'EPSG:4326',
          featureProjection: 'EPSG:3857'
        }
      );
     

按照最后加载图层范围定位代码需要放到onload回调函数中，不然获取不到extent。