OpenLayers基础教程——设置和获取要素图层的属性信息

最新推荐文章于 2024-07-08 16:22:43 发布
最新推荐文章于 2024-07-08 16:22:43 发布
阅读量7.7k 收藏 26
点赞数 13
文章标签： openlayers
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HerryDong/article/details/110939076
版权

1、前言

大家可以回想一下初学GIS课程的时候老师是如何介绍空间数据的？其实空间数据与一般数据的区别就是：空间数据除了包含位置信息之外，它还会包含一些属性信息。例如常见的shp文件，除了包含shape字段外，它还会包含一些其他的字段，用以描述这条数据的属性信息，ArcMap中的要素属性表如下图所示：
在这里插入图片描述

其实在openlayers中，我们也可以给要素设置属性信息，当然在WebGIS中我们需要以JSON的形式进行添加，下面开始介绍。

2、设置属性信息

在openlayers中设置属性信息很简单，你可以在初始化feature的时候直接定义属性，下面的代码中定义了两个属性：name、remark：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>OpenLayers</title>
    <link href="ol/ol.css" rel="stylesheet" />
    <script src="ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width:500px;height:500px;"></div>

    <script>
        // 创建样式
        var style = new ol.style.Style({
            image: new ol.style.Circle({
                radius: 20,
                fill: new ol.style.Fill({
                    color: 'red'
                })
            })
        });

        // 创建要素
        var x = new ol.Feature({
            geometry: new ol.geom.Point([120.0, 30.0]),
            name: '学校',
            remark: '这是学校'
        });
        x.setStyle(style);

        var y = new ol.Feature({
            geometry: new ol.geom.Point([120.1, 30.1]),
            name: '车站',
            remark: '这是车站'
        });
        y.setStyle(style);

        var z = new ol.Feature({
            geometry: new ol.geom.Point([120.2, 30.2]),
            name: '医院',
            remark: '这是医院'
        });
        z.setStyle(style);

        // 创建数据源，添加要素
        var source = new ol.source.Vector();
        source.addFeature(x);
        source.addFeature(y);
        source.addFeature(z);

        // 创建要素图层，设置样式
        var layer = new ol.layer.Vector({
            source: source
        });

        // 创建地图，将要素图层加入其中
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                layer
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            })
        });
    </script>
</body>
</html>

当然，我们也可以调用feature.set(key, value)方法进行动态赋值，下面的代码与上面的代码其实是等价的：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>OpenLayers</title>
    <link href="ol/ol.css" rel="stylesheet" />
    <script src="ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width:500px;height:500px;"></div>

    <script>
        // 创建样式
        var style = new ol.style.Style({
            image: new ol.style.Circle({
                radius: 20,
                fill: new ol.style.Fill({
                    color: 'red'
                })
            })
        });

        // 创建要素
        var x = new ol.Feature({
            geometry: new ol.geom.Point([120.0, 30.0])
        });
        x.setStyle(style);
        x.set('name', '学校');
        x.set('remark', '这是学校');

        var y = new ol.Feature({
            geometry: new ol.geom.Point([120.1, 30.1])
        });
        y.setStyle(style);
        y.set('name', '车站');
        y.set('remark', '这是车站');

        var z = new ol.Feature({
            geometry: new ol.geom.Point([120.2, 30.2])
        });
        z.setStyle(style);
        z.set('name', '医院');
        z.set('remark', '这是医院');

        // 创建数据源，添加要素
        var source = new ol.source.Vector();
        source.addFeature(x);
        source.addFeature(y);
        source.addFeature(z);

        // 创建要素图层，设置样式
        var layer = new ol.layer.Vector({
            source: source
        });

        // 创建地图，将要素图层加入其中
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                layer
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            })
        });
    </script>
</body>
</html>

3、读取属性信息

在openlayers中读取属性信息也很简单，直接调用feature.get(key)即可，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>OpenLayers</title>
    <link href="ol/ol.css" rel="stylesheet" />
    <script src="ol/ol.js"></script>
</head>
<body>
    <div id="map" style="width:500px;height:500px;"></div>
    <button id="btn">读取属性信息</button>

    <script>
        // 创建样式
        var style = new ol.style.Style({
            image: new ol.style.Circle({
                radius: 20,
                fill: new ol.style.Fill({
                    color: 'red'
                })
            })
        });

        // 创建要素
        var x = new ol.Feature({
            geometry: new ol.geom.Point([120.0, 30.0])
        });
        x.setStyle(style);
        x.set('name', '学校');
        x.set('remark', '这是学校');

        var y = new ol.Feature({
            geometry: new ol.geom.Point([120.1, 30.1])
        });
        y.setStyle(style);
        y.set('name', '车站');
        y.set('remark', '这是车站');

        var z = new ol.Feature({
            geometry: new ol.geom.Point([120.2, 30.2])
        });
        z.setStyle(style);
        z.set('name', '医院');
        z.set('remark', '这是医院');

        // 创建数据源，添加要素
        var source = new ol.source.Vector();
        source.addFeature(x);
        source.addFeature(y);
        source.addFeature(z);

        // 创建要素图层，设置样式
        var layer = new ol.layer.Vector({
            source: source
        });

        // 创建地图，将要素图层加入其中
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
                layer
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [120, 30],
                zoom: 10
            })
        });

        // 读取属性信息
        document.getElementById('btn').onclick = function () {
            var features = source.getFeatures();
            for (var i = 0; i < features.length; i++) {
                var feature = features[i];
                var name = feature.get('name');
                var remark = feature.get('remark');
                console.log('名称：' + name + ',备注：' + remark)
            }
        }
    </script>
</body>
</html>

运行结果如下：

名称：学校,备注：这是学校
名称：车站,备注：这是车站
名称：医院,备注：这是医院

4、结语

属性信息是空间数据来说是必不可少的，在openlayers中，我们可以通过get(key)、set(key, value)方法对其进行读取和设置，其实在feature中，还存在着setId(id)、getFeatureById(id)等方法，有兴趣的同志可以自行摸索其使用方法。

HerryDong
关注
  • 13
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
OpenLayers+Geoserver点要素,获取查询结果
tempsitegoogle
07-02 1683
在Geoserver中用SLD配置点要素的样式用图片表现时，订阅map的单击事件，往往会发生点击渲染图片无效，只有在单击点要素的时候才能触发事件。解决方案如下：（假设SLD配置文件中图片大小设为12px。） （1）订阅MAP的单击事件： map.events.register('click', map, function (e) { // 以当前点击点的坐标作为中心，图片大小一半为"半径"...
openlayers3 获取点图层数据并添加标注和展示标注信息实例
11-29
openlayers3 显示静态地图，从后台查询点数据（后台java代码没有提交，太简单了。。。）展示到地图并添加标注，给标注添加点击事件并展示标注信息，初次接触开源GIS，代码中有错误还请各位看官指正，感谢！
OpenLayers访问WMS服务并获取要素的属性
weixin_44958176的博客
12-11 4283
OpenLayers 跨域访问WMS服务并获取要素的属性 整体思路: 1.因为我们这个地图服务是在Geoserver发布,要先解决跨域的问题,GeoServer启动有两种方式,一种是war存放在tomcat里启动,还有一种就是自己启动,所以要根据具体方式百度; 2.首先定义一个map,数据源里crossOrigin: ‘anonymous’,跨域要加,通过监听一个单击事件getGetFeature...
OpenLayers对要素进行新增绘制、选择、修改等交互操作
最新发布
sig321的专栏
07-08 857
也可以从Select获取Features（Collection集合）放置到Modify的features属性上。备注：draw.setActivity(false)即可禁用要素绘的制功能。实现绘制完一个多边形之后禁用多边形绘制，并且开启选择器功能。
openLayers实战(三)：图层layer与元素feature
在下魔王ii的博客
08-09 3426
在第一篇中，已经建立了map、view、source、layer之间的关系，并正确渲染，这里展开说明如何正确的创建图层和元素。
vue+openlayers 点击地图查询geoserver发布的WMS/WMTS图层的信息[矢量(点、线、面)+栅格]
冰雪为融的博客
07-15 2353
vue+openlayers 点击地图查询geoserver发布的WMS/WMTS图层的信息[矢量(点、线、面)+栅格]
openlayer点击WMS瓦片图层获取相应的feature要素信息
A_ta_and_run的博客
11-01 1317
openlayer获取点击的WMS服务要素信息
Openlayers 教程 - 地图以及图层数据导出（打印）图片
linzi19900517的博客
10-07 1707
Openlayers 教程 - 地图以及图层数据导出（打印）图片。
Openlayers通过元素获取图层，通过点元素获取线元素
03-12
Openlayers虽然提供了很多方法， 一般是从图层（Layer）获取获取元素（feature），或者从元素（Feature）获取坐标（Coordinate）。获取到的一般都是集合。但是想要反着通过元素（feature）获取图层（Layer）.OL选择...
OpenLayers实现图层切换控件
10-14
在OpenLayers中，图层（Layer）是地图的基本组成单元，每个图层可以有自己的数据源（Source）和可见性设置。 要实现图层切换控件，我们需要做以下几步： 1. **创建图层**：在示例代码中，我们创建了三个不同的图层...
openlayers 编辑geoserver图层
11-19
在压缩包中的"OPENLAYERS+Geoserver修改图层要素"可能包含示例代码或教程，帮助初学者理解如何实现这些功能。学习时，你需要理解OpenLayers的图层、控件和事件处理机制，以及GeoServer的WFS服务和数据管理。通过实践...
基于OpenLayers实战地理信息系统教程（教学视频）
10-08
里面是教学视频，共五章，基于OpenLayers实战地理信息系统教程，基于OpenLayers实战地理信息系统教程基于OpenLayers实战地理信息系统教程基于OpenLayers实战地理信息系统教程
openlayers6 添加道路图层 并点击道路高亮显示
m0_65607651的博客
05-14 1605
openlayers6 添加道路图层 并点击道路高亮显示
Openlayer中的Layer图层
09-01 2869
获取map中的所有图层 map.getLayers() 获取图层数组 map.getLayers().getArray()
openlayers通过点击地图弹出窗口完成属性查询
qq765331706的博客
12-17 2270
一、成果展示 再上一篇文章中，已经完成了在geoserver中发布地图并通过openlayres加载到自己的页面中，这一章我们通过openlayer来实现地图的属性查询。（下一篇文章展示高亮的代码，跟空间定位一起写比较好） 二、代码 需要注意的地方 js代码中【创建矢量图层对象】注释下的代码里url填自己发布的geoJSON数据地址（上一篇文章提到过，不知道在哪找地址的，可以去上一篇文章看看） js中【ol地图对象】代码里面可以自己定义地图最开始的定位与缩放大小 js中最后的【设置单机处理弹窗】代码中可
Openlayers的交互功能（二）——Feature
m0_46410110的博客
08-14 2060
本文对Feature进行了简单的介绍，以及一些常用的对Feature的操作，后续将继续更新Feature的添加、选中、删除、平移、框选平移等操作。如有错误，请批评指正！欢迎关注星林社区文章将同步更新在星林社区中！
layer的open使用
热门推荐
Huangwen的博客
05-29 9万+
最近接触到layer弹窗，感觉弹窗功能异常强大，真的很方便，所以记录下来； 1.layer官网：http://layer.layui.com/   在这里下载需要的js 2.语法：layer.open(options) 3.实例： var index = layer.open({ content: 'test' }); //拿到的index是一个重要的凭据，它是诸如layer.c...
openlayers点击wms图层获取其信息
du_5pet的博客
08-14 3180
var wmsSource = new ol.source.ImageWMS({ url: buildIp+'/geoserver/tianjin/wms', params: {'LAYERS': 'tianjin:tianjin_build_leqn'}, serverType: 'geoserver', crossOrigin: 'anonymous'...
webGIS实践（geoserver+openlayer+django）2_3_geoserver wms条件过滤与增删改查
吴道简的博客
05-16 1612
WMS既web map service。 WFS既web feature server。 WMTS既web map tile service。 WMS=WFS+WMTS。 WFS是用来跟后台进行数据交互的，对矢量要素进行增删改查。 WMTS是用来看的，大量地图数据在后端渲染成栅格瓦片，传输到前端显示。 一、geoserver条件过滤 数据——Layer Preview，Openlayers打开发布的图层v6_time_pref_pgn_utf_wgs84。 点击按钮，打开toggl.
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值