我的GIS入门学习之路（三）

来源：互联网发布：nginx apache 共存编辑：程序博客网时间：2024/06/05 06:43

4.地理数据库

前面说过，发布图层的时候，可以通过很多方式来发布，一开始我们是通过采取导入shp文件来导入的，现在也可以通过选择数据库的方式来发布图层，这里我们选择的是MySQL数据库，MySQL是少有的空间数据库，另外GeoServer导入MySQL数据库的话，需要下一个相应的插件，具体百度……选择添加stores，选择MySQL来源，即可通过数据库进行发布地图

这个就不细说了，接下来说说如何查询gps设备和轨迹显示在OpenLers上

具体代码如下，分为map_view.html,gps_device.jsp,gps_track.jsp以及一个下载的jquery-1.8.3.min.js文件

map_view.html

<html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"></head><body onload="initPage();"><div><div id="map"><div class="map_panel_div" id="map_panel_div">时间：<input type="text" class="" id="gps_time_from" value="2015-09-20 15:39:00"/>到<input type="text" class="" id="gps_time_to" value="2015-09-20 18:41:00"/>设备：<input type="text" class="" id="device_id" value="381215032027883"/><input type="button" class="" id="" value="查询" onclick="getTrack();"/></div></div></div></body></html><!-- CSS 部分开始 --><link rel="stylesheet" type="text/css" href="http://localhost:8080/geoserver/openlayers/theme/default/style.css" /><!-- 以下部分css可以做成单独的css文件引用 --><style>/* General settings */body {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size: small;}/* Toolbar styles */#toolbar {position: relative;padding-bottom: 0.5em;display: none;}#toolbar ul {list-style: none;padding: 0;margin: 0;}#toolbar ul li {float: left;padding-right: 1em;padding-bottom: 0.5em;}#toolbar ul li a {font-weight: bold;font-size: smaller;vertical-align: middle;color: black;text-decoration: none;}#toolbar ul li a:hover {text-decoration: underline;}#toolbar ul li * {vertical-align: middle;}/* The map and the location bar */#map {clear: both;position: relative;width: 1200px;height: 600px;border: 2px solid black;}#wrapper {width: 574px;}#location {float: right;}#options {position: absolute;left: 13px;top: 7px;z-index: 3000;}.popup_div{width:400px;height:50px;}.map_panel_div{margin-left:10px;margin-top:10px;}</style><!-- CSS 部分完毕 --><!-- JAVASCRIPT 部分开始 --><script src="http://localhost:8080/geoserver/openlayers/OpenLayers.js" type="text/javascript"></script><script src="jquery-1.8.3.min.js" type="text/javascript"></script><!-- 以下部分可以做成单独的js文件引用 --><script defer="defer" type="text/javascript">var map;var baseLayer,markerLayer,trackLayer;var lineFeature;var popup;var pureCoverage = false;// pink tile avoidanceOpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;// make OL compute scale according to WMS specOpenLayers.DOTS_PER_INCH = 25.4 / 0.28;function initMap() {// if this is just a coverage or a group of them, disable a few items,// and default to jpeg formatformat = 'image/png';if (pureCoverage) {document.getElementById('filterType').disabled = true;document.getElementById('filter').disabled = true;document.getElementById('antialiasSelector').disabled = true;document.getElementById('updateFilterButton').disabled = true;document.getElementById('resetFilterButton').disabled = true;document.getElementById('jpeg').selected = true;format = "image/jpeg";}var bounds = new OpenLayers.Bounds(73.441, 18.16, 135.087, 53.562);var options = {controls : [],maxExtent : bounds,maxResolution : 0.2408046875,projection : "EPSG:4326",units : 'degrees'};map = new OpenLayers.Map('map', options);// setup single tiled layerbaseLayer = new OpenLayers.Layer.WMS("Chinamap:dijishi_point - Untiled","http://localhost:8080/geoserver/Chinamap/wms", {LAYERS : 'Chinamap:dijishi_point',STYLES : '',format : format}, {singleTile : true,ratio : 1,isBaseLayer : true});map.addLayers( [ baseLayer]);// build up all controlsmap.addControl(new OpenLayers.Control.PanZoomBar( {position : new OpenLayers.Pixel(2, 15)}));map.addControl(new OpenLayers.Control.Navigation());//map.addControl(new OpenLayers.Control.Scale($('scale')));//map.addControl(new OpenLayers.Control.MousePosition( {element : $('location')}));map.zoomToExtent(bounds);trackLayer = new OpenLayers.Layer.Vector("track");map.addLayers([trackLayer]);markerLayer = new OpenLayers.Layer.Markers("markers");map.addLayers([markerLayer]);map.addControl( new OpenLayers.Control.LayerSwitcher());}</script><script>function initPage() {initMap();getDevice();}function getDevice(){$.post("gps_device.jsp",function(data){var json=eval("("+data+")");var list=json.aaData;for(var i=0;i<list.length;i++){addDeviceMarker(list[i]);}});}function getTrack(){//http://windows-6ru439m:9090/ylxxt/project/test/gps_device.jsp?device_id=381215032027883&gps_time_from=2015-09-20%2000:00:00&gps_time_to=2015-09-21%2012:00:00var gpsTimeFrom=document.getElementById("GpsTimeFrom").value;var gpsTimeTo=document.getElementById("GpsTimeTo").value;var deviceId=document.getElementById("DeviceId").value;$.post("gps_track.jsp?DeviceID="+deviceId+"&GpsTimeFrom="+gpsTimeFrom+"&GpsTimeTo="+gpsTimeTo,function(data){var json=eval("("+data+")");var list=json.aaData;for(var i=0;i<list.length;i++){addTrackLine(list[i]);}});}function addDeviceMarker(list){var deviceId=list.device_id;var longitude=list.longitude;var latitude=list.latitude;marker = new OpenLayers.Marker(new OpenLayers.LonLat(longitude,latitude));marker.events.register('mousedown', marker, function(){//alert("鼠标Down！");var html="<div class=\"popup_div\">设备号："+deviceId+"<br>经纬度：["+longitude+","+latitude+"]<br>";html=html+"<input type='button' value='百度网站' onclick=\"goTo('http://www.baidu.com')\"></input>";html=html+"<input type='button' value='查看轨迹' onclick='queryTrack();'></input>";html=html+"<input type='button' value='弹出警告' onclick='alert(\"警告信息\");'></input>";html=html+"</div>";if(popup){map.removePopup(popup);popup=null;}else{popup=new OpenLayers.Popup("popup",new OpenLayers.LonLat(longitude,latitude),new OpenLayers.Size(400,50),html,false);popup.setBackgroundColor("#ffffff");popup.setOpacity(12);popup.setBorder("1px solid #d91f12");map.addPopup(popup);}});markerLayer.addMarker(marker);}function addTrackLine(list){var styleGreen = {strokeColor: "#339933",strokeOpacity: 1,strokeWidth: 5,pointRadius: 10,pointerEvents: "visiblePainted"};var deviceId=list.device_id;var longitude=list.longitude;var latitude=list.latitude;var lonlat = new OpenLayers.LonLat(longitude,latitude);if(lineFeature==null){lineFeature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(lonlat.lon, lonlat.lat), null, styleGreen);trackLayer.addFeatures([lineFeature]);//定位地图到第一个点，并且放大到指定的级别map.setCenter(lonlat,10);}else{var newPoint = new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);lineFeature.geometry.addPoint(newPoint);trackLayer.drawFeature(lineFeature);}}function queryTrack(){alert("即将显示一个查询轨迹的组合查询框。");var html="<form action=\"gps_track.jsp\">在这里设置查询条件：<br>条件1<br>条件2<br><input type=\"submit\" value=\"提交\"></form></input>";var div = document.createElement("div");div.id="query_track_div";div.style="position:absolute;top:100px;left:100px;border:2px solid blue;width:200px;height:150px;";div.innerHTML=html;document.body.appendChild(div);}function goTo(url){alert(url);window.location.href=url;}</script><!-- JAVASCRIPT 部分完毕 -->

gps_device.jsp

<%@page contentType="text/html; charset=UTF-8" language="java"import="java.text.*,org.json.JSONObject,java.util.ArrayList,java.io.PrintWriter"import="java.util.HashMap,java.util.List,java.sql.*,java.util.Map,java.io.IOException"%><%//说明：本例子需要引入json.jar包和jdbc包，拷贝到Tomcat的common/lib下重启Tomcat或者应用的WEB-INF/lib下String action=request.getParameter("action");System.out.println("获得的参数是：action="+action);//开始查询数据库List jsonList = new ArrayList();try {Class.forName("com.mysql.jdbc.Driver");} catch (ClassNotFoundException classnotfoundexception) {classnotfoundexception.printStackTrace();}try {Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:8080/test?user=ylx&password=ylx&useUnicode=true&characterEncoding=UTF-8");Statement statement = conn.createStatement();System.out.println("连接数据库Ok！！！");//构造sql语句，根据传递过来的查询条件参数，目前是deviceId和gpsTimeString sql="select * from gps_realtime order by gpstime";System.out.println("构造出来的sql语句是："+sql);ResultSet rs = statement.executeQuery(sql);while (rs.next()) {Map map = new HashMap();map.put("device_id",rs.getString("deviceId"));map.put("gps_time",rs.getString("gpstime"));map.put("recv_time",rs.getString("recvtime"));map.put("longitude",rs.getString("longitude"));map.put("latitude",rs.getString("latitude"));jsonList.add(map);}statement.close();conn.close();System.out.println("数据库关闭了！！！");} catch (SQLException sqlexception) {sqlexception.printStackTrace();}//////////数据库查询完毕，得到了json数组jsonList////////////下面开始构建返回的jsonJSONObject json=new JSONObject();json.put("aaData",jsonList);json.put("action",action);json.put("result_msg","ok");//如果发生错误就设置成"error"等json.put("result_code",0);//返回0表示正常，不等于0就表示有错误产生，错误代码System.out.println("最后构造得到的json是："+json.toString());response.setContentType("text/html; charset=UTF-8");try {response.getWriter().print(json);response.getWriter().flush();response.getWriter().close();} catch (IOException e) {e.printStackTrace();}%>

gps_track.jsp

<%@page contentType="text/html; charset=UTF-8" language="java"import="java.text.*,org.json.JSONObject,java.util.ArrayList,java.io.PrintWriter"import="java.util.HashMap,java.util.List,java.sql.*,java.util.Map,java.io.IOException"%><%//说明：本例子需要引入json.jar包和jdbc包，拷贝到Tomcat的common/lib下重启Tomcat或者应用的WEB-INF/lib下String deviceId=request.getParameter("device_id");String gpsTimeFrom=request.getParameter("gps_time_from");String gpsTimeTo=request.getParameter("gps_time_to");String action=request.getParameter("action");System.out.println("获得的参数是：action="+action+",device_id="+deviceId+",gps_time_from="+gpsTimeFrom+",gps_time_to="+gpsTimeTo);//开始查询数据库List jsonList = new ArrayList();try {Class.forName("com.mysql.jdbc.Driver");} catch (ClassNotFoundException classnotfoundexception) {classnotfoundexception.printStackTrace();}try {Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:8080/test?user=ylx&password=ylx&useUnicode=true&characterEncoding=UTF-8");Statement statement = conn.createStatement();System.out.println("连接数据库Ok！！！");//构造sql语句，根据传递过来的查询条件参数，目前是deviceId和gpsTimeString sql="select * from gps_history where gpstime>'"+gpsTimeFrom+"' and gpstime<'"+gpsTimeTo+"' and deviceId like '%"+deviceId+"%' order by gpstime";System.out.println("构造出来的sql语句是："+sql);ResultSet rs = statement.executeQuery(sql);while (rs.next()) {Map map = new HashMap();map.put("device_id",rs.getString("deviceId"));map.put("gps_time",rs.getString("gpstime"));map.put("recv_time",rs.getString("recvtime"));map.put("longitude",rs.getString("longitude"));map.put("latitude",rs.getString("latitude"));jsonList.add(map);}statement.close();conn.close();System.out.println("数据库关闭了！！！");} catch (SQLException sqlexception) {sqlexception.printStackTrace();}//////////数据库查询完毕，得到了json数组jsonList////////////下面开始构建返回的jsonJSONObject json=new JSONObject();json.put("aaData",jsonList);json.put("action",action);json.put("result_msg","ok");//如果发生错误就设置成"error"等json.put("result_code",0);//返回0表示正常，不等于0就表示有错误产生，错误代码json.put("device_id",deviceId);json.put("gps_time_from",gpsTimeFrom);json.put("gps_time_to",gpsTimeTo);json.put("help","请在请求url里带上device_id,gps_time_from和gps_time_to三个参数才能有查询结果<input type=button value=示范 onclick=window.location.href='gps_track_help.jsp'>");System.out.println("最后构造得到的json是："+json.toString());response.setContentType("text/html; charset=UTF-8");try {response.getWriter().print(json);response.getWriter().flush();response.getWriter().close();} catch (IOException e) {e.printStackTrace();}System.out.println("返回结果给调用页面了。");%>

最后得到的地图一览

gps_track.jsp和gps_device用到的数据库表一览：

0 0