项目一、调用百度地图api实现电子围栏和报警信息关联

最新推荐文章于 2024-05-29 14:16:59 发布

开拖拉机的小许

最新推荐文章于 2024-05-29 14:16:59 发布

阅读量4.1k

点赞数 3

分类专栏：项目文章标签：百度 postgresql

本文链接：https://blog.csdn.net/qq_39125941/article/details/120101847

版权

本文介绍了利用Springboot、mybatis、postgreSQL、postGis、websocket和百度地图API构建电子围栏及报警信息关联的项目。通过绘制多边形、存储围栏、实时位置显示以及websocket消息推送，实现了用户进出围栏的监控和报警信息的前端实时显示。文章还提及了数据库触发器在状态变化时记录报警信息的功能，并计划在GitHub上分享代码。

摘要由CSDN通过智能技术生成

前段时间香克斯去实习去了，由于一些原因只实习了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" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<%@ taglib uri="http://java.sun.com/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.map.baidu.com/api?v=2.0&ak=BzB3qjNfqnr8VWAx4dwKEFQ1q7BFyQXI"></script>
	<!--	导入依赖的js-->
	<!--加载鼠标绘制工具-->
	<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
	<link rel="