ManagementOKTravel/guns-admin/src/main/java/com/stylefeng/guns/modular/system/controller/specialTrain/TSiteController.java
@@ -153,7 +153,10 @@ tSiteService.insert(tSite); //添加站点区域 addLocation(subArr,tSite.getId()); String s = addLocation(subArr, tSite.getId()); if (s.equals("false")){ return ResultUtil.error("面积过大,请清除后重新绘制"); } return ResultUtil.success(); } @@ -162,7 +165,7 @@ * @param subArr * @param id */ public void addLocation(String subArr,Integer id){ public String addLocation(String subArr,Integer id){ JSONArray jsonArray = JSON.parseArray(subArr); int size = jsonArray.size(); for (int i = 0; i < size; i++){ @@ -198,6 +201,10 @@ if(type == 2){ List<String> fence = gdMapElectricFenceUtil.createFence(location.getId().toString(), location.getCoordinate()); if (fence.contains("-1")){ return "false"; } TLocation location1 = itLocationService.selectById(location.getId()); String s = ""; for(String gid : fence){ @@ -208,6 +215,7 @@ itLocationService.updateById(location1); } } return "success"; } /** ManagementOKTravel/guns-admin/src/main/java/com/stylefeng/guns/modular/system/util/GDMapElectricFenceUtil.java
@@ -13,6 +13,8 @@ import org.springframework.http.client.ClientHttpRequestFactory; import org.springframework.http.client.HttpComponentsClientHttpRequestFactory; import org.springframework.stereotype.Component; import org.springframework.util.LinkedMultiValueMap; import org.springframework.util.MultiValueMap; import org.springframework.web.client.RestTemplate; import java.text.ParseException; @@ -56,51 +58,47 @@ * @return */ public List<String> createFence(String id, String points){ Calendar calendar = Calendar.getInstance(); calendar.setTime(new Date()); calendar.set(Calendar.DAY_OF_MONTH, calendar.get(Calendar.DAY_OF_MONTH) + 35); SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd"); String format = simpleDateFormat.format(calendar.getTime()); String ak = key; List<String> result = new ArrayList<>(); //开始调用高德接口创建围栏 // points格式：lng,lat;lng,lat;... 或 lng,lat;radius（圆形） String[] s = points.split("_"); List<String> resoult = new ArrayList<>(); for(int i = 0; i < s.length; i++){ String[] split = s[i].split(";"); JSONObject json = new JSONObject(); json.put("name", "location_" + id); if(split.length == 2){ json.put("center", split[0]); json.put("radius", split[1]); }else{ json.put("points", s[i]); for (String item : s) { String url; MultiValueMap<String, String> params = new LinkedMultiValueMap<>(); params.add("ak", ak); params.add("service_id", "241187"); params.add("name", "location_" + id); String[] split = item.split(";"); if (split.length == 2 && split[1].matches("\\d+")) { // 圆形围栏 params.add("center", split[0]); params.add("radius", split[1]); url = "http://yingyan.baidu.com/api/v3/fence/createcircle"; } else { // 多边形围栏 params.add("vertexes", item); url = "https://yingyan.baidu.com/api/v3/fence/createpolygonfence"; } json.put("enable", "true"); json.put("valid_time", format); json.put("repeat", "Mon,Tues,Wed,Thur,Fri,Sat,Sun"); json.put("alert_condition", "enter;leave"); json.put("desc", id); params.add("coord_type", "bd09ll"); // 百度经纬度 params.add("denoise", "10"); // 去噪 params.add("alarm_condition", "enter;leave"); // 进出报警 HttpHeaders headers = new HttpHeaders(); MediaType type = MediaType.parseMediaType("application/json; charset=UTF-8"); headers.setContentType(type); headers.add("Accept", MediaType.APPLICATION_JSON.toString()); HttpEntity<String> formEntity = new HttpEntity<>(json.toString(), headers); headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED); HttpEntity<MultiValueMap<String, String>> request = new HttpEntity<>(params, headers); String url = "https://restapi.amap.com/v4/geofence/meta?key=" + key; String js = restTemplate.postForObject(url, formEntity, String.class); JSONObject jsonObject = JSON.parseObject(js); JSONObject data = jsonObject.getJSONObject("data"); String status = data.getString("status"); gdInterfaceService.saveData("https://restapi.amap.com/v4/geofence/meta", "创建电子围栏"); if(status.equals("0")){//创建成功 resoult.add(data.getString("gid")); String response = restTemplate.postForObject(url, request, String.class); JSONObject json = JSON.parseObject(response); if (json.getIntValue("status") == 0) { result.add(json.getString("fence_id")); }else{ result.add("-1"); } } return resoult; return result; } @@ -334,10 +332,18 @@ * @return */ public boolean deleteElectricFenc(String gid){ restTemplate.delete("https://restapi.amap.com/v4/geofence/meta?key={1}&gid={2}", key, gid); System.out.println("删除：" ); MultiValueMap<String, String> params = new LinkedMultiValueMap<>(); params.add("ak", key); params.add("service_id", "241187"); params.add("fence_ids", gid); System.out.println("删除："); HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED); HttpEntity<MultiValueMap<String, String>> request = new HttpEntity<>(params, headers); gdInterfaceService.saveData("https://restapi.amap.com/v4/geofence/meta", "删除电子围栏"); String response = restTemplate.postForObject("https://yingyan.baidu.com/api/v3/fence/delete", request, String.class); System.err.println(response); gdInterfaceService.saveData("https://yingyan.baidu.com/api/v3/fence/delete", "删除电子围栏"); return true; } ManagementOKTravel/guns-admin/src/main/java/com/stylefeng/guns/modular/system/util/GaoDeMapUtil.java
@@ -51,6 +51,7 @@ return positionObj; } /** * 发送Get请求 * ManagementOKTravel/guns-admin/src/main/webapp/WEB-INF/view/system/tSite/tSite_add.html
@@ -83,13 +83,12 @@ <label class="col-sm-2 control-label">电子围栏：</label> <div class="col-sm-8"> <div id="container" style="height: 350px;width: 1000px;"></div> <div class='info' style="margin-top:10px;position: absolute; z-index: 999; left: 20px; width: 450px;">操作说明：圆和矩形通过拖拽来绘制，其他覆盖物通过点击来绘制</div> <div class='info' style="margin-top:10px;position: absolute; z-index: 999; left: 20px; width: 450px;"> 操作说明：双击左键结束绘制 </div> <div class="input-card" style='margin-top:28px;width: 100rem; z-index: 999; bottom: 20px;'> <div class="input-item"> <!--<input type="radio" name='func' checked="" value='marker'><span class="input-text">画点</span>--> <!--<input type="radio" name='func' value='polyline'><span class="input-text">画折线</span> --> <input type="radio" name='func' value='polygon'><span class="input-text" style='width:5rem;'>画多边形</span> <!--<input type="radio" name='func' value='rectangle'><span class="input-text" style='width:5rem;'>画矩形</span> --> <input type="radio" name='func' value='circle'><span class="input-text" style='width:5rem;'>画圆</span> </div> <div class="input-item"> @@ -99,35 +98,6 @@ <input type="button" class="btn" value="结束编辑" onclick="closeEdit()" /> </div> </div> </div> <div class="col-sm-2"> <div class="form-group"> <label style='color:grey'>行政区边界查询</label> <div class="input-group"> <div class="input-group-btn"> <button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button">行政级别 </button> </div> <select id="level" class="form-control"> <option value="district">区</option> <option value="city">市</option> <option value="province">省</option> </select> </div> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-btn"> <button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button">名称/adcode </button> </div> <input id='district' class="layui-input form-control" type="text" value=''> </div> </div> <input id="find" type="button" class="btn btn-primary btn-sm" value="查询" /> </div> </div> @@ -164,7 +134,13 @@ </div> </div> <script src="https://webapi.amap.com/maps?v=1.4.15&key=c59c0ec8058a8305009eb315584e07d1&plugin=AMap.MouseTool,AMap.DistrictSearch,AMap.PolyEditor,AMap.RectangleEditor,AMap.CircleEditor"></script> <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=t5pcBZB5G4D11G9MzHq8Kik7jqzlTrAL"></script> <!-- 百度地图绘制工具库 --> <script type="text/javascript" src="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script> <link rel="stylesheet" href="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" /> <!-- 百度地图编辑器库 --> <script type="text/javascript" src="https://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script> <script src="${ctxPath}/static/modular/system/tSite/electricFence.js"></script> <script src="${ctxPath}/static/modular/system/tSite/tSite_info.js"></script> @} ManagementOKTravel/guns-admin/src/main/webapp/WEB-INF/view/system/tSite/tSite_edit.html
@@ -90,13 +90,12 @@ <label class="col-sm-2 control-label">电子围栏：</label> <div class="col-sm-8"> <div id="container" style="height: 350px;width: 1000px;"></div> <div class='info' style="margin-top:10px;position: absolute; z-index: 999; left: 20px; width: 450px;">操作说明：圆和矩形通过拖拽来绘制，其他覆盖物通过点击来绘制</div> <div class='info' style="margin-top:10px;position: absolute; z-index: 999; left: 20px; width: 450px;"> 操作说明：双击左键结束绘制 </div> <div class="input-card" style='margin-top:28px;width: 100rem; z-index: 999; bottom: 20px;'> <div class="input-item"> <!--<input type="radio" name='func' checked="" value='marker'><span class="input-text">画点</span>--> <!--<input type="radio" name='func' value='polyline'><span class="input-text">画折线</span> --> <input type="radio" name='func' value='polygon'><span class="input-text" style='width:5rem;'>画多边形</span> <!--<input type="radio" name='func' value='rectangle'><span class="input-text" style='width:5rem;'>画矩形</span> --> <input type="radio" name='func' value='circle'><span class="input-text" style='width:5rem;'>画圆</span> </div> <div class="input-item"> @@ -106,35 +105,6 @@ <input type="button" class="btn" value="结束编辑" onclick="closeEdit()" /> </div> </div> </div> <div class="col-sm-2"> <div class="form-group"> <label style='color:grey'>行政区边界查询</label> <div class="input-group"> <div class="input-group-btn"> <button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button">行政级别 </button> </div> <select id="level" class="form-control"> <option value="district">区</option> <option value="city">市</option> <option value="province">省</option> </select> </div> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-btn"> <button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button">名称/adcode </button> </div> <input id='district' class="layui-input form-control" type="text" value=''> </div> </div> <input id="find" type="button" class="btn btn-primary btn-sm" value="查询" /> </div> </div> <div class="form-group"> @@ -187,7 +157,12 @@ </div> </div> <script src="https://webapi.amap.com/maps?v=1.4.15&key=c59c0ec8058a8305009eb315584e07d1&plugin=AMap.MouseTool,AMap.DistrictSearch,AMap.PolyEditor,AMap.RectangleEditor,AMap.CircleEditor"></script> <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=t5pcBZB5G4D11G9MzHq8Kik7jqzlTrAL"></script> <!-- 百度地图绘制工具库 --> <script type="text/javascript" src="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script> <link rel="stylesheet" href="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" /> <!-- 百度地图编辑器库 --> <script type="text/javascript" src="https://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script> <script src="${ctxPath}/static/modular/system/tSite/electricFence.js"></script> <script src="${ctxPath}/static/modular/system/tSite/tSite_info.js"></script> @} ManagementOKTravel/guns-admin/src/main/webapp/WEB-INF/view/system/tSite/tSite_edit1.html
New file @@ -0,0 +1,193 @@ @layout("/common/_container.html"){ <div class="ibox float-e-margins"> <div class="ibox-content"> <div class="form-horizontal" id="siteInfoForm"> <input type="hidden" id="id" name="id" value="${item.id}"> <div class="row"> <div class="col-sm-12"> <div class=""> <h3 style="margin-left: 100px;">站点信息</h3> </div> <div class="form-group"> <label class="col-sm-2 control-label">站点名称：</label> <div class="col-sm-6"> <input type="text" class="form-control" id="name" name="name" value="${item.name}"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">所属城市：</label> <div class="col-sm-2"> <select class="form-control" id="provinceCode" onchange="TSiteInfoDlg.provinceChange(this)"> <option value="">选择省</option> @for(obj in provinceList){ <option value="${obj.code}" ${obj.code == item.provinceCode ? 'selected=selected' : ''}>${obj.name}</option> @} </select> </div> <div class="col-sm-2"> <select class="form-control" id="cityCode" onchange="TSiteInfoDlg.cityChange(this)"> <option value="">选择市</option> @for(obj in cityList){ <option value="${obj.code}" ${obj.code == item.cityCode ? 'selected=selected' : ''}>${obj.name}</option> @} </select> </div> <div class="col-sm-2"> <select class="form-control" id="districtCode"> <option value="">选择区</option> @for(obj in areaList){ <option value="${obj.code}" ${obj.code == item.districtCode ? 'selected=selected' : ''}>${obj.name}</option> @} </select> </div> </div> <div class=""> <h3 style="margin-left: 100px;margin-top: 70px;">站点区域</h3> </div> <div class="form-group"> <label class="col-sm-2 control-label">区域名称：</label> <div class="col-sm-2"> <input type="text" class="form-control" id="areaName" name="areaName"> </div> <label class="col-sm-1 control-label">类型：</label> <div class="col-sm-2" style="display: flex;align-items: center;"> <div class="radio radio-info radio-inline"> <input type="radio" id="areaType1" value="1" name="areaType" ${checked1} disabled onclick="TSiteInfoDlg.areaTypeClick(1)"> <label for="areaType1"> 行政区域 </label> </div> <div class="radio radio-success radio-inline"> <input type="radio" id="areaType2" value="2" name="areaType" ${checked2} disabled onclick="TSiteInfoDlg.areaTypeClick(2)"> <label for="areaType2"> 电子围栏 </label> </div> </div> <div class="col-sm-2"> <#button btnCss="info" name="添加" id="ensure" icon="fa-check" clickFun="TSiteInfoDlg.addArea()"/> </div> </div> <div class="form-group" id="areaType1Div" style="display: ${type1};"> <label class="col-sm-2 control-label">行政区域：</label> <div class="col-sm-2"> <select class="form-control" id="provinceCode1" onchange="TSiteInfoDlg.provinceChange1(this)"> <option value="">选择省</option> @for(obj in provinceList){ <option value="${obj.code}">${obj.name}</option> @} </select> </div> <div class="col-sm-2"> <select class="form-control" id="cityCode1" onchange="TSiteInfoDlg.cityChange1(this)"> <option value="">选择市</option> </select> </div> <div class="col-sm-2"> <select class="form-control" id="districtCode1"> <option value="">选择区</option> </select> </div> </div> <div class="form-group" id="areaType2Div" style="display: ${type2};"> <label class="col-sm-2 control-label">电子围栏：</label> <div class="col-sm-8"> <div id="container" style="height: 350px;width: 1000px;"></div> <div class='info' style="margin-top:10px;position: absolute; z-index: 999; left: 20px; width: 450px;">操作说明：圆和矩形通过拖拽来绘制，其他覆盖物通过点击来绘制</div> <div class="input-card" style='margin-top:28px;width: 100rem; z-index: 999; bottom: 20px;'> <div class="input-item"> <!--<input type="radio" name='func' checked="" value='marker'><span class="input-text">画点</span>--> <!--<input type="radio" name='func' value='polyline'><span class="input-text">画折线</span> --> <input type="radio" name='func' value='polygon'><span class="input-text" style='width:5rem;'>画多边形</span> <!--<input type="radio" name='func' value='rectangle'><span class="input-text" style='width:5rem;'>画矩形</span> --> <input type="radio" name='func' value='circle'><span class="input-text" style='width:5rem;'>画圆</span> </div> <div class="input-item"> <input id="clear" type="button" class="btn" value="清除" /> <input id="close" type="button" class="btn" value="关闭绘图" /> <input type="button" class="btn" value="开始编辑" onclick="editAll()" /> <input type="button" class="btn" value="结束编辑" onclick="closeEdit()" /> </div> </div> </div> <div class="col-sm-2"> <div class="form-group"> <label style='color:grey'>行政区边界查询</label> <div class="input-group"> <div class="input-group-btn"> <button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button">行政级别 </button> </div> <select id="level" class="form-control"> <option value="district">区</option> <option value="city">市</option> <option value="province">省</option> </select> </div> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-btn"> <button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button">名称/adcode </button> </div> <input id='district' class="layui-input form-control" type="text" value=''> </div> </div> <input id="find" type="button" class="btn btn-primary btn-sm" value="查询" /> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">已添加区域</label> <div class="col-sm-6"> <div style="height: 200px; border: 1px solid #e5e6e7;overflow-y: auto;"> <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr> <th style="width: 300px;text-align: center;">添加时间</th> <th style="width: 300px;text-align: center;">区域名称</th> <th style="width: 100px;text-align: center;">操作</th> </tr> </thead> <tbody id="areaValue"> @for(obj in locationList!){ <tr class="areaValueClass"> <td style="text-align: center;"><input type="hidden" id="areaType1" name="areaType1" value="${obj.type}"> <input type="hidden" id="time" name="time" value="${obj.addTime}">${obj.addTime}</td> <td style="text-align: center;"> <input type="hidden" id="id" name="id" value="${obj.id}"> <input type="hidden" id="name" name="name" value="${obj.name}"> <input type="hidden" id="provinceCode1" name="provinceCode1" value="${obj.provinceCode}"> <input type="hidden" id="province1" name="province1" value="${obj.province}"> <input type="hidden" id="cityCode1" name="cityCode1" value="${obj.cityCode}"> <input type="hidden" id="city1" name="city1" value="${obj.city}"> <input type="hidden" id="districtCode1" name="districtCode1" value="${obj.districtCode}"> <input type="hidden" id="district1" name="district1" value="${obj.district}"> <input type="hidden" id="coordinate1" name="coordinate1" value="${obj.coordinate}"> ${obj.name}</td> <td style="text-align: center;"><button onclick="deleteSub(this)">移除</button></td> </tr> @} </tbody> </table> </div> </div> </div> </div> </div> <div class="row btn-group-m-t"> <div class="col-sm-10 col-sm-offset-5"> <#button btnCss="info" name="提交" id="ensure" icon="fa-check" clickFun="TSiteInfoDlg.editSubmit()"/> <#button btnCss="danger" name="取消" id="cancel" icon="fa-eraser" clickFun="TSiteInfoDlg.close()"/> </div> </div> </div> </div> </div> <script src="https://webapi.amap.com/maps?v=1.4.15&key=c59c0ec8058a8305009eb315584e07d1&plugin=AMap.MouseTool,AMap.DistrictSearch,AMap.PolyEditor,AMap.RectangleEditor,AMap.CircleEditor"></script> <script src="${ctxPath}/static/modular/system/tSite/electricFence.js"></script> <script src="${ctxPath}/static/modular/system/tSite/tSite_info.js"></script> @} ManagementOKTravel/guns-admin/src/main/webapp/static/modular/system/tSite/electricFence.js
@@ -1,196 +1,160 @@ var map = new AMap.Map('container',{ resizeEnable: true, zoom:10 }); // 初始化地图 var map = new BMap.Map('container'); var point = new BMap.Point(114.329123,29.847218); map.centerAndZoom(point, 10); map.enableScrollWheelZoom(); var value = ""; map.getCity( callback=function (result) { value = result.city; drawBounds(); } ); var mouseTool = new AMap.MouseTool(map); //监听draw事件可获取画好的覆盖物 // 全局变量 var coordinate = ''; var overlays = []; var name = null; var coordinate = '';//存储坐标 var objs = {//存储各种类型的覆盖物对象 "polyline":[], "polygon":[], "rectangle":[], "circle":[] var objs = { "polyline": [], "polygon": [], "rectangle": [], "circle": [] }; var editors = []; mouseTool.on('draw',function(e){ overlays.push(e.obj); console.log(e.obj.getPath()); switch (name) { case 'polyline':{//折线图 var polyline = e.obj.getPath(); getCoordinate(polyline); objs.polyline.push(e.obj); break; } case 'polygon':{//多边形 var polygon = e.obj.getPath(); getCoordinate(polygon); objs.polygon.push(e.obj); break; } case 'rectangle':{//矩形 var rectangle = e.obj.getPath(); getCoordinate(rectangle); objs.rectangle.push(e.obj); break; } case 'circle':{//圆形 var center = e.obj.getCenter(); var radius = e.obj.getRadius(); if(radius > 5000){ Feng.error("创建电子围栏失败，圆半径不能大于5000米"); return; // 初始化绘图工具 var drawingManager = new BMapLib.DrawingManager(map, { isOpen: false, enableDrawingTool: true, drawingToolOptions: { anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new BMap.Size(5, 5), drawingModes: [ 'polygon', // 修改这里 'circle' // 修改这里 ] }, polygonOptions: { strokeColor: "#80d8ff", fillColor: "#00b0ff", strokeWeight: 2, strokeOpacity: 0.8 }, circleOptions: { strokeColor: "#80d8ff", fillColor: "#00b0ff", strokeWeight: 2, strokeOpacity: 0.8 } }); // 添加提示信息 function showDrawingTips() { var tips = document.createElement('div'); tips.className = 'drawing-tips'; tips.style.cssText = 'position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,0.8); padding: 5px 10px; border-radius: 4px; z-index: 1000;'; tips.innerHTML = '提示：双击左键结束绘制'; document.getElementById('container').appendChild(tips); // 3秒后自动消失 setTimeout(function() { tips.style.display = 'none'; }, 3000); } // 监听绘制完成事件 drawingManager.addEventListener('overlaycomplete', function(e) { console.log("绘制完成事件触发，类型:", e.type); var overlay = e.overlay; overlays.push(overlay); try { // 修改判断条件，使用字符串比较 if (e.type === 'polygon') { var path = overlay.getPath(); console.log("多边形路径点:", path); if (path && path.length > 0) { var str = ''; for (var i = 0; i < path.length; i++) { str += path[i].lat + ',' + path[i].lng + ';'; } coordinate = str.substring(0, str.length - 1); objs.polygon.push(overlay); console.log("多边形绘制完成，当前坐标:", coordinate); } else { console.error("多边形路径点为空"); } coordinate += center.lng + ',' + center.lat + ';' + radius + "_"; objs.circle.push(e.obj); break; } } console.log(coordinate); }) } else if (e.type === 'circle') { var center = overlay.getCenter(); var radius = overlay.getRadius(); console.log("圆形中心点:", center, "半径:", radius); var district = null; var polygons=[]; function drawBounds() { if(value == ''){ value = '北京市'; } //加载行政区划插件 if(!district){ //实例化DistrictSearch var opts = { subdistrict: 0, //获取边界不需要返回下级行政区 extensions: 'all', //返回行政区边界坐标组等具体信息 level: 'district' //查询行政级别为 市 }; district = new AMap.DistrictSearch(opts); } //行政区查询 district.setLevel(document.getElementById('level').value) district.search(value, function(status, result) { map.remove(polygons)//清除上次结果 polygons = []; var bounds = result.districtList[0].boundaries; if (bounds) { for (var i = 0, l = bounds.length; i < l; i++) { //生成行政区划polygon var polygon = new AMap.Polygon({ strokeWeight: 1, path: bounds[i], fillOpacity: 0.4, fillColor: '#80d8ff', strokeColor: '#0091ea' }); polygons.push(polygon); if (center && radius) { if (radius > 5000) { Feng.error("创建电子围栏失败，圆半径不能大于5000米"); map.removeOverlay(overlay); return; } coordinate = center.lat + ',' + center.lng + ';' + radius; objs.circle.push(overlay); console.log("圆形绘制完成，当前坐标:", coordinate); } else { console.error("圆形参数不完整"); } } map.add(polygons) map.setFitView(polygons);//视口自适应 }); } document.getElementById('find').onclick = function () { value = document.getElementById('district').value; if(value == ''){ value = "北京市"; } catch (error) { console.error("处理绘制完成事件时出错:", error); } drawBounds() }; document.getElementById('district').onkeydown = function(e) { if (e.keyCode === 13) { value = document.getElementById('district').value; if(value == ''){ value = "北京市"; } drawBounds(); return false; } return true; }; }); // 绘制功能 function draw(type) { console.log("开始绘制，类型:", type); // 清除之前的坐标 coordinate = ''; //处理坐标结果 function getCoordinate(arr){ var str = ''; for(var i = 0; i < arr.length; i++){ var lng = arr[i].lng; var lat = arr[i].lat; str += lng + ',' + lat + ';'; } coordinate += str.substring(0, str.length - 1) + "_"; } function draw(type){ switch(type){ case 'marker':{ mouseTool.marker({ //同Marker的Option设置 }); break; try { switch (type) { case 'polygon': { drawingManager.setDrawingMode('polygon'); // 修改这里 drawingManager.open(); showDrawingTips(); break; } case 'circle': { drawingManager.setDrawingMode('circle'); // 修改这里 drawingManager.open(); break; } } case 'polyline':{ mouseTool.polyline({ strokeColor:'#80d8ff' //同Polyline的Option设置 }); break; } case 'polygon':{ mouseTool.polygon({ fillColor:'#00b0ff', strokeColor:'#80d8ff' //同Polygon的Option设置 }); break; } case 'rectangle':{ mouseTool.rectangle({ fillColor:'#00b0ff', strokeColor:'#80d8ff' //同Polygon的Option设置 }); break; } case 'circle':{ mouseTool.circle({ fillColor:'#00b0ff', strokeColor:'#80d8ff' //同Circle的Option设置 }); break; } } catch (error) { console.error("设置绘制模式时出错:", error); } } var radios = document.getElementsByName('func'); for(var i=0;i<radios.length;i+=1){ radios[i].onchange = function(e){ draw(e.target.value) name = e.target.value; } } // draw('marker') document.getElementById('clear').onclick = function(){ map.remove(overlays) // 添加一个直接获取坐标的函数 function getOverlayCoordinate(overlay) { try { if (overlay instanceof BMap.Polygon) { var path = overlay.getPath(); if (path && path.length > 0) { var str = ''; for (var i = 0; i < path.length; i++) { str += path[i].lat + ',' + path[i].lng + ';'; } return str.substring(0, str.length - 1); } } else if (overlay instanceof BMap.Circle) { var center = overlay.getCenter(); var radius = overlay.getRadius(); if (center && radius) { return center.lat + ',' + center.lng + ';' + radius; } } } catch (error) { console.error("获取坐标时出错:", error); } return ''; } // 清除按钮事件 document.getElementById('clear').onclick = function() { map.clearOverlays(); overlays = []; coordinate = ''; objs.circle = []; @@ -198,132 +162,125 @@ objs.polygon = []; objs.polyline = []; closeEdit(); console.log("清除后的坐标:", coordinate); } document.getElementById('close').onclick = function(){ mouseTool.close()//关闭，并清除覆盖物 for(var i=0;i<radios.length;i+=1){ // 关闭绘图按钮事件 document.getElementById('close').onclick = function() { drawingManager.close(); for (var i = 0; i < radios.length; i++) { radios[i].checked = false; } closeEdit(); console.log("关闭后的坐标:", coordinate); } //点击提交处理函数 function submitCoordinate(){ var name = $('#addressName').val(); if('' == name){ Feng.error('请填写地址名称'); return; } if('' == coordinate){ Feng.error('请在地图上规划区域'); return; } coordinate = coordinate.substring(0, coordinate.length - 1); } // 编辑所有覆盖物 function editAll() { coordinate = ''; editors = []; //折线 for(var i in objs.polyline){ var polyline = objs.polyline[i]; var polyEditor = new AMap.PolyEditor(map, polyline) polyEditor.on('addnode', function(event) { // log.info('触发事件：addnode') }) polyEditor.on('adjust', function(event) { // log.info('触发事件：adjust') }) polyEditor.on('removenode', function(event) { // log.info('触发事件：removenode') }) polyEditor.on('end', function(e) { var polyline = e.target.getPath(); getCoordinate(polyline); }) editors.push(polyEditor); polyEditor.open(); } //多边形 for(var i in objs.polygon){ // 多边形编辑 for (var i in objs.polygon) { var polygon = objs.polygon[i]; var polyEditor = new AMap.PolyEditor(map, polygon) polyEditor.on('addnode', function(event) { // log.info('触发事件：addnode') }) polyEditor.on('adjust', function(event) { // log.info('触发事件：adjust') }) polyEditor.on('removenode', function(event) { // log.info('触发事件：removenode') }) polyEditor.on('end', function(e) { var polygon = e.target.getPath(); getCoordinate(polygon); }) editors.push(polyEditor); polyEditor.open(); var polygonEditor = new BMapLib.PolygonEditor(map, polygon); polygonEditor.addEventListener('drawend', function(e) { var path = e.overlay.getPath(); var str = ''; for (var i = 0; i < path.length; i++) { str += path[i].lat + ',' + path[i].lng + ';'; } coordinate = str.substring(0, str.length - 1); console.log("编辑后的坐标:", coordinate); }); editors.push(polygonEditor); polygonEditor.open(); } //矩形 for(var i in objs.rectangle){ var rectangle = objs.rectangle[i]; var rectangleEditor = new AMap.RectangleEditor(map, rectangle) rectangleEditor.on('adjust', function(event) { // log.info('触发事件：adjust') }) rectangleEditor.on('end', function(e) { var polygon = e.target.getPath(); getCoordinate(polygon); }) editors.push(rectangleEditor); rectangleEditor.open(); } //圆形 for(var i in objs.circle){ // 圆形编辑 for (var i in objs.circle) { var circle = objs.circle[i]; var circleEditor = new AMap.CircleEditor(map, circle) circleEditor.on('move', function(event) { // log.info('触发事件：move') }) circleEditor.on('adjust', function(e) { var radius = e.target.getRadius(); if(radius > 5000){ var circleEditor = new BMapLib.CircleEditor(map, circle); circleEditor.addEventListener('drawend', function(e) { var center = e.overlay.getCenter(); var radius = e.overlay.getRadius(); if (radius > 5000) { Feng.error("创建电子围栏失败，圆半径不能大于5000米"); return; } }) circleEditor.on('end', function(e) { var center = e.target.getCenter(); var radius = e.target.getRadius(); coordinate += center.lng + ',' + center.lat + ';' + radius + "_"; }) coordinate = center.lat + ',' + center.lng + ';' + radius; console.log("编辑后的坐标:", coordinate); }); editors.push(circleEditor); circleEditor.open(); } } // 关闭编辑 function closeEdit() { for(var i in editors){ var editor = editors[i]; editor.close(); for (var i = 0; i < editors.length; i++) { editors[i].close(); } editors = []; } // 添加提交函数 function submitCoordinate() { console.log("提交时的坐标:", coordinate); if (!coordinate || coordinate.trim() === '') { Feng.error('请在地图上规划区域'); return false; } return coordinate; } // 测试函数 // 修改测试函数 function testCoordinate() { console.log("当前坐标值:", coordinate); console.log("当前覆盖物数量:", overlays.length); console.log("多边形数量:", objs.polygon.length); console.log("圆形数量:", objs.circle.length); // 尝试从最后一个覆盖物获取坐标 if (overlays.length > 0) { var lastOverlay = overlays[overlays.length - 1]; var newCoordinate = getOverlayCoordinate(lastOverlay); console.log("从最后一个覆盖物获取的坐标:", newCoordinate); if (newCoordinate) { coordinate = newCoordinate; } } } // 绑定单选按钮事件 var radios = document.getElementsByName('func'); for (var i = 0; i < radios.length; i++) { radios[i].onchange = function(e) { draw(e.target.value); } } // 在绘制完成后自动测试 drawingManager.addEventListener('overlaycomplete', function(e) { setTimeout(testCoordinate, 10); // 延迟1秒后测试 }); // 页面加载完成后初始化 $(document).ready(function() { // 初始化地图 initMap(); // 监听市区选择变化 $("#areaCode").change(function() { console.log("市区选择变化，重新获取地图数据"); getMapData(); }); }); // 初始化地图 function initMap() { // 设置地图中心点和缩放级别 var point = new BMap.Point(114.329123,29.847218); map.centerAndZoom(point, 15); map.enableScrollWheelZoom(); } ManagementOKTravel/guns-admin/src/main/webapp/static/modular/system/tSite/electricFence1.js
New file @@ -0,0 +1,329 @@ var map = new AMap.Map('container',{ resizeEnable: true, zoom:10 }); var value = ""; map.getCity( callback=function (result) { value = result.city; drawBounds(); } ); var mouseTool = new AMap.MouseTool(map); //监听draw事件可获取画好的覆盖物 var overlays = []; var name = null; var coordinate = '';//存储坐标 var objs = {//存储各种类型的覆盖物对象 "polyline":[], "polygon":[], "rectangle":[], "circle":[] }; var editors = []; mouseTool.on('draw',function(e){ overlays.push(e.obj); console.log(e.obj.getPath()); switch (name) { case 'polyline':{//折线图 var polyline = e.obj.getPath(); getCoordinate(polyline); objs.polyline.push(e.obj); break; } case 'polygon':{//多边形 var polygon = e.obj.getPath(); getCoordinate(polygon); objs.polygon.push(e.obj); break; } case 'rectangle':{//矩形 var rectangle = e.obj.getPath(); getCoordinate(rectangle); objs.rectangle.push(e.obj); break; } case 'circle':{//圆形 var center = e.obj.getCenter(); var radius = e.obj.getRadius(); if(radius > 5000){ Feng.error("创建电子围栏失败，圆半径不能大于5000米"); return; } coordinate += center.lng + ',' + center.lat + ';' + radius + "_"; objs.circle.push(e.obj); break; } } console.log(coordinate); }) var district = null; var polygons=[]; function drawBounds() { if(value == ''){ value = '北京市'; } //加载行政区划插件 if(!district){ //实例化DistrictSearch var opts = { subdistrict: 0, //获取边界不需要返回下级行政区 extensions: 'all', //返回行政区边界坐标组等具体信息 level: 'district' //查询行政级别为 市 }; district = new AMap.DistrictSearch(opts); } //行政区查询 district.setLevel(document.getElementById('level').value) district.search(value, function(status, result) { map.remove(polygons)//清除上次结果 polygons = []; var bounds = result.districtList[0].boundaries; if (bounds) { for (var i = 0, l = bounds.length; i < l; i++) { //生成行政区划polygon var polygon = new AMap.Polygon({ strokeWeight: 1, path: bounds[i], fillOpacity: 0.4, fillColor: '#80d8ff', strokeColor: '#0091ea' }); polygons.push(polygon); } } map.add(polygons) map.setFitView(polygons);//视口自适应 }); } document.getElementById('find').onclick = function () { value = document.getElementById('district').value; if(value == ''){ value = "北京市"; } drawBounds() }; document.getElementById('district').onkeydown = function(e) { if (e.keyCode === 13) { value = document.getElementById('district').value; if(value == ''){ value = "北京市"; } drawBounds(); return false; } return true; }; //处理坐标结果 function getCoordinate(arr){ var str = ''; for(var i = 0; i < arr.length; i++){ var lng = arr[i].lng; var lat = arr[i].lat; str += lng + ',' + lat + ';'; } coordinate += str.substring(0, str.length - 1) + "_"; } function draw(type){ switch(type){ case 'marker':{ mouseTool.marker({ //同Marker的Option设置 }); break; } case 'polyline':{ mouseTool.polyline({ strokeColor:'#80d8ff' //同Polyline的Option设置 }); break; } case 'polygon':{ mouseTool.polygon({ fillColor:'#00b0ff', strokeColor:'#80d8ff' //同Polygon的Option设置 }); break; } case 'rectangle':{ mouseTool.rectangle({ fillColor:'#00b0ff', strokeColor:'#80d8ff' //同Polygon的Option设置 }); break; } case 'circle':{ mouseTool.circle({ fillColor:'#00b0ff', strokeColor:'#80d8ff' //同Circle的Option设置 }); break; } } } var radios = document.getElementsByName('func'); for(var i=0;i<radios.length;i+=1){ radios[i].onchange = function(e){ draw(e.target.value) name = e.target.value; } } // draw('marker') document.getElementById('clear').onclick = function(){ map.remove(overlays) overlays = []; coordinate = ''; objs.circle = []; objs.rectangle = []; objs.polygon = []; objs.polyline = []; closeEdit(); } document.getElementById('close').onclick = function(){ mouseTool.close()//关闭，并清除覆盖物 for(var i=0;i<radios.length;i+=1){ radios[i].checked = false; } closeEdit(); } //点击提交处理函数 function submitCoordinate(){ var name = $('#addressName').val(); if('' == name){ Feng.error('请填写地址名称'); return; } if('' == coordinate){ Feng.error('请在地图上规划区域'); return; } coordinate = coordinate.substring(0, coordinate.length - 1); } function editAll() { coordinate = ''; editors = []; //折线 for(var i in objs.polyline){ var polyline = objs.polyline[i]; var polyEditor = new AMap.PolyEditor(map, polyline) polyEditor.on('addnode', function(event) { // log.info('触发事件：addnode') }) polyEditor.on('adjust', function(event) { // log.info('触发事件：adjust') }) polyEditor.on('removenode', function(event) { // log.info('触发事件：removenode') }) polyEditor.on('end', function(e) { var polyline = e.target.getPath(); getCoordinate(polyline); }) editors.push(polyEditor); polyEditor.open(); } //多边形 for(var i in objs.polygon){ var polygon = objs.polygon[i]; var polyEditor = new AMap.PolyEditor(map, polygon) polyEditor.on('addnode', function(event) { // log.info('触发事件：addnode') }) polyEditor.on('adjust', function(event) { // log.info('触发事件：adjust') }) polyEditor.on('removenode', function(event) { // log.info('触发事件：removenode') }) polyEditor.on('end', function(e) { var polygon = e.target.getPath(); getCoordinate(polygon); }) editors.push(polyEditor); polyEditor.open(); } //矩形 for(var i in objs.rectangle){ var rectangle = objs.rectangle[i]; var rectangleEditor = new AMap.RectangleEditor(map, rectangle) rectangleEditor.on('adjust', function(event) { // log.info('触发事件：adjust') }) rectangleEditor.on('end', function(e) { var polygon = e.target.getPath(); getCoordinate(polygon); }) editors.push(rectangleEditor); rectangleEditor.open(); } //圆形 for(var i in objs.circle){ var circle = objs.circle[i]; var circleEditor = new AMap.CircleEditor(map, circle) circleEditor.on('move', function(event) { // log.info('触发事件：move') }) circleEditor.on('adjust', function(e) { var radius = e.target.getRadius(); if(radius > 5000){ Feng.error("创建电子围栏失败，圆半径不能大于5000米"); return; } }) circleEditor.on('end', function(e) { var center = e.target.getCenter(); var radius = e.target.getRadius(); coordinate += center.lng + ',' + center.lat + ';' + radius + "_"; }) editors.push(circleEditor); circleEditor.open(); } } function closeEdit() { for(var i in editors){ var editor = editors[i]; editor.close(); } } ManagementOKTravel/guns-admin/src/main/webapp/static/modular/system/tSite/tSite_info.js
@@ -328,7 +328,9 @@ return; } }else if (2 == areaType) { if("" == coordinate){ console.log(coordinate) console.log( editors) if("" == coordinate && editors.length == 0){ Feng.error('请在地图上规划区域'); return; }
