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采用面向對象方式開發(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?3中使用OpenLayers加載GPX數(shù)據(jù)并顯示圖形效果
- vue+openlayers+nodejs+postgis實現(xiàn)軌跡運動效果
- Vue使用openlayers加載天地圖
- Vue+OpenLayers?創(chuàng)建地圖并顯示鼠標所在經(jīng)緯度(完整代碼)
- vue?openlayers實現(xiàn)臺風軌跡示例詳解
- vue利用openlayers實現(xiàn)動態(tài)軌跡
- Vue結合openlayers按照經(jīng)緯度坐標實現(xiàn)錨地標記及繪制多邊形區(qū)域
- Vue利用openlayers實現(xiàn)點擊彈窗的方法詳解
- Vue使用openlayers實現(xiàn)繪制圓形和多邊形
- 在Vue 3中使用OpenLayers讀取WKB數(shù)據(jù)并顯示圖形效果
相關文章
這篇文章主要為大家介紹了van-cell如何使用插槽詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-12-12
在vue中對數(shù)組值變化的監(jiān)聽與重新響應渲染操作
這篇文章主要介紹了在vue中對數(shù)組值變化的監(jiān)聽與重新響應渲染操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了VUE?axios每次請求添加時間戳問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
組件化開發(fā)能大幅提高應用的開發(fā)效率、測試性、復用性等,下面這篇文章主要給大家介紹了關于通用vue組件化展示列表數(shù)據(jù)的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細介紹了基于Vant UI框架實現(xiàn)時間段選擇器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了Vue 電商后臺管理項目階段性總結，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08
這篇文章主要給大家介紹了關于Vue生命周期的那些事,在使用vue開發(fā)過程中經(jīng)常會接觸到生命周期的問題,但對于每個鉤子函數(shù)都做了什么,應用場景比較模糊,希望通過這次梳理讓自己清楚一些,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vue如何下載本地pdf文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
關于element-ui的隱藏組件el-scrollbar的使用
這篇文章主要介紹了關于element-ui的隱藏組件el-scrollbar的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要為大家介紹了手寫一個vite插件教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06