vue3+openlayers+typescript问题总结01

画线之后，如何给feature添加自定义属性？

例如：const feature = e.feature,给feature添加自己想要的属性，直接feature.customInfo = '123',这样直接赋值，总感觉不好，feature.set('customInfo','123'),这样虽然是它自己的一个方法赋值，但是有同事说这样监听不到变化，不能及时更新。

如何统一添加feature的方法，例如click、mouseMOve等，又如何在页面监听到点击的元素是自己想要的那个？

目前的方式是这样的，通过上面的给属性赋值，在绘制元素之后就通过 在vecSource 层面通过在vecSource.on('addFeature',(e)=>{}) 可以监听到绘制结束 ,然后就可以 e.feature.source = 'fixedPrefix123',给一个固定前缀, 然后在事件里面 getFeature()获取所有feature是一个数组，通过find方法找到自己当前点击的元素，个人感觉这样太不优雅。

如何在右键点击时弹出menu菜单？

首先要确定鼠标是在当前元素上，然后触发事件，我用的时vue3-openlayers这个前端框架，有一个右键的事件

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

const useHoverFeature = () => {
    const hoverFeature = ref<string>() ;
    const eventListener:MapEventListener = {
        [FeatureEventType.MOUSE_MOVE]:(param:BaseEvent) => {
            param.event.preventDefault();
            if(param.source.indexOf(featureType) > 0) {
                hoverFeature.value = param.source.replace(`${feature}:`,'')
                return;
            }
            hoverFeature.value = undefined;
        }
    }
    //自己定义的监听地图的方法
    useMapEventListener(eventListener)
    return hoverFeature
}

上面有了监听的方法，接下来监听hoverFeature 鼠标是否移动到我需要右键的物体上

watch(hoverFeature ,(id) => {
    if(id) {
        //去触发右键的那个事件，好像是vue3-openlayers自己的
        eventBus.emit(FeatureEventType.CONTEXT_MENU,{menu:menuItems(id)})
        return 
    }
    //没有移动到我想要的物体上时
    eventBus.emit(FeatureEventtype.CONTEXT_MENU,{menu:[],isDelay:true})
})

下一步构建我的右键菜单

const menuItem = (id:string):ContextMenuItem[] => {
    return [
    //一个json就是一个列表项
        {
            text:'我的右键',
            callback:e => {
                // 自己的业务
            }
        }   
    ]
}

点击侧边栏的图标，将图标添加到地图的中间，并且在静态图和gis图时，都默认在地图的中间？

首先居中的坐标是通过地图自己的方法获取的 类似于map.getCenter() 点图标时还得要加上自定义属性，图标的点击事件FeatureEventType 自己定义的名称，在地图中还是得要用到点击当前元素的功能，图标定义的枚举名称还得又一定的讲究，要根据绑定的设备是否报警来展示图标颜色，切换图标，点击图标之后，层级还有一定的关系，是否要重叠，在地图中的图标还需要支持随意拖动，不影响地图上的其他图元。

明天继续=====