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

最新推荐文章于 2024-08-17 09:00:00 发布

MagicMHD

最新推荐文章于 2024-08-17 09:00:00 发布

阅读量1.3k

点赞数 3

分类专栏： OpenLayers WebGIS实战

本文链接：https://blog.csdn.net/MagicMHD/article/details/91382304

版权

本文介绍了OpenLayers中如何进行地图交互，包括Feature的选中样式、条件过滤，以及如何取消选中。通过示例展示了如何自定义鼠标事件触发选取，并提供了代码方式取消选中的方法。文章最后鼓励读者掌握这些技能并应用于实践。

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

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