调整网格绘制内容

This commit is contained in:
wanggeng 2022-01-09 15:42:33 +08:00
parent 5e41e12bee
commit ab9e93c67c
10 changed files with 208 additions and 23 deletions

View File

@ -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")

View File

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

View File

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

View File

@ -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);
}
/**
* 设置网格点
*

View File

@ -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() : '';
});
}

View File

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

View File

@ -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">
<i class="fa fa-lg fa-search"></i> 搜索
</button>
<div class="layui-btn-group">
<button type="button" id="search" class="layui-btn layui-btn-sm">
<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;

View File

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

View File

@ -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>

View File

@ -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() {
// 网格层
var grid = new BaiduMap.Grid(data.gridId, data.pointArray);
grid.setFillColor(data.fillColor);
baiduMap.setGridArray([grid]);
// 边界层
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]);
});
});
});
}, function (code, data) {