本文已参与「新人创作礼」活动，一起开启掘金创作之路。
效果图：
遇到的问题：
在手机端上如果想下滑动查看数据时候，会拖动地图问题；
解决方式： 判断当前港口标记的列表数据，添加启用地图拖动或者禁用地图拖动
项目使用vant-ui
安装openlayers
OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。
npm install ol 或 cnpm install ol
<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)
}
},
相关文章推荐：
# vue使用vant-ui、天地图、Openlayers实现轨迹查询,点击事件信息弹窗，列表加载刷新，复位功能
# vue使用天地图、openlayers实现多个底图叠加显示