项目中openlayer中使用,完整解决方案(数据库矢量数据,动态更新,分层,编辑)
<!--
数据库中保存了点线面3个表。分别保存了点线面的信息和所在图层号。然后采用jsp读取mysql数据，然后组装成GML格式数据，然后用刀下面这段html代码来解析并显示GML中的数据。
showmap.jsp文件内容为（由于是自己看，就不对代码做进一步说明）：
String head =" <?xml version=\"1.0\" encoding=\"ISO-8859-1\"?> <wfs:FeatureCollection xmlns:ms=\"http://mapserver.gis.umn.edu/mapserver\" xmlns:wfs=\"http://www.opengis.net/wfs\" xmlns:gml=\"http://www.opengis.net/gml\" xmlns:ogc=\"http://www.opengis.net/ogc\" xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xsi:schemaLocation=\"http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-basic.xsd http://mapserver.gis.umn.edu/mapserver http://aneto.oco/cgi-bin/worldwfs?SERVICE=WFS&VERSION=1.0.0&REQUEST=DescribeFeatureType&TYPENAME=point&OUTPUTFORMAT=XMLSCHEMA\"> ";
out.print(head); //输GML需要的头
String layer = request.getParameter("layer");
String area = request.getParameter("area");
try
{
inserpro.init();
//点
ResultSet rs = inserpro.executeEx("SELECT * FROM map_point WHERE layer="+layer);
while(rs.next())
{
out.print("<gml:featureMember><ms:msGeometry><gml:Point>"); //GML画一个点的格式。。。 out.print("<gml:coordinates>"+inserpro.getStr(rs.getString(4))+","+inserpro.getStr(rs.getString(5))+"</gml:coordinates>");
out.print("</gml:Point></ms:msGeometry></gml:featureMember>");
}
//线
rs = inserpro.executeEx("SELECT * FROM map_line WHERE layer="+layer);
while(rs.next())
{
out.print("<gml:featureMember><ms:msGeometry><gml:LineString>");
out.print("<gml:coordinates>"+inserpro.getStr(rs.getString(4))+"</gml:coordinates>");
out.print("</gml:LineString></ms:msGeometry></gml:featureMember>");
}
//面
rs = inserpro.executeEx("SELECT * FROM map_polygon WHERE layer="+layer);
while(rs.next())
{
out.print("<gml:featureMember><ms:msGeometry><gml:Polygon><gml:outerBoundaryIs><gml:LinearRing>");
out.print("<gml:coordinates>"+inserpro.getStr(rs.getString(4))+"</gml:coordinates>");
out.print("</gml:LinearRing></gml:outerBoundaryIs></gml:Polygon></ms:msGeometry></gml:featureMember>");
}
out.print("</wfs:FeatureCollection>"); //GML结束标志
}
catch(Exception ex)
{
}
inserpro.clean();
-->
<!--
使用OpenLayers，showmap.html位于openlayer\examples\showmap.html . 最终效果为 可以放大缩小，变换图层（当图层变换的时候，再次读取数据库中的数据组装GML），并加入了编译功能，新建了一个画点的图层供用户画点。
下面是具体的代码。
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>矢量图层测试</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <!--openlayer的自带CSS-->
<link rel="stylesheet" href="style.css" type="text/css" /> <!--//恩，我自己的CSS ，用户不大就不贴了。-->
<style type="text/css"> <!--无用了这个-->
#output {
position: absolute;
left: 550px;
top: 40px;
width: 350px;
height: 400px;
}
</style>
<script src="../lib/OpenLayers.js"></script> <!--openlayers头文件-->
<script type="text/javascript">
var zoom = 0;
var map;
function init() //初始化函数
{
function mapEvent(event)
{
var i=map.getZoom(); //获得目前缩放比例。
log(i);
}
//新建一个openayers对象 6个层 移动事件，转换图层。当有移动事件就调用mapEvent函数。。。。。。。。
map = new OpenLayers.Map("map",{numZoomLevels:6 , eventListeners:{"move": mapEvent}});
//通过gml创建图层 showmap.jsp见上面 //最开始的时候显示的gml文件
var glayer= new OpenLayers.Layer.GML("xj's gml layer", "http://172.16.2.14:8080/webmap/showmap.jsp?layer=1");
//也可以加载WMS格式的地图数据 glayer=new OpenLayers.Layer.WMS( "District", "http://192.98.151.17:8081/geoserver/wms",{layers: 'cq:GMAP_DISTRICT'} );
//wms 是动态图片。服务器本身为矢量数据，但在组装成wms文件之前要变为图片在发送。和GML区别明显。
glayer.setIsBaseLayer(true); //设置为底图。
map.addLayer(glayer); //增加这一层底图。
//////////////////////////设置一些控件////////////////////////////////////
map.addControl(new OpenLayers.Control.MousePosition()); //增加鼠标位置
map.addControl(new OpenLayers.Control.PanZoomBar()); //缩小放大栏
map.addControl(new OpenLayers.Control.MouseToolbar()); //在实例化的Map对象中增加进入Control.LayerSwitcher控制器，用来控制电子地图的放大、缩小等等。当然，控制电子地图还有别的方法，你可以自己尝试尝试。
map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
map.addControl(new OpenLayers.Control.KeyboardDefaults());
map.zoomToMaxExtent(); //最大尺寸
map.setCenter(new OpenLayers.LonLat(0,0),1,false,false);//初始化放大倍数为1 最小0 最大15 15最大。 设置中心为0，0
zoom=map.getZoom();
function log(msg)
{
if(zoom!=msg)
{
if(msg==1) //修改glayer图层的底图
glayer.setUrl('http://172.16.2.14:8080/webmap/showmap.jsp?layer=1');
if(msg==2)
glayer.setUrl('http://172.16.2.14:8080/webmap/showmap.jsp?layer=2');
if(msg==3)
glayer.setUrl('http://172.16.2.14:8080/webmap/showmap.jsp?layer=3');
}
zoom=msg;
}
// 设置一个新的图层。名叫 Point Layer
var pointLayer = new OpenLayers.Layer.Vector("Point Layer");//实例化的Layer.Vector对象，用来画点（Point）。
map.addLayer(pointLayer);
// var options = {handlerOptions: {freehand: true}};
//这个事控件列表，只写了一个控件。DrawFeature(控件对应的图层，点处理)
drawControls = {point: new OpenLayers.Control.DrawFeature(pointLayer,OpenLayers.Handler.Point)};
for(var key in drawControls)
{
map.addControl(drawControls[key]);
}
}
function toggleControl(element)
{
for(key in drawControls)
{
var control = drawControls[key];
if(element.value == key && element.checked)
{
control.activate();//activate()是OpenLayers中的一个方法，返回一个布尔值，用来激活方法。与else中的deactivate()配合，如果被激化的状态下则请求保持不变。
}
else
{
control.deactivate();//activate()是OpenLayers中的一个方法，返回一个布尔值，用来关闭方法。与if中的activate()配合，如果转变了别的请求，则上一个请求被关闭。
}
}
}
</script>
</head>
<body onload="init()">
<!-- <h1 id="title">矢量图层测试</h1> -->
<div id="map" class="smallmap"></div>
<!-- <textarea id="output"></textarea> -->
<ul id="controlToggle">
<li>
<input type="radio" name="type" value="none" id="noneToggle" onclick="toggleControl(this);" checked="checked" />
<label for="noneToggle">navigate</label>
</li>
<li>
<input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
<label for="pointToggle">draw point</label>
</li>
</ul>
</body>
</html>
