增加网格绘制隐藏背景和隐藏背景颜色按钮

src/main/resources/static/assets/js/baidu-map/baidu-map-1.0.0.min.js

@@ -26,14 +26,16 @@ function BaiduMap(mapId, mapConfig) {
             BLACK: '#393D49'
         }
     };
-    // 标签数组
-    this.labelArray = [];
     // 网格操作
     this.gridOption = {
         const: {
             RELATION_NAME_ID: 'B_GRID_RELATION_NAME',
             START_BTN_ID: 'B_GRID_START_BTN',
             CANCEL_BTN_ID: 'B_GRID_CANCEL_BTN',
+            HIDE_BACKGROUND_BTN_ID: 'HIDE_BACKGROUND_BTN',
+            SHOW_BACKGROUND_BTN_ID: 'SHOW_BACKGROUND_BTN',
+            NO_BACKGROUND_COLOR_BTN_ID: 'NO_BACKGROUND_COLOR_BTN',
+            SHOW_BACKGROUND_COLOR_BTN_ID: 'SHOW_BACKGROUND_COLOR_BTN',
             RIGHT_BOX_ID: 'B_GRID_RIGHT_BOX',
             RIGHT_BOX_WIDTH: 80,
             RIGHT_BOX_HEIGHT: 94,
@@ -75,8 +77,10 @@ function BaiduMap(mapId, mapConfig) {
             COLOR_B: 'B_COLOR_B',
         }
     };
+    this.backgroundGridArray = [];
     this.mapConfig = mapConfig;
     this.relationGroup = null;
+
 }
 
 // 关联
@@ -285,17 +289,19 @@ BaiduMap.prototype.getCenterPoint = function (pathPointArray) {
 BaiduMap.prototype.setLabelFontSize = function (size) {
     // 全部隐藏
     if (size === 0) {
-        for (var i = 0, label; label = this.labelArray[i++];) {
+        for (var i = 0, item; item = this.backgroundGridArray[i++];) {
-            label.hide();
+            item.label.overlay.hide();
         }
         return;
     }
-    for (var i = 0, label; label = this.labelArray[i++];) {
+    for (var i = 0, item; item = this.backgroundGridArray[i++];) {
+        var label = item.label.overlay;
+        if (!item.label.isShow) {
+            label.hide();
+            continue;
+        }
         label.show();
         label.setOffset(new BMap.Size(-label.content.length * size / 2, -size / 2));
-        label.setStyle({
-            fontSize: size + 'px'
-        })
     }
 }
 // 获得Map对象
@@ -493,10 +499,75 @@ BaiduMap.prototype.getGridBarBox = function () {
         return cancelOptionBtn;
     }
 
+    /**
+     * 隐藏背景按钮
+     */
+    function hideBackgroundBtn() {
+        var btn = document.createElement('a');
+        self.setABtnElementAttribute(btn, self.gridOption.const.HIDE_BACKGROUND_BTN_ID, '隐藏背景', 'rgb(240 159 27)');
+        btn.addEventListener('click', function (event) {
+            self.hideBackgroundGrid();
+            document.getElementById(self.gridOption.const.HIDE_BACKGROUND_BTN_ID).style.display = 'none';
+            document.getElementById(self.gridOption.const.SHOW_BACKGROUND_BTN_ID).style.display = 'inline-block';
+        });
+        return btn;
+    }
+
+    /**
+     * 显示背景按钮
+     * @return {*}
+     */
+    function showBackgroundBtn() {
+        var btn = document.createElement('a');
+        btn.style.display = 'none';
+        self.setABtnElementAttribute(btn, self.gridOption.const.SHOW_BACKGROUND_BTN_ID, '显示背景', 'rgb(240 159 27)');
+        btn.addEventListener('click', function (event) {
+            self.showBackgroundGrid();
+            document.getElementById(self.gridOption.const.SHOW_BACKGROUND_BTN_ID).style.display = 'none';
+            document.getElementById(self.gridOption.const.HIDE_BACKGROUND_BTN_ID).style.display = 'inline-block';
+        });
+        return btn;
+    }
+
+    /**
+     * 背景透明按钮
+     * @return {*}
+     */
+    function noBackgroundColorBtn() {
+        var btn = document.createElement('a');
+        self.setABtnElementAttribute(btn, self.gridOption.const.NO_BACKGROUND_COLOR_BTN_ID, '背景透明', 'rgb(240 159 27)');
+        btn.addEventListener('click', function (event) {
+            self.noBackgroundColorGrid();
+            document.getElementById(self.gridOption.const.NO_BACKGROUND_COLOR_BTN_ID).style.display = 'none';
+            document.getElementById(self.gridOption.const.SHOW_BACKGROUND_COLOR_BTN_ID).style.display = 'inline-block';
+        });
+        return btn;
+    }
+
+    /**
+     * 背景取消透明按钮
+     * @return {*}
+     */
+    function showBackgroundColorBtn() {
+        var showBackgroundBtn = document.createElement('a');
+        showBackgroundBtn.style.display = 'none';
+        self.setABtnElementAttribute(showBackgroundBtn, self.gridOption.const.SHOW_BACKGROUND_COLOR_BTN_ID, '显示背景', 'rgb(240 159 27)');
+        showBackgroundBtn.addEventListener('click', function (event) {
+            self.showBackgroundColorGrid();
+            document.getElementById(self.gridOption.const.SHOW_BACKGROUND_COLOR_BTN_ID).style.display = 'none';
+            document.getElementById(self.gridOption.const.NO_BACKGROUND_COLOR_BTN_ID).style.display = 'inline-block';
+        });
+        return showBackgroundBtn;
+    }
+
     // 初始化按钮组
     function initGridBarBtnGroup(gridBarBox) {
         gridBarBox.appendChild(getStartOptionBtn());
         gridBarBox.appendChild(getCancelOptionBtn());
+        gridBarBox.appendChild(hideBackgroundBtn());
+        gridBarBox.appendChild(showBackgroundBtn());
+        gridBarBox.appendChild(noBackgroundColorBtn());
+        gridBarBox.appendChild(showBackgroundColorBtn());
         gridBarBox.appendChild(getRelationName());
     }
 
@@ -703,8 +774,49 @@ BaiduMap.prototype.initBackgroundGrid = function (option) {
         });
         label.setOffset(new BMap.Size(-backgroundGrid.label.length * self.gridOption.const.LABEL_FONT_SIZE / 2, -self.gridOption.const.LABEL_FONT_SIZE / 2));
         label.setPosition(self.getCenterPoint(backgroundGrid.pointArray));
-        self.labelArray.push(label);
         self.map.addOverlay(label);
+        // 缓存网格与网格名称
+        self.backgroundGridArray.push({
+            polygon: {
+                isShow: true,
+                overlay: polygon
+            },
+            label: {
+                isShow: true,
+                overlay: label
+            }
+        });
+    }
+}
+BaiduMap.prototype.hideBackgroundGrid = function () {
+    var self = this;
+    for (var i = 0, item; item = self.backgroundGridArray[i++];) {
+        item.polygon.overlay.hide();
+        item.polygon.isShow = false;
+        item.label.overlay.hide();
+        item.label.isShow = false;
+    }
+}
+BaiduMap.prototype.showBackgroundGrid = function () {
+    var self = this;
+    for (var i = 0, item; item = self.backgroundGridArray[i++];) {
+        item.polygon.overlay.show();
+        item.polygon.isShow = true;
+        item.label.overlay.show();
+        item.label.isShow = true;
+    }
+}
+BaiduMap.prototype.noBackgroundColorGrid = function () {
+    var self = this;
+    for (var i = 0, item; item = self.backgroundGridArray[i++];) {
+        item.polygon.overlay.oldFillColor = item.polygon.overlay.getFillColor();
+        item.polygon.overlay.setFillColor('transparent');
+    }
+}
+BaiduMap.prototype.showBackgroundColorGrid = function () {
+    var self = this;
+    for (var i = 0, item; item = self.backgroundGridArray[i++];) {
+        item.polygon.overlay.setFillColor(item.polygon.overlay.oldFillColor);
     }
 }
 // 设置开始标记
@@ -848,7 +960,7 @@ BaiduMap.prototype.initGridOptionEvent = function () {
             return;
         }
         // 判断是否只能绘制一个网格
-        if(self.mapConfig.single && self.gridOption.gridArray.length > 0) {
+        if (self.mapConfig.single && self.gridOption.gridArray.length > 0) {
             return;
         }
         // 隐藏结束编辑按钮
@@ -913,8 +1025,8 @@ BaiduMap.prototype.setGridArray = function (gridArray) {
         setPolygon(grid);
     }
 }
-BaiduMap.prototype.setBoundary = function(areaName, option, callback) {
+BaiduMap.prototype.setBoundary = function (areaName, option, callback) {
-    if(!areaName) {
+    if (!areaName) {
         callback ? callback() : '';
         return;
     }
@@ -924,7 +1036,7 @@ BaiduMap.prototype.setBoundary = function(areaName, option, callback) {
         var count = rs.boundaries.length; //行政区域的点有多少个
         if (count === 0) {
             console.log('未能获取当前输入行政区域');
-            return ;
+            return;
         }
         var ply = new BMap.Polygon(rs.boundaries[0], {
             strokeColor: option && option.strokeColor ? option.strokeColor : 'black',

src/main/resources/templates/grid/grid/default/save.html

@@ -93,6 +93,9 @@
                                 </div>
                             </div>
                         </div>
+                        <input type="hidden" id="userIds" name="userIds">
+                        <input type="hidden" id="userNames" name="userNames" class="layui-input" value="" placeholder="选择人员" maxlength="255" readonly>
+                        <!--
                         <div class="layui-form-item">
                             <label class="layui-form-label layui-form-label-up">添加人员</label>
                             <div class="layui-input-block layui-input-block-down">
@@ -100,6 +103,7 @@
                                 <input type="text" id="userNames" name="userNames" class="layui-input" value="" placeholder="选择人员" maxlength="255" readonly>
                             </div>
                         </div>
+                        -->
                         <div class="layui-form-item layui-layout-admin">
                             <div class="layui-input-block">
                                 <div class="layui-footer" style="left: 0;">