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