javascript - 如何以编程方式清空地图上的绘制图层
问题描述
我想单击一个按钮,该按钮将自动清空已在地图上绘制的所有矩形、圆形、多边形等。
但它没有用。
或者有没有办法刷新地图,就像你第一次什么都没画一样干净
<template>
<div style="width: 100%;height: 100%;">
<l-map ref="map"
style="background: #000;"
:zoom="zoom"
:center="center"
attribution="attribution">
<l-image-overlay
:url="url"
:bounds="bounds">
</l-image-overlay>
</l-map>
<el-button @click="clearAllLayers">clear</el-button>
</div>
</template>
<script>
export default {
data() {
return {
zoom: 1,
center: [0, 0],
attribution: '@haoxl',
bounds: [[-90, -180], [90, 180]],
content: '',
url: require('../assets/eye_L.jpg'),
map: null,
lesion: {
id: '',
subLabelResultId: '',
lesionType: '',
description: '',
shapetype: 1,
points: []
},
drawnItems: null
};
},
mounted() {
this.$nextTick(() => {
const self = this;
this.map = this.$refs.map.mapObject;
this.drawnItems = new window.L.FeatureGroup();
this.map.addLayer(this.drawnItems);
this.drawControl = new window.L.Control.Draw({
position: 'topright',
draw: {
polyline: false,
polygon: false,
circle: false,
circlemarker: false,
marker: false,
zoomControl: true,
rectangle: false
},
edit: {
featureGroup: this.drawnItems,
remove: true
}
});
this.map.addControl(this.drawControl);
window.L.rectangle([[17.308687886770034, 16.171875000000004], [-47.98992166741418, -59.76562500000001]]).addTo(this.drawnItems);
// create
this.map.on(window.L.Draw.Event.CREATED, e => {
let layer = e.layer;
layer.bindPopup(self.content);
this.drawnItems.addLayer(layer);
let lesion = cloneObj(this.lesion);
lesion.id = layer._leaflet_id;
lesion.description = self.content;
lesion.points = JSON.stringify(layer._parts[0]);
});
// edit
this.map.on(window.L.Draw.Event.EDITED, e => {
debugger;
});
});
},
methods: {
drawRect() {
let drawControl = new window.L.Control.Draw();
new window.L.Draw.Rectangle(this.map, drawControl.options.rectangle).enable();
},
clearAllLayers() {
debugger;
// this.map.on(window.L.Draw.Event.DELETED, e => {
// debugger;
// let layers = e.layers;
// });
new window.L.EditToolbar.Delete(this.map, {
featureGroup: this.drawnItems
});
}
}
};
</script>
我希望页面上绘制的所有矩形都被清除,但它没有做任何事情。
解决方案
很可能只是使用clearLayers()
:
this.drawnItems.clearLayers();
推荐阅读
- r - 为什么这些功能不同?
- java - 使用 ShapeRenderer 在 libGDX 中缩放渲染形状
- angularjs - 如何撤消我的 JSOG.parse() 以返回 API
- pandas - 具有不同级别数量的 Pandas MultiIndex
- https - 在 minio 服务器上使用 https
- android - Marker.remove(),Marker.setPosition 不工作
- linux - 如何处理别名中的多个输入?
- python - 选择定义包含针日期的日期范围的数据框行
- vue.js - vuetify v-flex xs12 只填充一半宽度
- c++ - 为什么在直接初始化和赋值中传递 lambda 而不是复制初始化时会编译?