0

在我的 openlayers 5（基于 angular 6 应用程序）中，我正在实现一个功能，您可以在其中搜索某些内容，查询数据库，数据库会带回一些 geoJSON，然后我将这个 geoJSON 数据呈现在一个 ol 矢量图层中。

有两种不同的搜索方式，所以有两种不同的形式将geoJSOn带回同一个ol向量。

当然，在渲染数据之前，我必须清除图层。

这是我的代码

ngOnInit() {//initialize some params and the ol map
    //bring results-as you type - pure angular
    this.results = this.myForm.valueChanges.pipe(
      switchMap( formdata => this.mapcmsService.searchName(formdata.name, formdata.cepDrop))
    );//pipe

    this.tilesource = new OlXYZ({
      url:'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
    });

    this.tilelayer = new OlTileLayer({
      source: this.tilesource
    });

    this.vectorsource = new VectorSource({});

    this.vectorlayer = new VectorLayer({
      source: this.vectorsource
    });

    this.view = new OlView({
      center: OlProj.fromLonLat([6.661594, 50.433237]),
      zoom: 2,
    });

    this.olmap = new OlMap({
      target: 'map',
      layers: [this.tilelayer,this.vectorlayer],
      view: this.view,
      projection: 'EPSG:3857'
    });

    const selectClick = new Select({
      condition: click,
      layers:[this.vectorlayer]      
    });

    this.olmap.addInteraction(selectClick);    

    selectClick.on(
      'select', ()=>{     
        const values = selectClick.getFeatures().item(0).values_;
        this.getDetails(values.id);                
      }             
    );
} //closes ngOnInit

在ngOnInit初始化之后，有两个不同的函数将geoJSON带到同一个ol向量层。他们基本上做同样的事情。

  searchById(id){
    this.map_loading = true;    
    this.myService.getById(id).subscribe((data) =>{
        this.vectorsource.refresh();
        this.vectorsource.clear();
        const fff = (new GeoJSON()).readFeatures(data.data);
        this.vectorsource.addFeatures(fff);
        this.map_loading = false;
    })
  }//searchById

和

searchCategories(){
    this.map_loading = true;           
this.myService.categoriesSearch(this.categoriesForm.value).subscribe((data) =>{
        this.vectorsource.refresh();
        this.vectorsource.clear();
        const fff = (new GeoJSON()).readFeatures(data.data);
        this.vectorsource.addFeatures(fff);
        this.map_loading = false;
    })
  }//searchCategories

问题是在添加新特征之前并不总是清除 ol 矢量源。我搜索一些东西，呈现特征。我再次搜索，有时，旧功能与新功能一起保留在地图上。

我做了一个愚蠢的举动来添加refresh，clean没有任何东西是固定的。这不是标准的，例如每隔一个搜索。这是随机发生的，我不知道如何调试它。请指教

谢谢

4

1 回答 1

0

每个功能都有唯一的 id 吗？

我遇到了同样的问题，即不断加载功能。我使用了 bbox 策略，每次移动地图时，它都会加载范围内的所有要素，即使它们已经存在。

我必须在数据中为我的特征设置一个唯一的 id，所以如果你加载新的，OpenLayers 可以引用现有的。这种随机性可能来自为特征生成的 id，有时等于新的，有时不等于。

不知道这是否面临您的问题，当我读到它时，它就飞入了我的脑海。

于 2018-08-23T14:19:08.877 回答