（来源：http://nwaybygreifen.spaces.live.com/blog/cns!6220A29AE9D7B87!228.entry）
1 Openlayers关于数据加载
1.1 GML
目标：加载GML图层
步骤：
gmlLayer=new OpenLayers.Layer.GML("GML", "gml/polygon.xml",{isBaseLayer: true} );
//map.addLayers([untiled,gmlLayer]);
map.addLayer(gmlLayer);
注1． isBaseLayer属性确定该图层是否是基础图层。
1.2 其他类型数据加载
目前还不需要深究，暂不研究。
2 要素编辑
关于openlayers里的要素编辑，就是客户端的操作，因此分为操作和保存两个环节研究。
2.1 关于矢量要素的填加
分为点、线、多边形
以一段例子来说明要素的填加。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
……
<script src="OpenLayers.js"></script>
<script type="text/javascript">
var map, drawControls;
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
//****************************************************************************
① 初始化函数，填加一个基础图和一个矢量图层
//****************************************************************************
function init(){
map = new Ope－nLayers.Map('map');
var wmsLayer = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'}
);
var vectors = new OpenLayers.Layer.Vector("Vector Layer");
map.addLayers([wmsLayer, vectors]);
//****************************************************************************
② 定义一个Control参数对{point:画要素点,line:画线,polygon:画多边形,select:要素选择,selecthover:要素选择}－
//****************************************************************************
drawControls = {
point: new OpenLayers.Control.DrawFeature(
vectors, OpenLayers.Handler.Point
),
line: new OpenLayers.Control.DrawFeature(
vectors, OpenLayers.Handler.Path
),
polygon: new OpenLayers.Control.DrawFeature(
vectors, OpenLayers.Handler.Polygon
),
select: new Open―――Layers.Control.SelectFeature(
vectors,
{
clickout: false, toggle: false,
multiple: false, hover: false,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey", // shift key adds to selection
box: true
}
),
selecthover: new OpenLayers.Control.SelectFeature(
vectors,
{
multiple: false, hover: true,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey" // shift key adds to selection
}
)
};
//****************************************************************************
③ 控制动作选择
//****************************************************************************
for(var key in drawControls) {
map.addControl(drawControls[key]);
}
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
}
function toggleControl(element) {
for(key in drawControls) {
var control = drawControls[key];
if(element.value == key && element.checked) {
control.activate();
} else {
control.deactivate();
}
}
}
//****************************************************************************
④ 控制撤销选择动作
//****************************************************************************
function update() {
var clickout = document.getElementById("clickout").checked;
drawControls.select.clickout = clickout;
var hover = document.getElementById("hover").checked;
drawControls.select.hover = hover;
drawControls.select.box = document.getElementById("box").checked;
if(drawControls.select.active) {
drawControls.select.deactivate();
drawControls.select.activate();
}
}
</script>
</head>
<body οnlοad="init()">
<h1 id="title">OpenLayers Select Feature Example</h1>
<p id="shortdesc">
Select a feature on hover or click with the Control.SelectFeature on a
vector layer.
</p>
<div id="map" class="smallmap"></div>
<ul id="controlToggle">
<li>
<input type="radio" name="type" value="none" id="noneToggle"
οnclick="toggleControl(this);" checked="checked" />
<label for="noneToggle">navigate</label>
</li>
<li>
<input type="radio" name="type" value="point" id="pointToggle"
οnclick="toggleControl(this);" />
<label for="pointToggle">draw point</label>
</li>
。。。。。。
</body>
</html>
总结：对于要素填加基本可以理解为以下几步。
① 定义 control:OpenLayers.Control. SelectFeature
② Map.addControl
③ Control.active()
解释几个方法。
l OpenLayers.Control.DrawFeature（layer{OpenLayers.Layer.Vector}，handler {OpenLayers.Handler} ，options {Object}）
l 为图层填加风格
var myStyles = new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
pointRadius: "${type}", // sized according to type attribute
fillColor: "#000000",
strokeColor: "#ff9933",
strokeWidth: 2
}),
"select": new OpenLayers.Style({
fillColor: "#66ccff",
strokeColor: "#3399ff"
})
});
// Create a vector layer and give it your style map.
var points = new OpenLayers.Layer.Vector(
'Points', {styleMap: myStyles}
);
6517
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
