本文已参与「新人创作礼」活动，一起开启掘金创作之路。

功能需求：

• 数据图层叠加；
• 轨迹查询显示；
• 港口起始点可点击显示弹窗；
• 复位功能；
• 根据选择的时间段查询船舶行驶的轨迹；
• 船舶行驶的港口列表，下拉数据刷新、上拉数据列表分页加载；

技术栈：

vue、有赞vant-ui、天地图、Openlayers

实现效果：

代码实现： 

安装openlayers：

cnpm i -S ol #或者 npm install ol

cnpm i -S ol
#或者
npm install ol

  <div>
    <nav-bar-top :titleText="titleName" :arrowTrue="arrowTrue"></nav-bar-top>
    
    <div class="ships">
      <!-- <div id="mapContainer"></div> -->
      <div style="width:100%;height:100%">
          <div id="trajecttoryMap"></div>
          <!-- 弹窗元素 -->
          <div class="popup" ref="popup" v-show="shopPopup" >
            <div class="ship-header">
              <!-- <div class="cname">经度：{{traData[0]}}</div>
              <div class="cname">纬度：{{traData[1]}}</div> -->
               <div class="cname">{{shipInfo.shipName}}</div>
              <img class="icon-close" @click="closePopup" src="../../assets/img/sy_close.png"/>
            </div>
            <div class="ship-content">
              <div class="mb15">MMSI：{{shipInfo.mmsi}}</div>
              <div class="con-sx mb15">
                <span class="txt-margin">航速：{{shipInfo.speed}}节</span>
                <span>航向：{{shipInfo.csx}}°</span>
              </div>
              <div>最后上报时间：{{shipInfo.createTime}}</div>
            </div>
          </div>
          <!-- 复位 -->
          <ul class="bot_imgs">
            <li @click="handleCenter">
              <img :src="feiwei" />
            </li>
          </ul>
      </div>
    </div>
    <van-collapse v-model="orderDetails" :accordion="true" :border="false" class="trajCollapse">
      <van-collapse-item title="船舶轨迹" name="1" class="order-title">
        <!-- 搜索框 -->
        <div class="searchWrap">
          <van-row class="aic">
            <van-col span="20" class="fontSize30 color3 aic">
              <span class="">时间查询</span>
              
              <van-button type="default" size="small" v-for="(item,index) in filterBtns" :key="index" :disabled="index==2?true:false"
                class="pl20 pr20 marginLeft" :color='btnActive == item.status ?"#1989fa":""'
                @click="filterBtnClick(item,index)">
                {{item.name}}
              </van-button>
            </van-col>
            <van-col span="4" class="text-right aic">
              <van-button size="small" type="info" @click="search" :disabled="btnActive||searchValue?false:true" style="width:100%">查询</van-button>
            </van-col>
          </van-row>
          <div class="mt10 search_field">
            <van-row class="aic">
              <van-col span="20 aic">
                <van-field readonly clickable name="calendar" :value="searchValue" label="" placeholder="选择时间"
                  @click="showCalendar = true">
                </van-field>
              </van-col>
              <van-col span="4" class="text-right aic">
                <van-button size="small" type="info" @click="reset" style="width:100%">重置</van-button>
              </van-col>
            </van-row>
            <van-calendar type="range" :max-range="30" v-model="showCalendar" @confirm="dateOnConfirm" color="#024ee0"
              :min-date="minDate" :max-date="maxDate" :default-date="isReset?null:range"/>
          </div>
        </div>
        <div class="orderStatus mt20 pl20">
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <div class="text-center" v-if="noData">暂无数据</div>
            <van-list v-if="stepList.length>0" v-model="loading" :finished="finished" :immediate-check="false"
              :offset="10" finished-text="我也是有底线的" @load="onLoad">
              
              <div class="flex stepContent" v-for="(item, index) in stepList" :key="index"
                :class="index==0?'ship-active':''">
                <div class="stepdiv">
                  <span class="childradius mr20" v-if="index==0"></span>
                  <span v-else class="mr30"></span>
                  <span class="ship-text van-ellipsis shipNameWidth">{{item.port}}</span>
                </div>
                <span class="ship-time">{{item.createTime}}</span>
              </div>
            </van-list>
          </van-pull-refresh>
 
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>