浙江自己如何做网站,中国企业在线官网,利用wordpress做api提供者,网站建设 中企动力中山使用addInteraction添加交互draw绘制#xff0c;预期removeInteraction删除交互draw绘制时不再绘制#xff0c;但是删除绘制不起作用#xff0c;各种找原因#xff0c;结果把data中的map变量注释掉即可#xff0c;原因未知。
templatedivdiv id预期removeInteraction删除交互draw绘制时不再绘制但是删除绘制不起作用各种找原因结果把data中的map变量注释掉即可原因未知。
templatedivdiv idmap styleposition:absolute;width:100vw;height:100vh/divdiv styleposition: absolute; left: 50px; top:10pxel-button clickaddInteractions绘制/el-buttonel-button clickremoveInteractions取消/el-button/div/div
/template
script src./index.js/script
style langscss 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?langzh_cnsize1style7x{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}}},}
}
