前段时间香克斯去实习去了，由于一些原因只实习了12天，不过第一次实习，觉得还是有必要记录一下。事先声明，这个博客也是获得同意的，目前这个项目完成度还不是很高，有的地方我的想法不成熟的，希望大家多多提意见。
需求：画一个电子围栏，围栏信息关联用户信息，对用户进出电子围栏进行报警，并且将报警信息推送的前端页面实时显示。
使用到技术栈：Springboot+mybatis+postgreSQL+postGis+websocket+百度地图
一、申请密钥
首先我们需要申请一个百度地图的密钥，由于我们是要在web的前端页面调用，选择javascript API
二、查看JavaScript API GL绘图工具和学习示例demo
主要了解绘制多边形的部分。
三、绘制围栏
点击右上角的多边形图标可以在地图上绘制多边形围栏。
四、存储围栏
点击保存此次绘制围栏可以在弹窗出看到围栏的信息。
五、查看围栏列表
可以对列表中指定的围栏实现修改和删除，并且点击围栏名称链接可以在线查看围栏图层。
六、查看围栏和围栏关联的用户的位置信息。
围栏内和围栏外的用户分别使用不同的颜色来显示。
七、前端接收websocket推送的消息
后端websocket轮询数据库中表的变化，每当报警信息表中增加一条记录，websocket读取该记录，并且使用websocket推送到前端。
八、具体实现
8.1 index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"><html><%@ taglib uri="/jsp/jstl/core" prefix="c"%><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}#allmap {width: 100%; height:98%; overflow: hidden;}#result {width:100%;font-size:12px;}dl,dt,dd,ul,li{margin:0;padding:0;list-style:none;}p{font-size:12px;}dt{font-size:14px;font-family:"微软雅黑";font-weight:bold;border-bottom:1px dotted #000;padding:5px 0 5px 5px;margin:5px 0;}dd{padding:5px 0 0 5px;}li{line-height:28px;}</style><script type="text/javascript" src="http://api./api?v=2.0&ak=BzB3qjNfqnr8VWAx4dwKEFQ1q7BFyQXI"></script><!--导入依赖的js--><!--加载鼠标绘制工具--><script type="text/javascript" src="http://api./library/DrawingManager/1.4/src/DrawingManager_min.js"></script><link rel="stylesheet" href="http://api./library/DrawingManager/1.4/src/DrawingManager_min.css" /><!--加载检索信息窗口--><script type="text/javascript" src="http://api./library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script><link rel="stylesheet" href="http://api./library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" /><script src="/jquery-3.0.0.min.js"></script><title>电子围栏绘制工具</title></head><body><div id="result" style="background-color: yellow"><!--功能按钮--><input type="button" value="获取绘制的电子围栏个数" onclick="alert(overlays.length)"/><input type="button" value="清除绘制的电子围栏" onclick="clearAll()"/><input type="button" value="获取绘制电子围栏信息弹框" onclick="getLayerInformation()"><label>设置电子围栏的名称：</label> <input type="text" id="t_name" value="江苏大学电子围栏"><input type="button" value="确认" onclick="confirm_name()"><input type="button" value="查看当前围栏详细信息" onclick="showTiger()"/><input type="button" value="保存此次绘制的围栏" onclick="savethisTiger()"/><input type="button" value="查看围栏列表" onclick="window.open('${pageContext.request.contextPath}/postgis/test/tiger/list')"></div><div id="allmap" style="overflow:hidden;zoom:1;position:relative;"><div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div></div><script type="text/javascript">// 点的数组// 百度地图API功能var map = new BMap.Map('map');// var poi = new BMap.Point(116.307852,40.057031); 北京var poi = new BMap.Point(119.520631,32.206296); //江苏大学map.centerAndZoom(poi, 16);map.enableScrollWheelZoom();var tigername = null;var overlays = [];var mlngat = [];var overlaycomplete = function(e){overlays.push(e.overlay);var path = e.overlay.getPath();// 新 直接传多边形// mlngat.push();mlngat.push("POLYGON(("+path[0].lng + " " + path[0].lat);for (var i = 1;i<path.length-1;i++){// 旧版// mlngat.push("lng:" + path[i].lng + ",lat:" + path[i].lat)// 新： 为了传到后端的时候方便传到数据库mlngat.push(path[i].lng + " " + path[i].lat);}mlngat.push(path[path.length-1].lng + " " + path[path.length-1].lat);mlngat.push(path[0].lng + " " + path[0].lat+"))");};var styleOptions = {strokeColor:"red", //边线颜色。fillColor:"red",//填充颜色。当参数为空时，圆形将没有填充效果。strokeWeight: 3, //边线的宽度，以像素为单位。strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。fillOpacity: 0.6,//填充的透明度，取值范围0 - 1。strokeStyle: 'solid' //边线的样式，solid或dashed。}//实例化鼠标绘制工具var drawingManager = new BMapLib.DrawingManager(map, {isOpen: false, //是否开启绘制模式enableDrawingTool: true, //是否显示工具栏drawingToolOptions: {anchor: BMAP_ANCHOR_TOP_RIGHT, //位置offset: new BMap.Size(5, 5), //偏离值},circleOptions: styleOptions, //圆的样式polylineOptions: styleOptions, //线的样式polygonOptions: styleOptions, //多边形的样式rectangleOptions: styleOptions //矩形的样式});//添加鼠标绘制工具监听事件，用于获取绘制结果drawingManager.addEventListener('overlaycomplete', overlaycomplete);function clearAll() {// 旧版本// for(var i = 0; i < overlays.length; i++){// map.removeOverlay(overlays[i]);// }// overlays.length = 0// 直接页面刷新即可，防止页面元素缓存 影响后续的操作// 修改后的window.location.reload();}// 获取电子围栏信息弹窗function getLayerInformation(){// console.log(overlays[0].getPath());// console.log(mlngat)alert("围栏坐标："+mlngat);}// 设置电子围栏的名称function confirm_name(){tigername = $("#t_name").val();alert("确认："+tigername);}// 查看当前围栏详细信息function showTiger() {alert("坐标："+mlngat+"\n围栏名称："+ tigername);}// 保存到数据库中function savethisTiger() {$.ajax({timeout: 10000, //超时时间设置为10秒contentType:"application/json",//传给服务器的数据类型dataType:"json", //接收服务器传来的数据格式type: "post",async:false, // async异步 false改为同步url: "${pageContext.request.contextPath}/postgis/test/add/tiger",data: JSON.stringify({"mlngat":mlngat.toString(),"poly_name":tigername.toString()}),success:function (response) {alert("存储成功"+JSON.stringify(response));},error:function () {alert("存储失败");}});}</script></body></html>
8.2 websocoketClient.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="UTF-8"><title>围栏实时报警（可以有多个围栏的窗口）</title></head><body><div>websock数据库实时回显</div>编号 姓名 报警提示<ul id="view"></ul></body><script type="text/javascript">var websocket = null;//判断当前浏览器是否支持WebSocketif ('WebSocket' in window) {websocket = new WebSocket("ws://localhost:8080/websocket/1");} else {alert('当前浏览器 Not support websocket')}//连接发生错误的回调方法websocket.onerror = function() {console.log("WebSocket连接发生错误");};//连接成功建立的回调方法websocket.onopen = function() {console.log("WebSocket连接成功");}//接收到消息的回调方法websocket.onmessage = function(event) {console.log(event);makeDataOnWeb(event.data);}//连接关闭的回调方法websocket.onclose = function() {}//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。window.onbeforeunload = function() {closeWebSocket();}//拿到数据后执行的函数/* function makeDataOnWeb(data) {var a = data;var divNode = document.getElementById("view");var liNode = document.createElement("li");liNode.innerHTML = a;divNode.appendChild(liNode);*///关闭WebSocket连接function closeWebSocket() {websocket.close();}function makeDataOnWeb(data) {var a = data;var divNode = document.getElementById("view");var liNode = document.createElement("li");liNode.innerHTML = a;divNode.appendChild(liNode);}</script></html>
8.3 TigerController.java
import com.alibaba.fastjson.JSON;import com.alibaba.fastjson.JSONObject;import com.ygxk.tiger.model.PointLocate;import com.ygxk.tiger.model.TigerElement;import com.ygxk.tiger.model.vo.PolyGonVo;import com.ygxk.tiger.service.TigerService;import com.ygxk.tiger.utils.LocatePointUtil;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.ui.ModelMap;import org.springframework.web.bind.annotation.*;import sun.plugin2.main.client.WMozillaServiceDelegate;import java.util.ArrayList;import java.util.List;@Controller@RequestMapping("/postgis/test")public class TigerController {@Autowiredprivate TigerService tigerService;/*** 测试*/@GetMapping("/123")public String test123(){return "Hello 123";}/*** 添加围栏元素* @param polyGonVo*/@PostMapping("/add/tiger")@ResponseBodypublic TigerElement addTiger(@RequestBody PolyGonVo polyGonVo){String mlngat = polyGonVo.getMlngat();String poly_name = polyGonVo.getPoly_name();TigerElement tigerElement = new TigerElement();tigerElement.setName(poly_name);tigerElement.setGeoStr(mlngat);tigerService.addTigerElement(tigerElement);//System.out.println("插入成功：当前的围栏信息如下"+tigerElement.toString());Long id = tigerElement.getId();System.out.println(id);TigerElement tigerElement1 = tigerService.findById(id);System.out.println(tigerElement.toString());return tigerElement1;}/*** 查询全部围栏信息 返回页面* @return*/@RequestMapping("/tiger/list")public String getTigerList(ModelMap modelMap){List<TigerElement> tigerElementList = new ArrayList<TigerElement>();tigerElementList = tigerService.findAll();modelMap.addAttribute("tigerElementList",tigerElementList);return "tigerlist";}/*** 删除指定id的围栏，并且重定向防止重复提交* @param id* @return*/@RequestMapping("/tiger/delete/{id}")public String removeById(@PathVariable("id") Long id){tigerService.deleteById(id);// 重定向的是方法的地址return "redirect:/postgis/test/tiger/list";}/*** 查看指定围栏的 图示 8月21日 17点04分* @return*/@RequestMapping("/tiger/find/{id}")public String findTiger(@PathVariable("id") Long id, ModelMap modelMap){TigerElement tigerElement = tigerService.findById(id);String geoStr = tigerElement.getGeoStr();System.out.println(geoStr);JSONObject jsonObject = JSONObject.parseObject(geoStr);Object coordinates = jsonObject.get("coordinates");String string = coordinates+"";System.out.println(coordinates);//截取 不需要回归点List<PointLocate> pointLists = LocatePointUtil.getPointLists(string);for (PointLocate point:pointLists){System.out.println(point.toString());}modelMap.addAttribute("pointLists", JSON.toJSONString(pointLists));modelMap.addAttribute("title_name",tigerElement.getName());return "Bmap";}/*** 修改 重新绘制指定的围栏*/@RequestMapping("/tiger/update/{id}")public String updateTiger(@PathVariable("id") Long id,Model model){TigerElement tigerElement = tigerService.findById(id);String name = tigerElement.getName();model.addAttribute("tiger_name",name);model.addAttribute("id",id);return "update";}/*** 添加围栏元素* @param polyGonVo*/@PostMapping("/update/tiger/{id}")@ResponseBodypublic TigerElement addTigerById(@RequestBody PolyGonVo polyGonVo,@PathVariable("id") Long id){String mlngat = polyGonVo.getMlngat();String poly_name = polyGonVo.getPoly_name();TigerElement tigerElement = new TigerElement();tigerElement.setName(poly_name);tigerElement.setGeoStr(mlngat);tigerElement.setId(id);tigerService.updateTigerElement(tigerElement);System.out.println("更新成功：当前的围栏信息如下"+tigerElement.toString());return tigerElement;}/*** 查询跟围栏关联的点的位置，返回点，同步返回点之后在页面上绘制所有的点*/@PostMapping("/get/points/{id}")@ResponseBodypublic List<PointLocate> getUserList(@PathVariable("id") Long id){ArrayList<PointLocate> pointLocates = new ArrayList<>();pointLocates = tigerService.findUserByTigerId();System.out.println("关联的位置信息如下");for (PointLocate pointLocate : pointLocates) {System.out.println(pointLocate);}return pointLocates;}}
8.4 LocatePointUtil.java
import java.util.ArrayList;import java.util.List;public class LocatePointUtil {/***去掉中括号* String string = "[[[119.517199,32.216103],[119.514145,32.206021]" +* ",[119.526901,32.209412],[119.517199,32.216103]]]";* @param string* @return*/public static List<PointLocate> getPointLists(String string){List<PointLocate> locates = new ArrayList<PointLocate>();String s1 = string.replaceAll("\\[", "");String s2 = s1.replaceAll("]", "");System.out.println(s2);String[] split = s2.split(",");int length = split.length;List<PointLocate> pointLocates = new ArrayList<PointLocate>();for (int i=0;i<length-3;i=i+2){pointLocates.add(new PointLocate(split[i],split[i+1]));}return pointLocates;}}
8.7数据库触发器
在用户的status状态字段发生变化的时候，例如1->0 在报警信息表中添加一个离开的记录。
九、代码分享
最后，近期代码还在整理，整理好了我会放在github上，有用的话请给个star。
十、参考的博客
