1、地图点击事件
单击:
/* 监听地图的单击事件,如果点击的是矢量元素则进行相关操作 */
// selfMap.OlMap===map
selfMap.OlMap.on('click', (evt) => {
/* 检测视口中的矢量特征 */
const featureInfo = selfMap.OlMap.forEachFeatureAtPixel(evt.pixel, (feature, layerVetor) => feature);
console.log(featureInfo);
if (featureInfo) {
// console.log(featureInfo.get('point'));
dkqj();
}
});
双击:
// mapMode.ol===map
mapMode.ol.on('dblclick', (a) => {
/* // eslint-disable-next-line prefer-destructuring
pointLngLat.latitude = a.frameState.extent[1];
// eslint-disable-next-line prefer-destructuring
pointLngLat.longitude = a.frameState.extent[0]; */
const { extent } = a.frameState;
/* 范围坐标 */
geomWKT = `POLYGON((${extent[0]} ${extent[1]},${extent[0]} ${extent[3]},${extent[2]} ${extent[3]},${extent[2]} ${extent[1]},${extent[0]} ${extent[1]}))`;
tolerance = mapMode.ol.getView().getResolution() * 4;
getThemeTree();
drawerVisible.value = !drawerVisible.value;
});
2、特征要素选择Select
/* 监听特征元素(消防报警点)的点击事件 */
const select = new Select();
selfMap.OlMap.addInteraction(select);
select.on('select', (e) => {
// console.log(e.selected[0].get('name')); //已选择的Feature的name属性
const features = e.target.getFeatures().getArray();
console.log(features);
if (features.length > 0) {
// const feature = features[0];
console.log('点击特征元素');
dkqj();
}
});
网友评论