openlayers如何使用（四）地图中事件的添加

我们之前完成了地图中点线的创建，那如何给点和线去添加事件呢？
我们可以单独去给他们添加事件，但我有一个更好的方法，可以同时让点和线都绑定事件

我们创建一个js文件用来封装事件

import featureObj from "../../common/feature";

① 注册一个地图点击事件

// 注册一个点击事件
clickOnMap(){
	let that = this;
	// 给整个地图添加点击事件
	this.map.on("click", function (ev) {
		// 获取像素
		let pixel = ev.pixel;
		// 获取坐标
		let coordinate = ev.coordinate;
		let feature = that.map.forEachFeatureAtPixel(pixel, function (feature) {
			return feature;
		});
		if (feature) {
			// 通过我们封装的typeJudge方法判断事件类型
			let execName = featureObj.typeJudge(feature) + "Click";
			featureObj[execName].apply(that, [feature]);
			feature.set('mouse',coordinate)
		} else {
			that.mapOverlay.setPosition(undefined);
			that.mapLineOverlay.setPosition(undefined);
		}
	});
},

我们给整个地图都添加了点击事件，现在不管是点击点或线，我们都可以得到相关的feature，最关键的一点就是之前我们在创建点线时，一定要把他们的数据传入到feature中，要不然会有报错

② 封装事件类型
通过feature中我们传入的名字来区分点与线的事件

let featureObj = {
    // feature 类型判定
    typeJudge: function (feature) {
        if (feature.get('mapPoints')) {
            return "mapPoints"
        } else if(feature.get('mapLines_QX')){
            return "mapLines_QX"
        } else if(feature.get('mapLines_GL')){
            return "mapLines_GL"
        } 
    },
    // 点击点的事件
    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的事件
    mapLines_QXClick: function (feature) {
        console.log('Line_QX', feature);
    },
    // 点击线段2的事件
    mapLines_GLClick: function (feature) {
        console.log('Line_GL', feature);
        let Line_GL = feature.get("data_GL");
        this.setInfoPosition_Line(feature);
        this.mapOverlay.setPosition(undefined);
        this.mapData = Line_GL;
        Api.getdetail('cable',Line_GL.CableCode).then(res=>{
            this.mapData = JSON.parse(res.Data).Detail
        })
    },
}
export default featureObj // 暴露方法

这样在点击地图的时候就可以通过判断类型来对点与线元素添加不同的事件，而我们也可以通过传入的feature来获取其中的数据