Vue应用openLayers实现图层数据切换显示，图层加载
发布时间：2023-09-04 19:00
openlayers介绍
OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLayers 中进行叠加，在这一方面OpenLayers提供了非常多的选择。OpenLayers采用面向对象方式开发。
OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。
本篇文章介绍图层设置航标、港口码头、锚地停泊区数据的获取，以及以天地图作为底图添加到上航道图层上面；点击图层可以选择控制图层数据隐藏显示以及数据的处理。.
技术应用：vue + vant-ui + openlayers
实现效果预览
代码实现
图层设置：
图层设置
功能设置
功能显示
.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;
},
data定义图层显示列表数据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:"停泊区",checked:true,icon:require("../../assets/img/tbq.png"),name:"zoneVectorLayer"}
]
mounted加载数据：
mounted(){
this.initMap(); //加载地图，默认加载航道图层
//this.getAllShip();//船舶数据图层数据
this.getBeaconsData();//航标图层数据
this.getPortData();//港口图层数据
}
这里主要讲航标、港口图层，其他的图层方法和数据获取类似。
let arr = this.map.getView().calculateExtent(this.map.getSize());//获取左下角和右上角经纬度
这里的方法是为了解决数据太多，要利用页面的对角经纬度显示获取可视区域的数据。后台根据传递的四个点的参数来获取数据。
methods中定义:
初始化方法
initMap(){
//监听地图滑动，动态显示图层
this.map.addEventListener("moveend", this.showView);
}
动态显示图层方法
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);
}
}
});
}
});
},
手动调整图层，点击图层显示切换
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);
}
}
});
},
获取航标数据，获取港口数据是一样的操作，参照航标数据方法获取
getBeaconsData(){
let arr = this.map.getView().calculateExtent(this.map.getSize());//获取左下角和右上角经纬度
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;
//定义是否存在，如果存在删除图层，防止图层数据重复
if(this.beaconsVector){
this.map.removeLayer(this.beaconsVectorLayer);
}
//添加需要的数据信息
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;
}
}
})
},
beforeDestroy中记得移除监听
beforeDestroy(){
this.map.removeEventListener("moveend", this.showView);
}
有疑问可以留言，评论。
看完文章，感谢各位支持一下，不胜感激！
后面会继续记录前端面试题，持续更新；
心态放松，才能让精神更饱满；沉淀自己，善于学习；知识在于积累，更是一笔财富。时间和机会，是留给有准备的人。
✨ ⭐️ 看完文章，感谢各位支持一下呗！