From 985f5f57515c9fe349bf2283ab6d76931ee3675b Mon Sep 17 00:00:00 2001
From: jjLv <1981429112@qq.com>
Date: Mon, 1 Apr 2024 13:24:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=9C=E4=B8=9A=E7=8E=AF=E5=A2=83=E6=8F=90?=
=?UTF-8?q?=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
js/personnelControl/personnelControl.js | 79 ++++++++++----------
pages/personnelControl/personnelControl.html | 9 ++-
2 files changed, 44 insertions(+), 44 deletions(-)
diff --git a/js/personnelControl/personnelControl.js b/js/personnelControl/personnelControl.js
index 8200b7f..ceeae38 100644
--- a/js/personnelControl/personnelControl.js
+++ b/js/personnelControl/personnelControl.js
@@ -179,6 +179,7 @@ document.addEventListener('DOMContentLoaded', function() {
navigator.geolocation.getCurrentPosition(function (position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
+ console.log(lon,lat)
map= new BMap.Map("map");
map.centerAndZoom(new BMap.Point(lon,lat), 11);
map.enableScrollWheelZoom(true);
@@ -186,53 +187,49 @@ document.addEventListener('DOMContentLoaded', function() {
var marker = new BMap.Marker(new BMap.Point(lon,lat)); // 创建标注
map.addOverlay(marker);
+
+ var overlays = [];
+ var overlaycomplete = function (e) {
+ overlays.push(e.overlay);
+ };
+
+ 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);
+ console.log(overlays)
+
+ function clearAll() {
+ for (var i = 0; i < overlays.length; i++) {
+ map.removeOverlay(overlays[i]);
+ }
+ overlays.length = 0
+ }
});
} else {
console.log("浏览器不支持 Geolocation API");
}
- let overlay; // 用于存储绘制的电子围栏
- // 添加按钮点击事件
- document.getElementById('customizeBtn').addEventListener('click', function() {
- document.getElementById('popup').style.display = 'block';
- let shapeSelect = document.getElementById('shape');
- let shapeType = shapeSelect.options[shapeSelect.selectedIndex].value;
- if (shapeType === 'circle') {
- map.addEventListener("click", drawCircle);
- } else if (shapeType === 'polygon') {
- map.addEventListener("click", drawPolygon);
- }
- });
- // 绘制圆形电子围栏
- function drawCircle(e) {
- if (overlay) {
- map.removeOverlay(overlay);
- }
- let center = e.point;
- let circle = new BMap.Circle(center, 2000, {
- fillColor: "blue",
- fillOpacity: 0.3,
- strokeColor: "blue",
- strokeWeight: 2,
- strokeOpacity: 0.8
- });
- map.addOverlay(circle);
- overlay = circle;
- }
- // 绘制多边形电子围栏
- function drawPolygon(e) {
- if (overlay) {
- map.removeOverlay(overlay);
- }
- let polygon = new BMap.Polygon([
- new BMap.Point(e.point.lng, e.point.lat),
- new BMap.Point(e.point.lng + 0.1, e.point.lat + 0.1),
- new BMap.Point(e.point.lng + 0.1, e.point.lat - 0.1)
- ], {strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.8, fillColor: "red", fillOpacity: 0.3});
- map.addOverlay(polygon);
- overlay = polygon;
- }
});
diff --git a/pages/personnelControl/personnelControl.html b/pages/personnelControl/personnelControl.html
index aec04bc..01f81fa 100644
--- a/pages/personnelControl/personnelControl.html
+++ b/pages/personnelControl/personnelControl.html
@@ -13,7 +13,10 @@
-
+
+
+
+
人员管控
@@ -21,7 +24,7 @@