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)
等方法,有兴趣的同志可以自行摸索其使用方法。