项目中openlayer中使用,完整解决方案(数据库矢量数据,动态更新,分层,编辑)

<http://www.cnblogs.com/SuperXJ/articles/1562144.html!--
数据库中保存了点线面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&amp;VERSION=1.0.0&amp;REQUEST=DescribeFeatureType&amp;TYPENAME=point&amp;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>

teddy.xiong MAIL: [email protected]

你可能感兴趣的:(open)