处理地图问题

basic-interface/src/main/java/ink/wgink/interfaces/consts/IGisConstant.java

@@ -0,0 +1,11 @@
+package ink.wgink.interfaces.consts;
+
+public interface IGisConstant {
+
+    String GIS_MAP_CENTER_LAT = "gisMapCenterLat";
+    String GIS_MAP_CENTER_LNG = "gisMapCenterLng";
+    String GIS_MAP_CENTER_ZOOM = "gisMapCenterZoom";
+    String GIS_MAP_BAIDU_BOUNDARY = "gisMapBaiduBoundary";
+    String GIS_MAP_BAIDU_AK = "gisMapBaiduAk";
+
+}

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

@@ -1,14 +1,17 @@
 package ink.wgink.module.map.controller.route.grid;
 
+import ink.wgink.common.manager.env.EnvManager;
+import ink.wgink.interfaces.consts.IGisConstant;
 import ink.wgink.interfaces.consts.ISystemConstant;
-import ink.wgink.properties.map.BaiduMapProperties;
 import io.swagger.annotations.Api;
-import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.servlet.ModelAndView;
 
+import java.util.HashMap;
+import java.util.Map;
+
 /**
  * @ClassName: GridRouteController
  * @Description: 网格路由
@@ -21,34 +24,31 @@ import org.springframework.web.servlet.ModelAndView;
 @RequestMapping(ISystemConstant.ROUTE_PREFIX + "/grid")
 public class GridRouteController {
 
-    @Autowired
-    private BaiduMapProperties baiduMapProperties;
-
     @GetMapping("save")
     public ModelAndView save() {
         ModelAndView mv = new ModelAndView("grid/grid/default/save");
-        mv.addObject("baiduMapProperties", baiduMapProperties);
+        setConfig(mv);
         return mv;
     }
 
     @GetMapping("update")
     public ModelAndView update() {
         ModelAndView mv = new ModelAndView("grid/grid/default/update");
-        mv.addObject("baiduMapProperties", baiduMapProperties);
+        setConfig(mv);
         return mv;
     }
 
     @GetMapping("get")
     public ModelAndView get() {
         ModelAndView mv = new ModelAndView("grid/grid/default/get");
-        mv.addObject("baiduMapProperties", baiduMapProperties);
+        setConfig(mv);
         return mv;
     }
 
     @GetMapping("show-grid")
     public ModelAndView showGrid() {
         ModelAndView mv = new ModelAndView("grid/grid/default/show-grid");
-        mv.addObject("baiduMapProperties", baiduMapProperties);
+        setConfig(mv);
         return mv;
     }
 
@@ -62,4 +62,15 @@ public class GridRouteController {
         return new ModelAndView("grid/grid/default/list-select");
     }
 
+    private void setConfig(ModelAndView modelAndView) {
+        EnvManager envManager = EnvManager.getInstance();
+        Map<String, Object> baiduMapProperties = new HashMap<>(5);
+        baiduMapProperties.put("centerLng", envManager.getValue(IGisConstant.GIS_MAP_CENTER_LNG));
+        baiduMapProperties.put("centerLat", envManager.getValue(IGisConstant.GIS_MAP_CENTER_LAT));
+        baiduMapProperties.put("zoom", envManager.getValue(IGisConstant.GIS_MAP_CENTER_ZOOM));
+        baiduMapProperties.put("boundary", envManager.getValue(IGisConstant.GIS_MAP_BAIDU_BOUNDARY));
+        baiduMapProperties.put("ak", envManager.getValue(IGisConstant.GIS_MAP_BAIDU_AK));
+        modelAndView.addObject("baiduMapProperties", baiduMapProperties);
+    }
+
 }

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

@@ -676,7 +676,11 @@ BaiduMap.prototype.initBackgroundGrid = function (option) {
         });
     }
 
-    for (var i = 0, backgroundGrid; backgroundGrid = option.gridArray[i++];) {
+    function draw(page, pageCount, pageSize) {
+        setTimeout(function() {
+            var size = page < pageCount ? pageSize : option.gridArray.length - (pageCount - 1) * pageSize;
+            for(var i = 0; i < size; i++) {
+                var backgroundGrid = option.gridArray[i + (page - 1) * pageSize];
                 var polygon = new BMap.Polygon(backgroundGrid.pointArray, {
                     strokeColor: self.gridOption.const.STROKE_BACKGROUND_COLOR,
                     strokeWeight: self.gridOption.const.STROKE_BACKGROUND_WEIGHT,
@@ -699,6 +703,7 @@ BaiduMap.prototype.initBackgroundGrid = function (option) {
                     border: 'none',
                     backgroundColor: 'transparent',
                     textShadow: '1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff',
+                    display: 'none',
                     fontSize: self.gridOption.const.LABEL_FONT_SIZE + 'px'
                 });
                 label.setOffset(new BMap.Size(-backgroundGrid.label.length * self.gridOption.const.LABEL_FONT_SIZE / 2, -self.gridOption.const.LABEL_FONT_SIZE / 2));
@@ -706,6 +711,20 @@ BaiduMap.prototype.initBackgroundGrid = function (option) {
                 self.labelArray.push(label);
                 self.map.addOverlay(label);
             }
+            if(page < pageCount) {
+                console.log('加载中...')
+            } else {
+                console.log('加载完成')
+            }
+        }, page * 50)
+    }
+
+    // 分页加载，100页
+    var pageSize = 10;
+    var pageCount = option.gridArray.length % pageSize === 0 ? parseInt(option.gridArray.length / pageSize) : parseInt(option.gridArray.length / pageSize) + 1;
+    for (var page = 1; page <= pageCount; page++) {
+        draw(page, pageCount, pageSize);
+    }
 }
 // 设置开始标记
 BaiduMap.prototype.setStartMarker = function (point) {

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

@@ -25,8 +25,8 @@
         </div>
     </div>
 </div>
-<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=mlfOah4gWM1FjEo9CmlI64zK6MhyiMPW"></script>
+<script type="text/javascript" th:src="'http://api.map.baidu.com/api?v=3.0&ak='+ ${baiduMapProperties.ak}"></script>
-<script type="text/javascript" src="static/baidu-map/baidu-map-1.0.0.min.js"></script>
+<script type="text/javascript" src="static/baidu-map/baidu-map-1.0.0.min.js?v=1"></script>
 <script src="assets/layuiadmin/layui/layui.js"></script>
 <script th:inline="javascript">
     layui.config({
@@ -110,7 +110,6 @@
                 mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP],
             });
             baiduMap.getMap().addControl(mapTypeControl);
-            baiduMap.setBoundary([[${baiduMapProperties.boundary}]]);
             baiduMap.setDefaultConfig();
             baiduMap.initGridOptionEvent();
             baiduMap.initColorOption();
@@ -121,7 +120,6 @@
         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() {
                         // 网格层
@@ -130,7 +128,6 @@
                         baiduMap.setGridArray([grid]);
                     });
                 });
-                });
             }, function (code, data) {
                 top.dialog.msg(data.msg);
             }, function() {

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

@@ -101,8 +101,8 @@
         </div>
     </div>
 </div>
-<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=mlfOah4gWM1FjEo9CmlI64zK6MhyiMPW"></script>
+<script type="text/javascript" th:src="'http://api.map.baidu.com/api?v=3.0&ak='+ ${baiduMapProperties.ak}"></script>
-<script type="text/javascript" src="static/baidu-map/baidu-map-1.0.0.min.js"></script>
+<script type="text/javascript" src="static/baidu-map/baidu-map-1.0.0.min.js?v=1"></script>
 <script src="assets/layuiadmin/layui/layui.js"></script>
 <script th:inline="javascript">
     layui.config({
@@ -182,7 +182,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();

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

@@ -25,8 +25,8 @@
         </div>
     </div>
 </div>
-<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=mlfOah4gWM1FjEo9CmlI64zK6MhyiMPW"></script>
+<script type="text/javascript" th:src="'http://api.map.baidu.com/api?v=3.0&ak='+ ${baiduMapProperties.ak}"></script>
-<script type="text/javascript" src="static/baidu-map/baidu-map-1.0.0.min.js"></script>
+<script type="text/javascript" src="static/baidu-map/baidu-map-1.0.0.min.js?v=1"></script>
 <script src="assets/layuiadmin/layui/layui.js"></script>
 <script th:inline="javascript">
     layui.config({
@@ -109,7 +109,6 @@
                 mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP],
             });
             baiduMap.getMap().addControl(mapTypeControl);
-            baiduMap.setBoundary([[${baiduMapProperties.boundary}]]);
             baiduMap.setDefaultConfig();
             baiduMap.initGridOptionEvent();
             baiduMap.initColorOption();
@@ -119,11 +118,8 @@
         // 初始化内容
         function initData() {
             initMap(function() {
-                baiduMap.setBoundary([[${baiduMapProperties.boundary}]], null, function() {
-                    // 背景层
                 initGridBG();
             });
-            });
         }
         initData();
 

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

@@ -94,8 +94,8 @@
         </div>
     </div>
 </div>
-<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=mlfOah4gWM1FjEo9CmlI64zK6MhyiMPW"></script>
+<script type="text/javascript" th:src="'http://api.map.baidu.com/api?v=3.0&ak='+ ${baiduMapProperties.ak}"></script>
-<script type="text/javascript" src="static/baidu-map/baidu-map-1.0.0.min.js"></script>
+<script type="text/javascript" src="static/baidu-map/baidu-map-1.0.0.min.js?v=1"></script>
 <script src="assets/layuiadmin/layui/layui.js"></script>
 <script th:inline="javascript">
     layui.config({
@@ -233,8 +233,6 @@
                 initGridGroupSelect(data.gridGroupId);
 
                 initMap(function() {
-                    // 边界层
-                    baiduMap.setBoundary([[${baiduMapProperties.boundary}]], null, function() {
                     // 背景层
                     initGridBG(data.areaCode, function() {
                         // 网格层
@@ -243,7 +241,6 @@
                         baiduMap.setGridArray([grid]);
                     });
                 });
-                });
             }, function (code, data) {
                 top.dialog.msg(data.msg);
             }, function() {