在vue3+typescript的前提下，上传一幅图片并在openlayers上显示

以下是一个基于Vue3和TypeScript的上传图片并在OpenLayers上显示的示例代码：

1. 安装依赖

首先，我们需要安装一些依赖：

npm install --save ol vue3-file-upload

其中，`ol` 是 OpenLayers 的主要依赖，`vue3-file-upload` 是一个用于文件上传的 Vue3 组件库。

2. 创建组件

接下来，我们创建一个 Vue3 组件 `UploadImage.vue`，用于上传图片并在 OpenLayers 上显示：

<template>
  <div>
    <input type="file" ref="fileInput" @change="onFileInputChange" />
    <div ref="mapContainer" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
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 { Icon, Style } from 'ol/style'
import { Feature } from 'ol'
import { Point } from 'ol/geom'
import { UploadFile } from 'vue3-file-upload'

export default defineComponent({
  name: 'UploadImage',
  components: {
    UploadFile,
  },
  setup() {
    const mapContainer = ref<HTMLDivElement | null>(null)
    const fileInput = ref<HTMLInputElement | null>(null)
    const map = ref<Map | null>(null)

    const onFileInputChange = (event: Event) => {
      const files = (event.target as HTMLInputElement).files
      if (files && files.length > 0) {
        const file = files[0]
        const reader = new FileReader()
        reader.onload = () => {
          const imageSrc = reader.result as string
          showImageOnMap(imageSrc)
        }
        reader.readAsDataURL(file)
      }
    }

    const showImageOnMap = (imageSrc: string) => {
      const vectorLayer = new VectorLayer({
        source: new VectorSource({
          features: [
            new Feature({
              geometry: new Point([0, 0]),
              style: new Style({
                image: new Icon({
                  src: imageSrc,
                }),
              }),
            }),
          ],
        }),
      })
      map.value!.addLayer(vectorLayer)
    }

    const initMap = () => {
      map.value = new Map({
        target: mapContainer.value!,
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        view: new View({
          center: [0, 0],
          zoom: 2,
        }),
      })
    }

    onMounted(() => {
      initMap()
    })

    return {
      fileInput,
      mapContainer,
      onFileInputChange,
    }
  },
})
</script>

在这个组件中，我们：

- 在模板中添加了一个 `<input>` 元素，用于选择文件，并为其绑定了 `onFileInputChange` 事件。
- 在模板中添加了一个 `<div>` 元素，用于承载 OpenLayers 地图，并为其添加了一个 `ref` 属性，以便在组件中引用它。
- 在 `setup()` 函数中定义了一些响应式数据：
- `mapContainer` 用于引用地图容器。
- `fileInput` 用于引用文件选择框。
- `map` 用于引用地图对象。
- 定义了 `onFileInputChange` 方法，该方法会在文件选择框的值发生改变时被调用。在该方法中，我们获取到了文件，并使用 `FileReader` 对象将其转化成了一个 Base64 编码的字符串。然后，我们调用了 `showImageOnMap` 方法，在地图上显示该图片。
- 定义了 `showImageOnMap` 方法，该方法会创建一个 `VectorLayer`，并将其添加到地图中。这个 `VectorLayer` 包含了一个 `Point` 几何对象，以及一个 `Icon` 样式，用于显示图片。
- 定义了 `initMap` 方法，该方法会初始化地图对象。
- 在 `onMounted` 钩子中调用了 `initMap` 方法，以便在组件挂载时创建地图对象。

3. 使用组件

最后，我们可以在其他组件中使用 `UploadImage` 组件：

<template>
  <UploadImage />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import UploadImage from './UploadImage.vue'

export default defineComponent({
  name: 'App',
  components: {
    UploadImage,
  },
})
</script>

这样，当我们打开这个组件时，就会看到一个用于上传图片的文件选择框，以及一个承载了 OpenLayers 地图的容器。当我们选择一张图片后，该图片就会显示在地图上。