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>
</van-list>
</van-pull-refresh>
.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实现多个底图叠加显示
# vue使用高德地图搜索地址添加标记marker,定位，拖拽选址功能
# vue3.0 setup语法糖
# echarts vue element-ui 实现根据选择项年月日时间切换数据显示折线图，vue页面监听自适应
- 6075
-
星期一研究室
Vue.js
掘金·金石计划
- 10.8w
-
Leecason
Vue.js
JavaScript
- 19.6w
-
小jerry
Vue.js
Element
- 5.7w
-
摸鱼的春哥
Vue.js
React.js
