处理地图问题

This commit is contained in:
TS-QD1 2023-05-17 13:49:46 +08:00
parent a81d4ad49b
commit 6995037bc3
7 changed files with 100 additions and 70 deletions

View File

@ -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";
}

View File

@ -1,14 +1,17 @@
package ink.wgink.module.map.controller.route.grid; 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.interfaces.consts.ISystemConstant;
import ink.wgink.properties.map.BaiduMapProperties;
import io.swagger.annotations.Api; import io.swagger.annotations.Api;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller; import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView; import org.springframework.web.servlet.ModelAndView;
import java.util.HashMap;
import java.util.Map;
/** /**
* @ClassName: GridRouteController * @ClassName: GridRouteController
* @Description: 网格路由 * @Description: 网格路由
@ -21,34 +24,31 @@ import org.springframework.web.servlet.ModelAndView;
@RequestMapping(ISystemConstant.ROUTE_PREFIX + "/grid") @RequestMapping(ISystemConstant.ROUTE_PREFIX + "/grid")
public class GridRouteController { public class GridRouteController {
@Autowired
private BaiduMapProperties baiduMapProperties;
@GetMapping("save") @GetMapping("save")
public ModelAndView save() { public ModelAndView save() {
ModelAndView mv = new ModelAndView("grid/grid/default/save"); ModelAndView mv = new ModelAndView("grid/grid/default/save");
mv.addObject("baiduMapProperties", baiduMapProperties); setConfig(mv);
return mv; return mv;
} }
@GetMapping("update") @GetMapping("update")
public ModelAndView update() { public ModelAndView update() {
ModelAndView mv = new ModelAndView("grid/grid/default/update"); ModelAndView mv = new ModelAndView("grid/grid/default/update");
mv.addObject("baiduMapProperties", baiduMapProperties); setConfig(mv);
return mv; return mv;
} }
@GetMapping("get") @GetMapping("get")
public ModelAndView get() { public ModelAndView get() {
ModelAndView mv = new ModelAndView("grid/grid/default/get"); ModelAndView mv = new ModelAndView("grid/grid/default/get");
mv.addObject("baiduMapProperties", baiduMapProperties); setConfig(mv);
return mv; return mv;
} }
@GetMapping("show-grid") @GetMapping("show-grid")
public ModelAndView showGrid() { public ModelAndView showGrid() {
ModelAndView mv = new ModelAndView("grid/grid/default/show-grid"); ModelAndView mv = new ModelAndView("grid/grid/default/show-grid");
mv.addObject("baiduMapProperties", baiduMapProperties); setConfig(mv);
return mv; return mv;
} }
@ -62,4 +62,15 @@ public class GridRouteController {
return new ModelAndView("grid/grid/default/list-select"); 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);
}
} }

View File

@ -676,35 +676,54 @@ BaiduMap.prototype.initBackgroundGrid = function (option) {
}); });
} }
for (var i = 0, backgroundGrid; backgroundGrid = option.gridArray[i++];) { function draw(page, pageCount, pageSize) {
var polygon = new BMap.Polygon(backgroundGrid.pointArray, { setTimeout(function() {
strokeColor: self.gridOption.const.STROKE_BACKGROUND_COLOR, var size = page < pageCount ? pageSize : option.gridArray.length - (pageCount - 1) * pageSize;
strokeWeight: self.gridOption.const.STROKE_BACKGROUND_WEIGHT, for(var i = 0; i < size; i++) {
strokeOpacity: self.gridOption.const.STROKE_BACKGROUND_OPACITY, var backgroundGrid = option.gridArray[i + (page - 1) * pageSize];
fillOpacity: self.gridOption.const.FILL_BACKGROUND_OPACITY, var polygon = new BMap.Polygon(backgroundGrid.pointArray, {
}); strokeColor: self.gridOption.const.STROKE_BACKGROUND_COLOR,
if (backgroundGrid.fillColor) { strokeWeight: self.gridOption.const.STROKE_BACKGROUND_WEIGHT,
polygon.setFillColor(backgroundGrid.fillColor); strokeOpacity: self.gridOption.const.STROKE_BACKGROUND_OPACITY,
} else { fillOpacity: self.gridOption.const.FILL_BACKGROUND_OPACITY,
polygon.setFillColor(self.gridOption.const.FILL_BACKGROUND_COLOR); });
} if (backgroundGrid.fillColor) {
// 添加点击事件 polygon.setFillColor(backgroundGrid.fillColor);
self.map.addOverlay(polygon); } else {
addClickEvent(polygon, backgroundGrid); polygon.setFillColor(self.gridOption.const.FILL_BACKGROUND_COLOR);
if (!backgroundGrid.label) { }
continue; // 添加点击事件
} self.map.addOverlay(polygon);
var label = new BMap.Label(backgroundGrid.label); addClickEvent(polygon, backgroundGrid);
label.setStyle({ if (!backgroundGrid.label) {
border: 'none', continue;
backgroundColor: 'transparent', }
textShadow: '1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff', var label = new BMap.Label(backgroundGrid.label);
fontSize: self.gridOption.const.LABEL_FONT_SIZE + 'px' label.setStyle({
}); border: 'none',
label.setOffset(new BMap.Size(-backgroundGrid.label.length * self.gridOption.const.LABEL_FONT_SIZE / 2, -self.gridOption.const.LABEL_FONT_SIZE / 2)); backgroundColor: 'transparent',
label.setPosition(self.getCenterPoint(backgroundGrid.pointArray)); textShadow: '1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff',
self.labelArray.push(label); display: 'none',
self.map.addOverlay(label); 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));
label.setPosition(self.getCenterPoint(backgroundGrid.pointArray));
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);
} }
} }
// 设置开始标记 // 设置开始标记

View File

@ -25,8 +25,8 @@
</div> </div>
</div> </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 src="assets/layuiadmin/layui/layui.js"></script>
<script th:inline="javascript"> <script th:inline="javascript">
layui.config({ layui.config({
@ -110,7 +110,6 @@
mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP], mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP],
}); });
baiduMap.getMap().addControl(mapTypeControl); baiduMap.getMap().addControl(mapTypeControl);
baiduMap.setBoundary([[${baiduMapProperties.boundary}]]);
baiduMap.setDefaultConfig(); baiduMap.setDefaultConfig();
baiduMap.initGridOptionEvent(); baiduMap.initGridOptionEvent();
baiduMap.initColorOption(); baiduMap.initColorOption();
@ -121,14 +120,12 @@
function initData() { function initData() {
top.restAjax.get(top.restAjax.path('api/grid/get/{gridId}', [gridId]), {}, null, function(code, data) { top.restAjax.get(top.restAjax.path('api/grid/get/{gridId}', [gridId]), {}, null, function(code, data) {
initMap(function() { 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);
var grid = new BaiduMap.Grid(data.gridId, data.pointArray); grid.setFillColor(data.fillColor);
grid.setFillColor(data.fillColor); baiduMap.setGridArray([grid]);
baiduMap.setGridArray([grid]);
});
}); });
}); });
}, function (code, data) { }, function (code, data) {

View File

@ -101,8 +101,8 @@
</div> </div>
</div> </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 src="assets/layuiadmin/layui/layui.js"></script>
<script th:inline="javascript"> <script th:inline="javascript">
layui.config({ layui.config({
@ -182,7 +182,6 @@
mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP], mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP],
}); });
baiduMap.getMap().addControl(mapTypeControl); baiduMap.getMap().addControl(mapTypeControl);
baiduMap.setBoundary([[${baiduMapProperties.boundary}]]);
baiduMap.setDefaultConfig(); baiduMap.setDefaultConfig();
baiduMap.initGridOption(); baiduMap.initGridOption();
baiduMap.initGridOptionEvent(); baiduMap.initGridOptionEvent();

View File

@ -25,8 +25,8 @@
</div> </div>
</div> </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 src="assets/layuiadmin/layui/layui.js"></script>
<script th:inline="javascript"> <script th:inline="javascript">
layui.config({ layui.config({
@ -109,7 +109,6 @@
mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP], mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP],
}); });
baiduMap.getMap().addControl(mapTypeControl); baiduMap.getMap().addControl(mapTypeControl);
baiduMap.setBoundary([[${baiduMapProperties.boundary}]]);
baiduMap.setDefaultConfig(); baiduMap.setDefaultConfig();
baiduMap.initGridOptionEvent(); baiduMap.initGridOptionEvent();
baiduMap.initColorOption(); baiduMap.initColorOption();
@ -119,10 +118,7 @@
// 初始化内容 // 初始化内容
function initData() { function initData() {
initMap(function() { initMap(function() {
baiduMap.setBoundary([[${baiduMapProperties.boundary}]], null, function() { initGridBG();
// 背景层
initGridBG();
});
}); });
} }
initData(); initData();

View File

@ -94,8 +94,8 @@
</div> </div>
</div> </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 src="assets/layuiadmin/layui/layui.js"></script>
<script th:inline="javascript"> <script th:inline="javascript">
layui.config({ layui.config({
@ -233,15 +233,12 @@
initGridGroupSelect(data.gridGroupId); initGridGroupSelect(data.gridGroupId);
initMap(function() { 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) { }, function (code, data) {