郑州网站建设专家电子商务营销

使用addInteraction添加交互draw绘制，预期removeInteraction删除交互draw绘制时不再绘制，但是删除绘制不起作用，各种找原因，结果把data中的map变量注释掉即可，原因未知。

<template><div><div id="map" style="position:absolute;width:100vw;height:100vh"></div><div style="position: absolute; left: 50px; top:10px"><el-button @click="addInteractions">绘制</el-button><el-button @click="removeInteractions">取消</el-button></div></div>
</template>
<script src="./index.js"></script>
<style lang="scss" src="./index.scss" scoped></style>

import "ol/ol.css";
import GeoJSON from 'ol/format/GeoJSON'
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import { fromLonLat } from "ol/proj";
import { Select, Modify, Draw, Snap } from 'ol/interaction';
import { Tile, Vector as VectorLayer } from 'ol/layer'
import { Point } from 'ol/geom'
import { XYZ, TileWMS, Vector as VectorSource } from 'ol/source'
import MapOne from '@/components/MapOne/index.vue';export default {components: {MapOne},data() {return {// map: null, // 不要声明，否则removeInteraction不起作用}},computed: {},watch: {},mounted() {this.initMap()},created() {},methods: {initMap() {this.map = new Map({target: "map",view: new View({center: fromLonLat([113.53450137499999, 34.44104525]),zoom: 5}),layers: [new TileLayer({source: new XYZ({url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'}),}),],});this.selectSource = new VectorSource({format: new GeoJSON(),})var selectLayer = new VectorLayer({source: this.selectSource,})this.map.addLayer(selectLayer)},addInteractions() {this.select = new Select({wrapX: false,});this.modify = new Modify({features: this.select.getFeatures(),});this.draw = new Draw({type: 'Polygon',source: this.selectSource,});this.snap = new Snap({source: this.selectSource,});this.changeInteractions('draw')},removeInteractions() {this.map.removeInteraction(this.modify);this.map.removeInteraction(this.select);this.map.removeInteraction(this.draw);this.map.removeInteraction(this.select);},changeInteractions(value) {this.removeInteractions();switch (value) {case 'draw': {this.map.addInteraction(this.draw);this.map.addInteraction(this.snap);break;}case 'modify': {this.map.addInteraction(this.select);this.map.addInteraction(this.modify);this.map.addInteraction(this.snap);break;}default: {// pass}}},}
}