OpenLayers学习笔记中级篇（六、地图交互）

关注

原创最新推荐文章于 2026-04-20 22:48:15 发布 1.4k 阅读 AI 写同款· GEO 优化 ›

OpenLayers学习——Style及StyleMap（二）参考官网例子，做一个随比例一起缩放的矢量符号的阅读详情

1、Feature选取之选中样式

<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>修改矢量地图</title>
    <link href="css/ol.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head>

<body>
	<div id="map2" style="width: 100%"></div>
<script type="text/javascript">
    var layer2 = new ol.layer.Vector({
        source: new ol.source.Vector(),
        // 注意：把feature上的style，直接移到layer上，避免直接在feature上设置style
        style: new ol.style.Style({
            image: new ol.style.Circle({
                radius: 10,
                fill: new ol.style.Fill({
                    color: 'red'
                })
            })
        })
    });
    var map2 = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }), 
          layer2
        ],
        target: 'map2',
        view: new ol.View({
          center: ol.proj.transform(
              [104, 30], 'EPSG:4326', 'EPSG:3857'),
          zoom: 10
        })
    });

    // 在地图上添加一个圆
    var circle2 = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform(
              [104, 30], 'EPSG:4326', 'EPSG:3857'))
    })
    // 此处不再为feature设置style
    layer2.getSource().addFeature(circle2);

    // 添加一个用于选择Feature的交互方式
    map2.addInteraction(new ol.interaction.Select({
        // 设置选中后的style
        style: new ol.style.Style({
            image: new ol.style.Circle({
                radius: 10,
                fill: new ol.style.Fill({
                    color: 'blue'
                })
            })
        })
    }));
</script>
</body>

</html>

大家可以自己运行看一下效果！

2、Feature选取之条件过滤

涉及到选取，自然会有各种条件用于过滤，比如是鼠标左键单击，还是双击，是可以选取地图上的任意feature，还是某一类的feature。对于这些需求，ol.interaction.Select都能满足，在API的文档里面就有相关的参数设置，下面就是一些简单的使用示例。

一、改变默认的单击选取方式

默认情况下，是支持鼠标左键单击选取feature的，在地图上其他地方点击一下，就取消选取了，但这并不是定死的选取方式，你完全可以自定义。比如鼠标移动到feature上，就选取了，试试：

<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>修改矢量地图</title>
    <link href="css/ol.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head>

<body>
	<div id="map2" style="width: 100%"></div>
<script type="text/javascript">
    var layer2 = new ol.layer.Vector({
        source: new ol.source.Vector(),
        // 注意：把feature上的style，直接移到layer上，避免直接在feature上设置style
        style: new ol.style.Style({
            image: new ol.style.Circle({
                radius: 10,
                fill: new ol.style.Fill({
                    color: 'red'
                })
            })
        })
    });
    var map2 = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }), 
          layer2
        ],
        target: 'map2',
        view: new ol.View({
          center: ol.proj.transform(
              [104, 30], 'EPSG:4326', 'EPSG:3857'),
          zoom: 10
        })
    });

    // 在地图上添加一个圆
    var circle2 = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform(
              [104, 30], 'EPSG:4326', 'EPSG:3857'))
    })
    // 此处不再为feature设置style
    layer2.getSource().addFeature(circle2);

    // 添加一个用于选择Feature的交互方式
    map2.addInteraction(new ol.interaction.Select({
    	 condition: ol.events.condition.pointerMove,
        // 设置选中后的style
        style: new ol.style.Style({
            image: new ol.style.Circle({
                radius: 10,
                fill: new ol.style.Fill({
                    color: 'blue'
                })
            })
        })
    }));
</script>
</body>

</html>

大家可以测试一下，在我们把鼠标移动feature时会改变feature的颜色，移开时会回复原来的颜色！

二、我们也可以直接对feature过滤

<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>修改矢量地图</title>
    <link href="css/ol.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head>

<body>
	<div id="map2" style="width: 100%"></div>
<script type="text/javascript">
    // 创建一个用于存放circle的layer
    var circleLayer = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: new ol.style.Style({
            image: new ol.style.Circle({
                radius: 10,
                fill: new ol.style.Fill({
                    color: 'red'
                })
            })
        })
    });

    // 创建一个用于存放star的layer
    var starLayer = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: new ol.style.Style({
            image: new ol.style.RegularShape({
                points: 5,
                radius1: 20,
                radius2: 10,
                fill: new ol.style.Fill({
                    color: 'red'
                })
            })
        })
    });

    var map2 = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }), 
          circleLayer, starLayer
        ],
        target: 'map2',
        view: new ol.View({
          center: ol.proj.transform(
              [104, 30], 'EPSG:4326', 'EPSG:3857'),
          zoom: 10
        })
    });

    // 在地图上添加一个圆
    var circle1 = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform(
              [104, 30], 'EPSG:4326', 'EPSG:3857'))
    })
    circleLayer.getSource().addFeature(circle1);

    // 在地图上添加一个五星
    var star = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform(
              [104.06, 30.05], 'EPSG:4326', 'EPSG:3857'))
    })
    starLayer.getSource().addFeature(star);

    // 添加一个用于选择Feature的交互方式
    map2.addInteraction(new ol.interaction.Select({
        style: new ol.style.Style({
            image: new ol.style.Circle({
                radius: 10,
                fill: new ol.style.Fill({
                    color: 'blue'
                })
            })
        }),
        // 关键： 设置过了条件，可以用feature来写过滤，也可以用layer来写过滤
        filter: function(feature, layer){
            return layer === circleLayer;
        }
    }));
</script>
</body>

</html>

先看一下效果：

我们只希望用户能选取圆形，而不能选取五星，而上面的功能完美契合！

3、取消feature选中

取消选中有两种方式，一种是在界面上以交互的方式取消选中，一种是用代码的方式取消选中，下面就分别介绍一下：

交互方式取消选中

如果是采用的默认的方式选取feature，即使用鼠标左键单击feature就可选取。那么这种交互方式下，要取消选中，则只需要同样使用鼠标左键，在地图其他地方单击一下，就可取消选中。

如果采用的是自定义的方式选取feature，那么要取消选中，交互方式还是一样的，只要目标不再是已选中的feature就行，就能取消选中。比如要素选取之条件过滤中，采用了自定义的鼠标移入feature就可选中，要取消选中，只需要把鼠标移出feature即可。

代码方式取消选中

<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <title>修改矢量地图</title>
    <link href="css/ol.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head>

<body>
	<div id="map" style="width: 100%"></div>
<input type="button" value="取消选中" onclick="unselectFeature();"></input>
<script type="text/javascript">
    var layer = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: new ol.style.Style({
            image: new ol.style.Circle({
                radius: 10,
                fill: new ol.style.Fill({
                    color: 'red'
                })
            })
        })
    });
    var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          }), 
          layer
        ],
        target: 'map',
        view: new ol.View({
          center: ol.proj.transform(
              [104, 30], 'EPSG:4326', 'EPSG:3857'),
          zoom: 10
        })
    });

    // 在地图上添加一个圆
    var circle = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform(
              [104, 30], 'EPSG:4326', 'EPSG:3857'))
    })
    layer.getSource().addFeature(circle);

    // 添加一个用于选择Feature的交互方式
    var clickSelect = new ol.interaction.Select({
        style: new ol.style.Style({
            image: new ol.style.Circle({
                radius: 10,
                fill: new ol.style.Fill({
                    color: 'blue'
                })
            })
        })
    });
    map.addInteraction(clickSelect);

    // 取消选中
    function unselectFeature() {
        clickSelect.getFeatures().clear();
        // 下面这样也是可以取消选中的，根据情况选择
        // map.removeInteraction(clickSelect);
    }
</script>
</body>

</html>

大家可以测试一下，应该是没有问题的！至此，地图上元素的选取相关的知识点都介绍完毕，希望能逐个掌握并融会贯通于实际应用中。下一节我们来学习地图开发中常用的功能，也就是咱们的高级篇了，大家加油！

收录于