Vue openLayers實(shí)現(xiàn)圖層數(shù)據(jù)切換與加載流程詳解

更新時(shí)間：2022年09月07日 11:19:20 作者：船長在船上

OpenLayers是一個(gè)用于開發(fā)WebGIS客戶端的JavaScript包，最初基于BSD許可發(fā)行。OpenLayers是一個(gè)開源的項(xiàng)目，其設(shè)計(jì)之意是為互聯(lián)網(wǎng)客戶端提供強(qiáng)大的地圖展示功能，包括地圖數(shù)據(jù)顯示與相關(guān)操作，并具有靈活的擴(kuò)展機(jī)制

openlayers介紹

OpenLayers是一個(gè)用于開發(fā)WebGIS客戶端的JavaScript包。OpenLayers 支持的地圖來源包括Google Maps、Yahoo、 Map、微軟Virtual Earth 等，用戶還可以用簡單的圖片地圖作為背景圖，與其他的圖層在OpenLayers 中進(jìn)行疊加，在這一方面OpenLayers提供了非常多的選擇。OpenLayers采用面向?qū)ο蠓绞介_發(fā)。

OpenLayers 是一個(gè)專為Web GIS 客戶端開發(fā)提供的JavaScript 類庫包，用于實(shí)現(xiàn)標(biāo)準(zhǔn)格式發(fā)布的地圖數(shù)據(jù)訪問。

本篇文章介紹圖層設(shè)置航標(biāo)、港口碼頭、錨地停泊區(qū)數(shù)據(jù)的獲取，以及以天地圖作為底圖添加到上航道圖層上面；點(diǎn)擊圖層可以選擇控制圖層數(shù)據(jù)隱藏顯示以及數(shù)據(jù)的處理。

技術(shù)應(yīng)用：vue + vant-ui + openlayers

一、實(shí)現(xiàn)效果預(yù)覽

二、代碼實(shí)現(xiàn)

1.圖層設(shè)置：

<div class="coupon" @click="handleLayer">
              <img src="../../assets/img/layerIcon.png"/>
              <div class=" fontSize22 color3">圖層設(shè)置</div>
</div>
<!-- 圖層切換 -->
<van-popup v-model="showTabLayer" round position="bottom" :style="{width:'100%'}" closeable class="shipPopup">
        <div class=" color3 fontSize30 pl30 pt30 text-center fw600">功能設(shè)置</div>
        <div class=" color6 fontSize30 pl30 pt30">功能顯示</div>
        <van-cell-group :border="0" class="mt20 pl30 pr30 mb20">
          <van-cell :title="item.title" :icon="item.icon" class="optionsCell" v-for="(item,index) in shipLayerList" :key="index">
            <template #default>
              <van-switch v-model="item.checked" size="18px" @change="handleChange(item)"/>
            </template>
          </van-cell>
        </van-cell-group>
</van-popup>

.coupon{
    position:absolute;
    right:30px;
    top:200px;
    z-index:111;
    background: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.15);
    border-radius: .28rem;
    padding:0px 10px 10px;
    img{
      display: block;
      width: 70px;
      height: 70px;
    }  
  }

handleLayer(){
      	this.showTabLayer = !this.showTabLayer;
},

2.data定義圖層顯示列表數(shù)據(jù)shipLayerList：

shipLayerList:[
        {title:"航標(biāo)",checked:true,icon:require("../../assets/img/hb.png"),name:"beaconsVectorLayer"},
        {title:"港口碼頭",checked:true,icon:require("../../assets/img/gk.png"),name:"portVectorLayer"},
        {title:"錨地",checked:true,icon:require("../../assets/img/md.png"),name:"anchorageVectorLayer"},
        {title:"停泊區(qū)",checked:true,icon:require("../../assets/img/tbq.png"),name:"zoneVectorLayer"}
]

3.mounted加載數(shù)據(jù)：

mounted(){
	this.initMap(); //加載地圖，默認(rèn)加載航道圖層
    //this.getAllShip();//船舶數(shù)據(jù)圖層數(shù)據(jù)
    this.getBeaconsData();//航標(biāo)圖層數(shù)據(jù)
    this.getPortData();//港口圖層數(shù)據(jù)
}

這里主要講航標(biāo)、港口圖層，其他的圖層方法和數(shù)據(jù)獲取類似。

let arr = this.map.getView().calculateExtent(this.map.getSize());//獲取左下角和右上角經(jīng)緯度

這里的方法是為了解決數(shù)據(jù)太多，要利用頁面的對(duì)角經(jīng)緯度顯示獲取可視區(qū)域的數(shù)據(jù)。后臺(tái)根據(jù)傳遞的四個(gè)點(diǎn)的參數(shù)來獲取數(shù)據(jù)。

4.methods中定義:

初始化方法

initMap(){
	//監(jiān)聽地圖滑動(dòng)，動(dòng)態(tài)顯示圖層
	this.map.addEventListener("moveend", this.showView);
}

5.動(dòng)態(tài)顯示圖層方法

    showView() {
      this.positionVector = true;
      this.map.removeLayer(this.positionVectorLayer);
      let zoom = this.map.getView().getZoom();
      console.log(zoom,"縮放")
      this.map.getLayers().getArray().forEach((item) => {
          // 航標(biāo)
          if (item.get("name") == "beaconsVectorLayer") {
            this.shipLayerList.forEach((data) => {
              if (data.name == "beaconsVectorLayer" && !data.checked) {
                return;
              } else if (data.name == "beaconsVectorLayer" && data.checked) {
                if (zoom>13) {
                  item.setVisible(true);
                  this.getBeaconsData();
                } else {
                  item.setVisible(false);
                }
              }
            });
          }
          if (item.get("name") == "portVectorLayer") {
            // 港口
            this.shipLayerList.forEach((data) => {
              if (data.name == "portVectorLayer" && !data.checked) {
                return;
              } else if (data.name == "portVectorLayer" && data.checked) {
                if (zoom>13) {
                  item.setVisible(true);
                  this.getPortData();
                } else {
                  this.shopPopup = false;
                  item.setVisible(false);
                }
              }
            });
          }
        });
    },

6.手動(dòng)調(diào)整圖層，點(diǎn)擊圖層顯示切換

    handleChange() {
      // this.showTabLayer = false;
      let zoom = this.map.getView().getZoom();
      var beaconsVectorLayer;
      var portVectorLayer;
      this.map.getLayers().getArray().forEach((data) => {
          // 航標(biāo)
          if (data.get("name") == "beaconsVectorLayer") {
            beaconsVectorLayer = data;
          }
          // 港口
          if (data.get("name") == "portVectorLayer") {
            portVectorLayer = data;
          }
      });
      this.shipLayerList.forEach((item) => {
        if (item.name == "beaconsVectorLayer" && !item.checked) {
          beaconsVectorLayer.setVisible(false);
        } else if (item.name == "beaconsVectorLayer" && item.checked) {
          if (zoom > 13) {
            this.getBeaconsData();
            beaconsVectorLayer.setVisible(true);
          }
        } else if (item.name == "portVectorLayer" && !item.checked) {
          portVectorLayer.setVisible(false);
        } else if (item.name == "portVectorLayer" && item.checked) {
          if (zoom > 13) {
            this.getPortData();
            portVectorLayer.setVisible(true);
          }
        }
      });
    },

7.獲取航標(biāo)數(shù)據(jù)，獲取港口數(shù)據(jù)是一樣的操作，參照航標(biāo)數(shù)據(jù)方法獲取

    getBeaconsData(){
      let arr = this.map.getView().calculateExtent(this.map.getSize());//獲取左下角和右上角經(jīng)緯度
      let params = {
        leftLongitude: arr[0],
        leftLatitude: arr[1],
        rightLongitude: arr[2],
        rightLatitude: arr[3],
      }
      this.beaconsFeatures = [];
      this.beaconsMarker = [];
      homePageBeaconsData(params).then(res=>{
        if(res.code == 200){
          if(res.data.length > 0){
              this.beaconsFeatures = res.data;
              //定義是否存在，如果存在刪除圖層，防止圖層數(shù)據(jù)重復(fù)
              if(this.beaconsVector){
                this.map.removeLayer(this.beaconsVectorLayer);
              }
              //添加需要的數(shù)據(jù)信息
              this.beaconsFeatures.map((item, index) => {
                  this.beaconsMarker.push(
                      new Feature({
                        geometry: new Point([item.longitude, item.latitude], "XY"),
                        name:item.name,
                        beaconsIcon:item.beaconsIcon,
                        beaconsType:item.beaconsType,
                        index: index
                      })
                  );
              });
              let beaconsIconStyles = [];
              //圖標(biāo)樣式添加
              this.beaconsMarker.forEach(item => {
                    beaconsIconStyles.push(
                        new Style({
                          image: new Icon({
                            src: decodeURI(item.values_.beaconsIcon),
                            // scale: 0.6 * (this.zoom -13),
                            scale: 0.6
                          }),
                          //設(shè)置圖標(biāo)下方文字顯示
                          // text: new Text({
                          //   text:item.values_.name,
                          //   font:"12px Microsoft YaHei",
                          //   offsetY:10,
                          //   textAlign:"center",
                          //   fill: new Fill({
                          //     color:"#000",
                          //   }),
                          //   stroke: new Stroke({
                          //     color:"#fff",
                          //     width: 3
                          //   })
                          // })
                        })
                    );   
              });
              let beaconsVectorSource = new SourceVec({
                features: this.beaconsMarker
              });
              this.beaconsVectorLayer = new LayerVec({
                name: "beaconsVectorLayer",//設(shè)置圖層名字，方便獲取到該圖層
                source: beaconsVectorSource,
                //樣式
                style: (feature)=> {
                  let iconStyle = beaconsIconStyles[feature.values_.index];
                  return [iconStyle];
                },
                zIndex: 10
              });
              //圖層添加到地圖上
              this.map.addLayer(this.beaconsVectorLayer);
              this.beaconsVector = true;
          }
        }
      })
    },

8.beforeDestroy中記得移除監(jiān)聽

beforeDestroy(){
	this.map.removeEventListener("moveend", this.showView);
}

到此這篇關(guān)于Vue openLayers實(shí)現(xiàn)圖層數(shù)據(jù)切換與加載流程詳解的文章就介紹到這了,更多相關(guān)Vue openLayers 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: