• 项目中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;
                    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: cug@live.cn
  • 相关阅读:
    Android官方命令深入分析之bmgr
    Android官方命令深入分析之AVD Manager
    Android 官方命令深入分析之android
    token的设置与获取
    SpringBoot使用Redis共享用户session信息
    thymeleaf资源加载问题(从Controller跳转)
    ajax传递数组,后台更新
    BootStrap表单验证用户名重复
    hadoop3.x.x错误解决
    Hadoop安装
  • 原文地址:https://www.cnblogs.com/moonvan/p/2252497.html
Copyright © 2020-2023  润新知