OpenLayers—识别要素（鼠标移动高亮效果）

giser__Z

已于 2024-03-01 16:07:20 修改

阅读量550

点赞数 8

分类专栏： WebGIS # OpenLayers 文章标签：前端 javascript

于 2024-02-25 14:22:43 首次发布

本文链接：https://blog.csdn.net/m0_73795032/article/details/136280155

版权

WebGIS 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

OpenLayers

6 篇文章 0 订阅

订阅专栏

本文介绍了在OpenLayers中使用两种方法实现地图交互：一种是通过`Select`交互事件进行要素选择，另一种是利用鼠标移动触发`featureHover`函数实现要素高亮。作者详细展示了关键代码和应用场景。

摘要由CSDN通过智能技术生成

两种思路：

1、通过OpenLayers自身交互事件

2、通过地图鼠标移动事件触发选择要素

第一种：

              const select = new ol.interaction.Select({
                    condition: ol.events.condition.pointerMove, //以某种状态选择要素，关键代码，默认点击选择要素
                    hitTolerance: 5 //设置容差
                });
                map.addInteraction(select);

也可以利用选择事件做一些操作

               select.on('select', function (e) {
                    if (e.selected.length > 0) { console.log('选中：', e.selected) }
                    else { console.log('取消选中！') }
                })

第二种：

 // 识别
        const hoverStyle = new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'green'
            }),
            stroke: new ol.style.Stroke({
                color: 'black',
                width: 5
            }),
            image: new ol.style.Circle({
                radius: 10,
                stroke: new ol.style.Stroke({
                    color: 'rgba(0,0,0,0.7)',
                }),
                fill: new ol.style.Fill({
                    color: 'green'
                })
            }),
        })
        let hoverFeature;
        function featureHover(e) {
            let features = map.getFeaturesAtPixel(e.pixel, { hitTolerance: 3 }) //getFeaturesAtPixel()获取与视口像素相交的所有元素，返回类型为数组类型
            if (features) {
                if (hoverFeature) {
                    hoverFeature.setStyle(undefined);
                    hoverFeature = null
                }
                hoverFeature = features[0];
                console.log(hoverFeature);
                hoverFeature.setStyle(hoverStyle2);
            }
            else {
                if (hoverFeature) {
                    hoverFeature.setStyle(undefined);
                }
            }
        }
        map.on('pointermove', featureHover);