调整网格绘制内容

module-map/src/main/java/ink/wgink/module/map/controller/api/grid/GridController.java

@@ -105,6 +105,17 @@ public class GridController extends DefaultBaseController {
         return gridService.listAllByAreaCode(areaCode, params);
     }
 
+    @ApiOperation(value = "全部网格列表", notes = "全部网格列表接口")
+    @ApiImplicitParams({
+            @ApiImplicitParam(name = "areaCode", value = "地区编码", paramType = "path")
+    })
+    @ApiResponses({@ApiResponse(code = 400, message = "请求失败", response = ErrorResult.class)})
+    @GetMapping("list-all-with-point/area-code/{areaCode}")
+    public List<GridDTO> listAllWithPointByAreaCode(@PathVariable("areaCode") String areaCode) {
+        Map<String, Object> params = requestParams();
+        return gridService.listAllWithPointByAreaCode(areaCode, params);
+    }
+
     @ApiOperation(value = "子网格列表", notes = "网格列表接口")
     @ApiImplicitParams({
             @ApiImplicitParam(name = "areaCode", value = "地区编码", paramType = "path")

module-map/src/main/java/ink/wgink/module/map/controller/route/grid/GridRouteController.java

@@ -45,6 +45,13 @@ public class GridRouteController {
         return mv;
     }
 
+    @GetMapping("show-grid")
+    public ModelAndView showGrid() {
+        ModelAndView mv = new ModelAndView("grid/grid/default/show-grid");
+        mv.addObject("baiduMapProperties", baiduMapProperties);
+        return mv;
+    }
+
     @GetMapping("list")
     public ModelAndView list() {
         return new ModelAndView("grid/grid/default/list");

module-map/src/main/java/ink/wgink/module/map/service/grid/IGridService.java

@@ -268,4 +268,12 @@ public interface IGridService {
      * @return
      */
     List<GridDTO> listWithPointByRelationId(String relationId);
+
+    /**
+     * 全部网格（带网格点）列表
+     * @param areaCode
+     * @param params
+     * @return
+     */
+    List<GridDTO> listAllWithPointByAreaCode(String areaCode, Map<String, Object> params);
 }

module-map/src/main/java/ink/wgink/module/map/service/grid/impl/GridServiceImpl.java

@@ -403,6 +403,12 @@ public class GridServiceImpl extends DefaultBaseService implements IGridService
         return gridDTOs;
     }
 
+    @Override
+    public List<GridDTO> listAllWithPointByAreaCode(String areaCode, Map<String, Object> params) {
+        params.put("areaCodeLike", WStringUtil.cutContinuityRepeatCharDesc(areaCode, '0'));
+        return list(params, false, true);
+    }
+
     /**
      * 设置网格点
      *

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

@@ -913,8 +913,9 @@ BaiduMap.prototype.setGridArray = function (gridArray) {
         setPolygon(grid);
     }
 }
-BaiduMap.prototype.setBoundary = function(areaName, option) {
+BaiduMap.prototype.setBoundary = function(areaName, option, callback) {
     if(!areaName) {
+        callback ? callback() : '';
         return;
     }
     var self = this;
@@ -929,8 +930,10 @@ BaiduMap.prototype.setBoundary = function(areaName, option) {
             strokeColor: option && option.strokeColor ? option.strokeColor : 'black',
             strokeWeight: option && option.strokeWeight ? option.strokeWeight : 2,
             fillColor: option && option.fillColor ? option.fillColor : 'white',
-            fillOpacity: option && option.fillOpacity ? option.fillOpacity : 0.01
+            fillOpacity: option && option.fillOpacity ? option.fillOpacity : 0.01,
         }); //建立多边形覆盖物
         self.map.addOverlay(ply);  //添加覆盖物
+        callback ? callback() : '';
     });
+
 }

module-map/src/main/resources/templates/grid/grid/default/get.html

@@ -121,12 +121,14 @@
         function initData() {
             top.restAjax.get(top.restAjax.path('api/grid/get/{gridId}', [gridId]), {}, null, function(code, data) {
                 initMap(function() {
-                    // 背景层
+                    baiduMap.setBoundary([[${baiduMapProperties.boundary}]], null, function() {
-                    initGridBG(data.areaCode, function() {
+                        // 背景层
-                        // 网格层
+                        initGridBG(data.areaCode, function() {
-                        var grid = new BaiduMap.Grid(data.gridId, data.pointArray);
+                            // 网格层
-                        grid.setFillColor(data.fillColor);
+                            var grid = new BaiduMap.Grid(data.gridId, data.pointArray);
-                        baiduMap.setGridArray([grid]);
+                            grid.setFillColor(data.fillColor);
+                            baiduMap.setGridArray([grid]);
+                        });
                     });
                 });
             }, function (code, data) {

module-map/src/main/resources/templates/grid/grid/default/list.html

@@ -20,9 +20,12 @@
                         <div class="layui-inline">
                             <input type="text" id="keywords" class="layui-input search-item search-item-width-100" placeholder="输入关键字">
                         </div>
-                        <button type="button" id="search" class="layui-btn layui-btn-sm">
+                        <div class="layui-btn-group">
-                            <i class="fa fa-lg fa-search"></i> 搜索
+                            <button type="button" id="search" class="layui-btn layui-btn-sm">
-                        </button>
+                                <i class="fa fa-lg fa-search"></i> 搜索
+                            </button>
+                            <button type="button" id="showGrid" class="layui-btn layui-btn-sm">查看网格</button>
+                        </div>
                     </div>
                     <table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
                     <!-- 表头按钮组 -->
@@ -243,6 +246,15 @@
         $(document).on('click', '#search', function() {
             reloadTable(1);
         });
+        $(document).on('click', '#showGrid', function() {
+            top.dialog.open({
+                url: top.restAjax.path('route/grid/show-grid', []),
+                title: '查看网格',
+                width: '80%',
+                height: '80%',
+                onClose: function() {}
+            });
+        });
         // 事件 - 增删改
         table.on('toolbar(dataTable)', function(obj) {
             var layEvent = obj.event;

module-map/src/main/resources/templates/grid/grid/default/save.html

@@ -62,7 +62,7 @@
                             <label class="layui-form-label layui-form-label-up">选择地区</label>
                             <div class="layui-input-block layui-input-block-down">
                                 <input type="hidden" id="areaCode" name="areaCode">
-                                <input type="text" id="areaName" name="areaName" class="layui-input" value="" placeholder="请选择地区" maxlength="255" readonly lay-verify="required">
+                                <input type="text" id="areaName" name="areaName" class="layui-input" value="" placeholder="请选择地区" maxlength="255" lay-verify="required">
                             </div>
                         </div>
                         <div class="layui-form-item">
@@ -248,9 +248,9 @@
                 height: '225px',
                 onClose: function() {
                     var selectedAreaArray = top.dialog.dialogData.selectedAreaArray;
-                    var areaCode = '';
-                    var areaName = '';
                     if(selectedAreaArray.length > 0) {
+                        var areaCode = '';
+                        var areaName = '';
                         areaCode = selectedAreaArray[selectedAreaArray.length - 1].areaCode;
                         for(var i = 0, item; item = selectedAreaArray[i++];) {
                             if(areaName) {
@@ -259,9 +259,9 @@
                             areaName += item.areaName;
                         }
                         initGridBG(areaCode);
+                        $('#areaCode').val(areaCode);
+                        $('#areaName').val(areaName);
                     }
-                    $('#areaCode').val(areaCode);
-                    $('#areaName').val(areaName);
                 }
             })
         });

module-map/src/main/resources/templates/grid/grid/default/show-grid.html

@@ -0,0 +1,134 @@
+<!doctype html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <base th:href="${#request.getContextPath() + '/'}">
+    <meta charset="utf-8">
+    <meta name="renderer" content="webkit">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
+    <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
+    <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
+    <style>
+        .layui-form-label-up {width: 100% !important; height: 30px !important; line-height: 30px !important; border: none !important; padding: 0px !important; font-size: 15px; background-color: transparent !important; text-align: left !important;}
+        .layui-input-block-down {margin: 0px !important; left: 0px !important;}
+        .layui-input-block-down .layui-form-select .layui-edge {top: 74%;}
+    </style>
+</head>
+<body>
+<div class="layui-anim layui-anim-fadein">
+    <div class="layui-card">
+        <div class="layui-card-body" style="padding: 15px;">
+            <form class="layui-form layui-form-pane" lay-filter="dataForm">
+                <div id="baiduMapContainer"></div>
+            </form>
+        </div>
+    </div>
+</div>
+<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=mlfOah4gWM1FjEo9CmlI64zK6MhyiMPW"></script>
+<script type="text/javascript" src="static/baidu-map/baidu-map-1.0.0.min.js"></script>
+<script src="assets/layuiadmin/layui/layui.js"></script>
+<script th:inline="javascript">
+    layui.config({
+        base: 'assets/layuiadmin/' //静态资源所在路径
+    }).extend({
+        index: 'lib/index' //主入口模块
+    }).use(['index', 'form', 'laydate', 'laytpl'], function(){
+        var $ = layui.$;
+        var $win = $(window);
+        var form = layui.form;
+        var laytpl = layui.laytpl;
+        var laydate = layui.laydate;
+        var queryParams = top.restAjax.params(window.location.href);
+        var gridId = queryParams.gridId;
+        var centerPoint = {
+            lng: [[${baiduMapProperties.centerLng}]],
+            lat: [[${baiduMapProperties.centerLat}]]
+        }
+
+        var baiduMap = null;
+        var gridMember = {
+            users: [],
+            gridArray: []
+        }
+
+        function closeBox() {
+            parent.layer.close(parent.layer.getFrameIndex(window.name));
+        }
+
+        // 初始化网格背景
+        function initGridBG(callback) {
+            var layIndex;
+            top.restAjax.get(top.restAjax.path('api/grid/list-all-with-point/area-code/{areaCode}', ['1509']), {}, null, function(code, data) {
+                var gridArray = [];
+                for(var i = 0, item; item = data[i++];) {
+                    var pointArray = [];
+                    for(var j = 0, jItem; jItem = item.pointArray[j++];) {
+                        pointArray.push(new BaiduMap.Point(jItem.lng, jItem.lat));
+                    }
+                    gridArray.push({
+                        id: item.gridId,
+                        label: item.gridName,
+                        fillColor: item.fillColor,
+                        pointArray: pointArray
+                    })
+                }
+
+                baiduMap.initBackgroundGrid({
+                    gridArray: gridArray
+                });
+
+                callback ? callback() : '';
+            }, function(code, data) {
+                top.dialog.msg(data.msg);
+            }, function () {
+                layIndex = top.dialog.msg(top.dataMessage.loading, {icon: 16, time: 0, shade: 0.3});
+            }, function () {
+                top.dialog.close(layIndex);
+            });
+        }
+
+        function initMap(callback) {
+            $('#baiduMapContainer').css({
+                width: '100%',
+                height: ($win.height() - 30) +'px'
+            });
+            baiduMap = new BaiduMap('baiduMapContainer', {
+                single: true,
+                onGridStartEdit: function(baiduMap) {
+                    $('#confirmBtn').hide();
+                },
+                onGridStopEdit: function(gridArray) {
+                    gridMember.gridArray = gridArray;
+                    $('#confirmBtn').show();
+                }
+            });
+            baiduMap.setCenterAndZoom(centerPoint, 14);
+            var mapTypeControl = new BMap.MapTypeControl({
+                mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP],
+            });
+            baiduMap.getMap().addControl(mapTypeControl);
+            baiduMap.setBoundary([[${baiduMapProperties.boundary}]]);
+            baiduMap.setDefaultConfig();
+            baiduMap.initGridOptionEvent();
+            baiduMap.initColorOption();
+            callback ? callback() : '';
+        }
+
+        // 初始化内容
+        function initData() {
+            initMap(function() {
+                baiduMap.setBoundary([[${baiduMapProperties.boundary}]], null, function() {
+                    // 背景层
+                    initGridBG();
+                });
+            });
+        }
+        initData();
+
+        // 校验
+        form.verify({});
+    });
+</script>
+</body>
+</html>

module-map/src/main/resources/templates/grid/grid/default/update.html

@@ -188,7 +188,6 @@
                 mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP],
             });
             baiduMap.getMap().addControl(mapTypeControl);
-            baiduMap.setBoundary([[${baiduMapProperties.boundary}]]);
             baiduMap.setDefaultConfig();
             baiduMap.initGridOption();
             baiduMap.initGridOptionEvent();
@@ -215,12 +214,15 @@
                 initGridGroupSelect(data.gridGroupId);
 
                 initMap(function() {
-                    // 背景层
+                    // 边界层
-                    initGridBG(data.areaCode, function() {
+                    baiduMap.setBoundary([[${baiduMapProperties.boundary}]], null, function() {
-                        // 网格层
+                        // 背景层
-                        var grid = new BaiduMap.Grid(data.gridId, data.pointArray);
+                        initGridBG(data.areaCode, function() {
-                        grid.setFillColor(data.fillColor);
+                            // 网格层
-                        baiduMap.setGridArray([grid]);
+                            var grid = new BaiduMap.Grid(data.gridId, data.pointArray);
+                            grid.setFillColor(data.fillColor);
+                            baiduMap.setGridArray([grid]);
+                        });
                     });
                 });
             }, function (code, data) {