处理地图问题

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;
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);
}
}

View File

@ -676,35 +676,54 @@ BaiduMap.prototype.initBackgroundGrid = function (option) {
});
}
for (var i = 0, backgroundGrid; backgroundGrid = option.gridArray[i++];) {
var polygon = new BMap.Polygon(backgroundGrid.pointArray, {
strokeColor: self.gridOption.const.STROKE_BACKGROUND_COLOR,
strokeWeight: self.gridOption.const.STROKE_BACKGROUND_WEIGHT,
strokeOpacity: self.gridOption.const.STROKE_BACKGROUND_OPACITY,
fillOpacity: self.gridOption.const.FILL_BACKGROUND_OPACITY,
});
if (backgroundGrid.fillColor) {
polygon.setFillColor(backgroundGrid.fillColor);
} else {
polygon.setFillColor(self.gridOption.const.FILL_BACKGROUND_COLOR);
}
// 添加点击事件
self.map.addOverlay(polygon);
addClickEvent(polygon, backgroundGrid);
if (!backgroundGrid.label) {
continue;
}
var label = new BMap.Label(backgroundGrid.label);
label.setStyle({
border: 'none',
backgroundColor: 'transparent',
textShadow: '1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff',
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);
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,
strokeOpacity: self.gridOption.const.STROKE_BACKGROUND_OPACITY,
fillOpacity: self.gridOption.const.FILL_BACKGROUND_OPACITY,
});
if (backgroundGrid.fillColor) {
polygon.setFillColor(backgroundGrid.fillColor);
} else {
polygon.setFillColor(self.gridOption.const.FILL_BACKGROUND_COLOR);
}
// 添加点击事件
self.map.addOverlay(polygon);
addClickEvent(polygon, backgroundGrid);
if (!backgroundGrid.label) {
continue;
}
var label = new BMap.Label(backgroundGrid.label);
label.setStyle({
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));
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>
<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 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?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,14 +120,12 @@
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() {
// 网格层
var grid = new BaiduMap.Grid(data.gridId, data.pointArray);
grid.setFillColor(data.fillColor);
baiduMap.setGridArray([grid]);
});
// 背景层
initGridBG(data.areaCode, function() {
// 网格层
var grid = new BaiduMap.Grid(data.gridId, data.pointArray);
grid.setFillColor(data.fillColor);
baiduMap.setGridArray([grid]);
});
});
}, function (code, data) {

View File

@ -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" src="static/baidu-map/baidu-map-1.0.0.min.js"></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?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();

View File

@ -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" src="static/baidu-map/baidu-map-1.0.0.min.js"></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?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,10 +118,7 @@
// 初始化内容
function initData() {
initMap(function() {
baiduMap.setBoundary([[${baiduMapProperties.boundary}]], null, function() {
// 背景层
initGridBG();
});
initGridBG();
});
}
initData();

View File

@ -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" src="static/baidu-map/baidu-map-1.0.0.min.js"></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?v=1"></script>
<script src="assets/layuiadmin/layui/layui.js"></script>
<script th:inline="javascript">
layui.config({
@ -233,15 +233,12 @@
initGridGroupSelect(data.gridGroupId);
initMap(function() {
// 边界层
baiduMap.setBoundary([[${baiduMapProperties.boundary}]], null, function() {
// 背景层
initGridBG(data.areaCode, function() {
// 网格层
var grid = new BaiduMap.Grid(data.gridId, data.pointArray);
grid.setFillColor(data.fillColor);
baiduMap.setGridArray([grid]);
});
// 背景层
initGridBG(data.areaCode, function() {
// 网格层
var grid = new BaiduMap.Grid(data.gridId, data.pointArray);
grid.setFillColor(data.fillColor);
baiduMap.setGridArray([grid]);
});
});
}, function (code, data) {