我们上面的章节一直使用的都是feature，但是feature，中有个非常重要的属性就是geometry对象，他保存着对象的事件形态，就是我们vectorLayer上
显示的几何图形。
eg 我们要创建一个Feautre，里面会包装一个Feature
var feature_point = new OpenLayers.Feature.Vector({new OpenLayers.Geometry.Point(lon,lat)})
几何类的方法
atPoint(lonlat,tolerancelon,tolerancelat) 参数lonlat为OpenLayers.LonLat,后面的两个参数为点的阈值，因为feature在地图是以带style的点。
calculateBounds() 重新计算集合的边界，但是不返回任何值
clearBounds(): 把geometry的边界设为null
clone(): 复制一个OpenLayers.Geometry对象
destroy() 销毁一个geometry，但是如果这个geometry是feature的一部分，销毁会失败
distanceTo (geometry, options) 这个方法会返回自己与最近或是传入geometry之间距离，options有个属性，distance如果为true将会返回
包含x0y0,x1y1和距离的对象，为false的话，会返回距离数，但是要注意map的units设置的单位
extendBounds(bounds) 不是很明白
getArea（） 返回一个{Float}，包含这个geometry的面积
getBounds（） 返回{openLayers.Bounds}对象
getCentroid() 返回geometry的中心点，{OpenLayers.Geometry.Point}对象
getLength() 返回一个geometry覆盖的长度{Flot}
getVertices(nodes) 返回geometry中所有的节点对象
toString（） 返回wkt几何描述文本
Geometry 子类
Geometry.Point:包含(x,y)的对象
var my_point = new OpenLayers.Geometry.Point(-50,42);
Geometry.Collection:这是一个集合类，里面存放着Geometry的对象。LineString就是继承这个类。同几何对象的数组实例化。
var geom_collection = new OpenLayers.Geometry.Collection([geometry_point,geometry_line]);
Geometry.MultiPoint：这是一个点的几何对象，LineString就是继承的这个类，传递实例化对象的数组
var geom_multipoint = new OpenLayers.Geometry.MultiPoint([point1,point2])
Geometry.Curve: 曲线
Geometry.LineString:由点连接形成线,不能少于两个点的线
var geom_multi_line = new OpenLayers.Geometry.LineString([point1,point2]):
Geometry.MultiLineString:：多线，不能少于两根线
var geom_multiLineString = new OpenLayers.Geometry.MultiLineString([line1,line2]);
Geometry.LinearRing:这是一个闭合的线对象，在几何上表达就是第一点，也是最后一点。
var geom_linear_ring = new OpenLayers.Geometry.linearRing([point1,point2,point3,point1])
Geometry.Polygon:这个类是一个Geometry.LinearRing的数组。
var geo_polygon = new OpenLayers.Geometry.Polygeo([linear1,linear2,linear3])
Geometry.MultiPolygon:是Geometry.polygon的数组
Geometry子类的方法
每个子类都有自己特有的方法或者是实现，我们可以参考开发文档。
Feature类
它一个有Geometry，和自身属性加上Style组成的类
方法
destroy(),销毁一个Feature Object
clone（） 复制一个feature
getVisibility（） 返回{boolean}，feature是否可见
move(location) ,移动，可以传入OpenLayers.LonLat 和 OpenLayers.Pixel
onScreen(boundsOnly) 不是很清楚
使用SectFeature Control 与地图交互
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
>
<
title
>地图交互</
title
>
<
script
type
=
"text/javascript"
src
=
"OpenLayers.debug.js"
></
script
>
<
script
type
=
"text/javascript"
>
var map;
var vector_layer;
function init() {
//创建地图
map = new OpenLayers.Map('map');
//创建wms图层
var wms_layer = new OpenLayers.Layer.WMS('OpenLayers WMS',
layers : 'basic'
}, {});
//map.addLayer(wms_layer);
//创建矢量图层
vector_layer = new OpenLayers.Layer.Vector('Basic Vector Layer');
// map.addLayer(vector_layer);
map.addLayers([wms_layer,vector_layer]);
//创建并添加feature
var feature_point_1 = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(6.055, 46.234), {
'location' : 'Cern',
'description' : "Stand back, I'm going to try science!"
});
var feature_point_2 = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(-129, 3), {
'location' : 'The Sea',
'description' : 'Here be dragons'
});
var feature_polygon = new OpenLayers.Feature.Vector(
//We'll make a polgon from a linear ring object, which consists of points
new OpenLayers.Geometry.Polygon(new OpenLayers.Geometry.LinearRing([
new OpenLayers.Geometry.Point(-124.2, 41.9),
new OpenLayers.Geometry.Point(-120.1, 41.9),
new OpenLayers.Geometry.Point(-120, 39),
new OpenLayers.Geometry.Point(-114.5, 34.9),
new OpenLayers.Geometry.Point(-114.7, 32.7),
new OpenLayers.Geometry.Point(-117.1, 32.5),
new OpenLayers.Geometry.Point(-120, 34),
new OpenLayers.Geometry.Point(-123.7, 38.4)
//We won't pass in the first point, the polygon will close automatically
])), {
'location' : 'Fanghorn Forest',
'description' : 'Land of the Ents'
});
vector_layer.addFeatures([ feature_point_1, feature_point_2,
feature_polygon ]);
//创建并添加 selectFeature control
var select_feature_control = new OpenLayers.Control.SelectFeature(
vector_layer, {
multiple : false,
toggle : true,
toggleKey : 'ctrlKey',
multipleKey : 'shiftKey'
});
map.addControl(select_feature_control);
//激活控件
select_feature_control.activate();
//注册事件
vector_layer.events.register('featureselected', this, selected_feature);
vector_layer.events.register('featureunselected', this,unselected_feature);
if (!map.getCenter()) {
map.zoomToMaxExtent();
}
}
//触发选中事件
function selected_feature(event) {
//clear out the log's contents
document.getElementById('map_feature_log').innerHTML = '';
//Show the current selected feature (passed in from the event object)
var display_text = 'Clicked on: ' + '<
strong
>'
+ event.feature.attributes.location + '</
strong
>' + ': '
+ event.feature.attributes.description + '<
hr
/>';
document.getElementById('map_feature_log').innerHTML = display_text;
//Show all the selected features
document.getElementById('map_feature_log').innerHTML += 'All selected features: ';
//Now, loop through the selected feature array
for ( var i = 0; i < vector_layer.selectedFeatures.length; i++) {
document.getElementById('map_feature_log').innerHTML += vector_layer.selectedFeatures[i].attributes.location
+ ' | ';
}
}
//没有被选中
function unselected_feature(event) {
var display_text = event.feature.attributes.location + ' unselected!'
+ '<
hr
/>';
document.getElementById('map_feature_log').innerHTML = display_text;
//Show all the selected features
document.getElementById('map_feature_log').innerHTML += 'All selected features: ';
//Now, loop through the selected feature array
for ( var i = 0; i < vector_layer.selectedFeatures.length; i++) {
document.getElementById('map_feature_log').innerHTML += vector_layer.selectedFeatures[i].attributes.location
+ ' | ';
}
}
</
script
>
</
head
>
<
body
onload
=
"init()"
>
<
div
id
=
"map"
style
=
"width: 500px; height: 500px;"
></
div
>
<
div
id
=
"map_feature_log"
>显示详情</
div
>
</
body
>
</
html
>
|
1760
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
