一、监听图层点击事件
/**
* 监听图层
* @param {地图对象} map
* @param {监听的图层类型} layerType
* @param {回调事件} listener
*/
export function layerClick(map,layerType, listener) {
map.on("singleclick", (e) => {
map.forEachLayerAtPixel(
e.pixel,
() => {
console.log('图层点击')
listener(e)
},
{
layerFilter: (e) => {
let properties = e.getProperties()
return properties.type === layerType
},
hitTolerance: 200,
}
);
});
}
二、监听特征点击事件
/**
* 监听特征
* @param {地图对象} map
* @param {监听的图层类型} layerType
* @param {回调事件} listener
*/
export function featureClick(map,layerType, listener) {
/**
* 这种方式会把指定范围内所有的特性都循环一遍。
*/
// map.on("singleclick", (e) => {
// map.forEachFeatureAtPixel(
// e.pixel,
// (feature,layer) => {
// console.log('特征点击')
// listener(feature, layer)
// },
// {
// layerFilter: (e) => {
// let properties = e.getProperties()
// return properties.type === layerType
// },
// hitTolerance: 0,
// }
// );
// });
/**
* 这种方式只会查询当前点击的特性,如果点击的不是特性,将查不到结果,并不是范围内的。
*/
let select = new Select();
map.addInteraction(select)
select.on('select', (e) => {
let features = e.target.getFeatures().getArray()
if (features.length > 0) {
let feature = features[0]
listener(feature.getProperties())
}
})
}