地图开始自动平移时,Mapbox GeoJSON图层变得可见

时间:2019-04-13 23:59:14

标签: javascript mapbox mapbox-gl-js

我有一张与轮播互动的地图。当轮播移动时,地图会飞到与新轮播项目中的信息相关联的新区域。

对于每个轮播项目,我都设置了带有一组点的相应GeoJSON图层,并希望在地图移至新的轮播项目时打开/关闭图层。我编写了以下代码来做到这一点:

    let carouselMapMove = (event) => {
      if (!this.map) {
        return;
      }
      let camera = this.map.cameraForBounds(this.recents[event.to].bounds, {
        padding: (window.innerWidth <= 640) ? (window.innerWidth * 0.15) : (window.innerHeight * 0.15)
      });
      if (camera) {
        camera.duration = 3000;
        this.map.flyTo(camera);
      }

      this.recents.forEach(recent_item =>{
        this.map.setLayoutProperty(recent_item.id, 'visibility', 'none');
      });
      this.map.setLayoutProperty(this.recents[event.to].id, 'visibility', 'visible');  
    };

this.recents是另一个JSON文件,其中包含所有轮播项目及其id(我认为该部分效果很好)。

以下是GeoJSON模板之一的副本:

 {
    "id": "1",
    "type": "symbol",
    "source": {
      "type": "geojson",
      "data": {
        "type": "FeatureCollection",
        "features": [
           {"type": "Feature",
            "geometry": {
              "type": "Point",
              "coordinates": [0,0]}},
           {"type": "Feature",
            "geometry": {
              "type": "Point",
              "coordinates": [0.1,-0.1]}}
         ]
      }
    },
    "layout": {
      "icon-image" : "pin",
      "icon-size" : 0.05,
      "icon-offset" : [0,-250],
      "visibility":"visible"
    }
  }

我的问题是,每当执行此事件并平移地图时,这些功能就会消失约0.5秒,但随着地图缩小并从该区域平移而立即消失。

有人知道如何解决此问题吗?我猜这与缩放级别的更改和图层自动重新打开有关。

谢谢,我什至感谢朝着正确方向前进!

0 个答案:

没有答案