openlayers如何使用（五）叠加层的应用_openlayers地图多个overlay叠加如何平铺展示

在地图中最常见的功能就是点击出现弹出框来展示信息，这个功能是怎么实现的呢?
弹出框使用的方法就是地图中的叠加层（overlay）
① 创建叠加层
我们将叠加层使用组件的方法引入到地图页面中来

// 点元素叠加层
<MapData ref="mapData" :mapData = "this.mapData"/>
// 线元素叠加层
<MapDataLine ref="mapData_Line" :mapData = "this.mapData"/>
1
2
3
4

② 传值
传值就是最基础的父子组件的传值，在子组件中去接收，注意定义接受的数据类型

props:{
	mapData:Object,
},
1
2
3

传好值后我们就要去创建叠加层了

③ 创建叠加层

// 设置节点弹框位置
setInfoPosition(points){
	// 设置显示坐标
	let position = fromLonLat([points.Longitude,points.Latitude]);
	this.mapOverlay.setPosition(position);
},
// 创建叠加层
addOverlay() {
	const overlay = new Overlay({
		element: this.$refs.mapData.$el, // 绑定元素的dom
		autoPan: true,
		autoPanAnimation: {
			duration: 250,
		},
	});
	// 设置初始位置，undefined则为不显示
	overlay.setPosition(undefined);
	this.mapOverlay = overlay;
	// 将叠加层加入地图中
	this.map.addOverlay(overlay);
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

创建好叠加层后，初始的状态是不显示的，我们只需要在元素对应的事件中去调用一下这个方法即可显示叠加层

④ 在事件中应用

mapPointsClick: function (feature) {
	let points = feature.get("points");
	if (points.Type != 3) {
		// 点击显示在该点的坐标处
		this.setInfoPosition(points);
		this.mapLineOverlay.setPosition(undefined);
	}
	this.mapData = points;
	console.log('click', feature);
	if (feature.values_.points.Type === 3) {
		return;
	} else {
		// 这里我掉了一个接口将叠加层中展示的数据进行转义
		Api.getdetail('point',feature.values_.points.Code).then(res=>{
			this.mapData = JSON.parse(res.Data).Detail
		})
	}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

⑤ 点击其他位置隐藏弹框
在点击元素时显示弹框，点击其他地方是应隐藏弹框
只需要在创建事件的时候多加一步判断即可

// 点击元素本身
if (feature) {
	let execName = featureObj.typeJudge(feature) + "Click";
	featureObj[execName].apply(that, [feature]);
	feature.set('mouse',coordinate)
	// else就是点击非元素单位，向setPosition传入undefined即可隐藏
} else {
	that.mapOverlay.setPosition(undefined);
	that.mapLineOverlay.setPosition(undefined);
}
1
2
3
4
5
6
7
8
9
10

这样就完成了点击显示弹出框的功能