vue+vant+openlayers实现点击标记弹窗内嵌滚动加载列表

移动端地图与列表同步交互优化

原创已于 2022-04-16 00:51:43 修改 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-03-18 15:08:55 首次发布

Vue 同时被 2 个专栏收录

198 篇文章

订阅专栏

openlayers

11 篇文章

订阅专栏

博客内容讲述了在移动端项目中遇到的一个问题：当用户尝试滚动查看列表数据时，地图也会随之拖动。为了解决这个问题，作者采用了 vant-ui 框架，并通过监听列表数据长度来判断是否启用地图拖动。当列表数据超过一定数量时，禁用地图拖动，反之则启用。此外，还展示了如何在 Vue 中实现禁用和启用地图拖动的方法，以及在弹窗关闭时调用相应方法。整个解决方案旨在提供流畅的用户体验。

效果图：

遇到的问题：

在手机端上如果想下滑动查看数据时候，会拖动地图问题；

解决方式：

判断当前港口标记的列表数据，添加启用地图拖动或者禁用地图拖动

项目使用vant-ui

<div class="ship-content sourceList" v-show="portId&&sourceDataList.length>0" :class={portLine:portId}>
    <van-pull-refresh v-model="isSourceLoading" @refresh="onSourceRefresh" class="content" success-text="刷新成功">
                    <van-list v-if="sourceDataList.length>0" v-model="sourceLoading" :finished="sourceFinished" :immediate-check="false" finished-text="我也是有底线的"
                      @load="onSourceLoad" :offset="10">
                      <div v-for="source in sourceDataList" :key="source.sourceId" class=" pb15">
                        <span>{{source.unlimitedLoading=="0"?source.cargoWeight+"吨":"随船装"}}/{{source.cargoName}}</span>
                      </div>
                    </van-list>  
    </van-pull-refresh>
</div>

.sourceList{
  max-height:100px;
  overflow-y: auto;
}

引用DragPan

import DragPan from 'ol/interaction/DragPan';

data定义：

dragPan：null

watch: {
    // 监听货源列表是否启用地图拖动
     sourceDataList(){
       this.sourceDataList.length>3?this.disableMove():this.onMove();
     },
}

会用的地方还有弹窗关闭的时候调用启用方法，具体使用还要根据项目需要去添加调用禁用启用的方法。

// 禁用拖动
    disableMove(){
      this.map.getInteractions().forEach((interaction)=>{
        if(interaction instanceof DragPan){
          this.dragPan = interaction;
        }
      });
      if(this.dragPan){
        this.map.removeInteraction(this.dragPan)
      }
    },
    // 启用拖动
    onMove(){
      this.map.getInteractions().forEach((interaction)=>{
        if(interaction instanceof DragPan){
          this.dragPan = interaction;
        }
      });
      if(this.dragPan){
        this.map.addInteraction(this.dragPan)
      }
    },