openlayer地图在vuejs中点击更改标记位置

Question

我在 vue3 中使用 openlayer 地图，我试图在点击地图时显示标记。
我的问题是：我无法在添加新标记之前删除上一个标记...
我正在使用这个 documantaion.
这是我的代码：

<template>
  <ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="height:400px">
    <ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" :projection="projection"/>
    <ol-tile-layer>
      <ol-source-osm/>
    </ol-tile-layer>
    <ol-vector-layer>
      <ol-source-vector>
        <ol-interaction-draw :type="drawType">
        </ol-interaction-draw>
      </ol-source-vector>
      <ol-style>
        <ol-style-icon :src="markerIcon" :scale="2"></ol-style-icon>
      </ol-style>
    </ol-vector-layer>
  </ol-map>
</template>

<script>
import markerIcon from "../../assets/img/locationSingle.svg"
import {ref} from "vue";

export default {
  name: "test",
  setup() {
    const center = ref([54.1966794, 31.8797732])
    const projection = ref('EPSG:4326')
    const zoom = ref(6)
    const rotation = ref(0)

    const markers = ref(null);
    const drawType = ref("Point")

    return {
      center,
      projection,
      zoom,
      rotation,
      markerIcon,
      markers,
      drawType
    }
  },
}
</script>

这两个链接可以帮到你。
Context-menu and adding marker (with some events)
Showing vector

Answer 1

在 drawstart 上使用以下函数：

const drawstart = (event) => {
  vectors.value.source.removeFeature(drawedMarker.value);
  drawedMarker.value = event.feature;
  console.log(vectors.value.source)
}

完整代码：

<template>
  <ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="height:400px">
    <ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" :projection="projection"/>

    <ol-tile-layer>
      <ol-source-osm/>
    </ol-tile-layer>

    <ol-vector-layer>
      <ol-source-vector ref="vectors">
        <ol-interaction-draw @drawstart="drawstart" :type="drawType">
        </ol-interaction-draw>
      </ol-source-vector>

      <ol-style>
        <ol-style-icon :src="markerIcon" :scale="2"></ol-style-icon>
      </ol-style>
    </ol-vector-layer>

  </ol-map></template>

<script>
import markerIcon from "../../assets/img/locationSingle.svg"
import {ref} from "vue";

export default {
  name: "test",
  setup() {
    const center = ref([54.1966794, 31.8797732])
    const projection = ref('EPSG:4326')
    const zoom = ref(6)
    const rotation = ref(0)

    const markers = ref(null);
    const drawType = ref("Point")

    const drawedMarker = ref()
    const vectors = ref(null);

    const drawstart = (event) => {
      vectors.value.source.removeFeature(drawedMarker.value);
      drawedMarker.value = event.feature;
      console.log(vectors.value.source)
    }

    return {
      vectors,
      drawstart,
      center,
      projection,
      zoom,
      rotation,
      markerIcon,
      markers,
      drawType
    }
  },
}
</script>

openlayer地图在vuejs中点击更改标记位置

openlayer map change marker position onClick in vuejs

openlayers

vuejs3