openlayers+vue的bug

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



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
                }
            }
        },
    }
}

你可能感兴趣的:(openlayer,gis)