OpenLayers学习笔记中级篇（六、地图交互）_ol new style circle 用法

作者：Gausst松鼠会 | 2024-04-18 10:40:01

踩

ol new style circle 用法

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选取之条件过滤

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/445532