背景:openlayers 實現地圖打點,根據數據的變化修改點的位置
data
// 點的經緯度
coordinates: [
// { x: 37.12638163, y: 15.1353712537 },
// { x: 82.56253054272383, y: 42.63299560546875 },
// { x: 87.52801179885864, y: 44.15955126285553 }
]
methods
/**
* 批量添加座標點
*/
handleAddBatchFeature() {
const _that = this;
// 設置圖層
_that.flagLayer = new VectorLayer({
source: new VectorSource()
});
_that.map.addLayer(_that.flagLayer);
// 循環添加feature
for (let i = 0; i < this.coordinates.length; i++) {
// 創建feature
let feature = new Feature({
geometry: new Point([_that.coordinates[i].x, _that.coordinates[i].y])
});
// 設置ID
feature.setId(i + "xx");
feature.setStyle(_that.getIcon());
_that.features.push(feature);
} // for 結束
// 批量添加feature
_that.flagLayer.getSource().addFeatures(_that.features);
},
上面就可以實現批量打點操作。我修改 data 的數據,希望實現點的實時更新操作
刪除點,需要先從Feature裏移除icon,然後再移除圖層,如果不從Feature裏移除icon而直接移除圖層,則同一個實例化方法中icon一直存在,只是由於圖層不存在而未在地圖上顯示出來。
刪除點,刪除圖層代碼
this.flagLayer.getSource().removeFeature(this.features); //先默認移除icon的feature
this.map.removeLayer(this.flagLayer); //在移除圖層
感覺上面的邏輯符合,但是往往會事與願違!!!
下面我操作coordinates數據我刪除了一個點,但是頁面點的位置並沒有消失,就是說移除點是錯誤的。
報錯信息:VectorSource../node_modules/[email protected]@ol/source/Vector.js.VectorSource.removeFeature
默認說forEach of undefined 但是上面數據顯示數組存在兩個值。
經過N小時的摸索,終於找到了解決辦法。
let _that = this;
this.flagLayer
.getSource()
.getFeatures()
.forEach(function(feature) {
_that.flagLayer.getSource().removeFeature(feature);
});
this.features = [];?
console.log(this.features);
// this.flagLayer.getSource().removeFeature(this.features); //錯誤寫法
this.map.removeLayer(this.flagLayer);
感謝參考博文:https://blog.csdn.net/ZillahV06/article/details/80449044