vue3+openlayers+typescript问题总结02

定义类型的重要性？

当我要在左侧点击按钮时，要在其它地方监听到点击事件，并且是我想要点击按钮的监听事件。这里用到了定义类型、定义方法、抛出事件

import {FeatureLike} from 'ol/Feature';
import {MapBrowserEvent} from 'ol';
import {Emitter} from 'mitt';

// 定义eventBus
const eventBusKey = Symbol('eventMapKey') as InjectionKey<Emitter<FeatureEvents>>
//图层类型
enum LayerType = {
    CUSTOM_ELEMENT = 'custom_element'
}
//事件类型
enum FeatureEventType = {
    CLICK = 'click'
}

interface BaseEvent {
    source:strng;
    event:MapBrowserEvent<any>;
    propagetionStopped:boolean;
    feature?:FeatureLike;
}

事件及参数定义
type FeatureEvents = {
    [FeatureEventType.CLICK]:BaseEvent;
}

const eventBus = inject(eventBusKey)

// 需要给其它组件的参数
eventBus.emit(FeatureEventType.CLICK,'传递的参数')

//其它组件监听
//在地图中需要挂监听地图的事件
type MapEventListener = {
    [k in Key]?:(param:FeatureEvents[k]) => void
}

const useMapEventListener = (eventListeners:MapEventListener) => {
    for(const key in eventListeners) {
        eventBus.on(key, async param => {
            await eventListeners[key](param)
        })
    }
    
    tryOnMounted(() => {
        for(const key in eventListeners) {
            eventBus.off(key, eventListeners[key])
        }
    })
}

useMapEventListener({
    [FeatureEventType.CLICK]:(event:BaseEvent) => {
        //这里就拿到点击事件 -- featureType 是自己在地图上添加一个元素之后当前类型
        if(event.source.indexOf(featureType) >= 0) {
            //确认这里就是点击我想要的元素
            ...是自己的业务
        }
    }
})