Vue openLayers實現(xiàn)圖層數(shù)據(jù)切換與加載流程詳解
更新時間：2022年09月07日 11:19:20 作者：船長在船上
OpenLayers是一個用于開發(fā)WebGIS客戶端的JavaScript包，最初基于BSD許可發(fā)行。OpenLayers是一個開源的項目，其設計之意是為互聯(lián)網(wǎng)客戶端提供強大的地圖展示功能，包括地圖數(shù)據(jù)顯示與相關操作，并具有靈活的擴展機制
openlayers介紹
OpenLayers是一個用于開發(fā)WebGIS客戶端的JavaScript包。OpenLayers 支持的地圖來源包括Google Maps、Yahoo、 Map、微軟Virtual Earth 等，用戶還可以用簡單的圖片地圖作為背景圖，與其他的圖層在OpenLayers 中進行疊加，在這一方面OpenLayers提供了非常多的選擇。OpenLayers采用面向?qū)ο蠓绞介_發(fā)。
OpenLayers 是一個專為Web GIS 客戶端開發(fā)提供的JavaScript 類庫包，用于實現(xiàn)標準格式發(fā)布的地圖數(shù)據(jù)訪問。
本篇文章介紹圖層設置航標、港口碼頭、錨地停泊區(qū)數(shù)據(jù)的獲取，以及以天地圖作為底圖添加到上航道圖層上面；點擊圖層可以選擇控制圖層數(shù)據(jù)隱藏顯示以及數(shù)據(jù)的處理。
技術應用：vue + vant-ui + openlayers
一、實現(xiàn)效果預覽
二、代碼實現(xiàn)
1.圖層設置：
<div class="coupon" @click="handleLayer">
<img src="../../assets/img/layerIcon.png"/>
<div class=" fontSize22 color3">圖層設置</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">功能設置</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:"航標",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(); //加載地圖，默認加載航道圖層
//this.getAllShip();//船舶數(shù)據(jù)圖層數(shù)據(jù)
this.getBeaconsData();//航標圖層數(shù)據(jù)
this.getPortData();//港口圖層數(shù)據(jù)
}
這里主要講航標、港口圖層，其他的圖層方法和數(shù)據(jù)獲取類似。
let arr = this.map.getView().calculateExtent(this.map.getSize());//獲取左下角和右上角經(jīng)緯度
這里的方法是為了解決數(shù)據(jù)太多，要利用頁面的對角經(jīng)緯度顯示獲取可視區(qū)域的數(shù)據(jù)。后臺根據(jù)傳遞的四個點的參數(shù)來獲取數(shù)據(jù)。
4.methods中定義:
初始化方法
initMap(){
//監(jiān)聽地圖滑動，動態(tài)顯示圖層
this.map.addEventListener("moveend", this.showView);
}
5.動態(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) => {
// 航標
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.手動調(diào)整圖層，點擊圖層顯示切換
handleChange() {
// this.showTabLayer = false;
let zoom = this.map.getView().getZoom();
var beaconsVectorLayer;
var portVectorLayer;
this.map.getLayers().getArray().forEach((data) => {
// 航標
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.獲取航標數(shù)據(jù)，獲取港口數(shù)據(jù)是一樣的操作，參照航標數(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ù)重復
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 = [];
//圖標樣式添加
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
}),
//設置圖標下方文字顯示
// 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",//設置圖層名字，方便獲取到該圖層
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);
}
到此這篇關于Vue openLayers實現(xiàn)圖層數(shù)據(jù)切換與加載流程詳解的文章就介紹到這了,更多相關Vue openLayers 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue.js 是一套構建用戶界面的框架，**只關注視圖層**，它不僅易于上手，還便于與第三方庫或既有項目整合。這篇文章主要介紹了vue 的基本語法和常用指令,需要的朋友可以參考下2019-07-07
基于Vue3自定義實現(xiàn)圖片翻轉(zhuǎn)預覽功能
這篇文章主要為大家詳細介紹了如何基于Vue3自定義實現(xiàn)簡單的圖片翻轉(zhuǎn)預覽功能,文中的示例代碼講解詳細,具有一定的學習價值,有需要的小伙伴可以參考一下2023-10-10
Vue3?echarts組件化及使用hook進行resize方式
這篇文章主要介紹了Vue3?echarts組件化及使用hook進行resize方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue移動端html5頁面根據(jù)屏幕適配的四種解決方法
在vue移動端h5頁面當中，其中適配是經(jīng)常會遇到的問題，這塊主要有四個方法可以適用。這篇文章主要介紹了vue移動端h5頁面根據(jù)屏幕適配的四種方案 ,需要的朋友可以參考下2018-10-10
本篇文章主要介紹了Vue.js源碼之事件機制，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
最近接手做一個前端小項目，基于vue實現(xiàn)答題功能，具體功能有判斷用戶是否答對，答對的話跳到下一題，答錯的話彈窗告訴用戶有錯題，請重新答題，功能非常人性化，對實現(xiàn)代碼感興趣的朋友一起看看吧2021-06-06
基于Vue實現(xiàn)圖片在指定區(qū)域內(nèi)移動的思路詳解
這篇文章主要介紹了基于Vue實現(xiàn)圖片在指定區(qū)域內(nèi)移動，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue?實現(xiàn)彈窗關閉后刷新效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue element 生成無線級左側菜單的實現(xiàn)代碼
這篇文章主要介紹了vue element 生成無線級左側菜單的實現(xiàn)代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
vuex是一個專門為vue.js設計的集中式狀態(tài)管理架構。這篇文章主要介紹了全站最詳細的Vuex教程,需要的朋友可以參考下2018-04-04