OpenLayers基础教程

您所在的位置:网站首页 arcmap打开图层属性表特别慢 OpenLayers基础教程

OpenLayers基础教程

2023-04-13 17:24| 来源: 网络整理| 查看: 265

1、前言

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

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

2、设置属性信息

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

OpenLayers // 创建样式 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 }) });

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

OpenLayers // 创建样式 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 }) }); 3、读取属性信息

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

OpenLayers 读取属性信息 // 创建样式 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


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3