新增了百度地图配置和边界控制

This commit is contained in:
wanggeng 2022-01-08 17:36:40 +08:00
parent dca7a18b30
commit 5e41e12bee
7 changed files with 93 additions and 33 deletions

View File

@ -0,0 +1,29 @@
package ink.wgink.properties.map;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;
/**
* @ClassName: BaiduMapProperties
* @Description: 百度地图配置
* @Author: wanggeng
* @Date: 2022/1/8 3:28 PM
* @Version: 1.0
*/
@Component
@ConfigurationProperties(prefix = "map.baidu-map")
public class BaiduMapProperties extends MapProperties {
/**
* 边界
*/
private String boundary;
public String getBoundary() {
return boundary == null ? "" : boundary.trim();
}
public void setBoundary(String boundary) {
this.boundary = boundary;
}
}

View File

@ -1,7 +1,9 @@
package ink.wgink.module.map.controller.route.grid;
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;
@ -19,19 +21,28 @@ import org.springframework.web.servlet.ModelAndView;
@RequestMapping(ISystemConstant.ROUTE_PREFIX + "/grid")
public class GridRouteController {
@Autowired
private BaiduMapProperties baiduMapProperties;
@GetMapping("save")
public ModelAndView save() {
return new ModelAndView("grid/grid/default/save");
ModelAndView mv = new ModelAndView("grid/grid/default/save");
mv.addObject("baiduMapProperties", baiduMapProperties);
return mv;
}
@GetMapping("update")
public ModelAndView update() {
return new ModelAndView("grid/grid/default/update");
ModelAndView mv = new ModelAndView("grid/grid/default/update");
mv.addObject("baiduMapProperties", baiduMapProperties);
return mv;
}
@GetMapping("get")
public ModelAndView get() {
return new ModelAndView("grid/grid/default/get");
ModelAndView mv = new ModelAndView("grid/grid/default/get");
mv.addObject("baiduMapProperties", baiduMapProperties);
return mv;
}
@GetMapping("list")

View File

@ -14,18 +14,18 @@ function BaiduMap(mapId, mapConfig) {
this.defaultLng = 116.280190;
this.defaultLat = 40.049191;
this.defaultZoom = 19;
this.startMarker = null,
this.const = {
START_MARKER_ICON: 'images/marker.png',
color: {
GREEN: '#009688',
BLUE: '#1E9FFF',
ORANGE: '#FFB800',
RED: '#FF5722',
CYAN: '#2F4056',
BLACK: '#393D49'
}
};
this.startMarker = null;
this.const = {
START_MARKER_ICON: 'images/marker.png',
color: {
GREEN: '#009688',
BLUE: '#1E9FFF',
ORANGE: '#FFB800',
RED: '#FF5722',
CYAN: '#2F4056',
BLACK: '#393D49'
}
};
// 标签数组
this.labelArray = [];
// 网格操作
@ -912,4 +912,25 @@ BaiduMap.prototype.setGridArray = function (gridArray) {
self.gridOption.gridArray.push(grid);
setPolygon(grid);
}
}
BaiduMap.prototype.setBoundary = function(areaName, option) {
if(!areaName) {
return;
}
var self = this;
var bd = new BMap.Boundary();
bd.get(areaName, function (rs) {
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
console.log('未能获取当前输入行政区域');
return ;
}
var ply = new BMap.Polygon(rs.boundaries[0], {
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
}); //建立多边形覆盖物
self.map.addOverlay(ply); //添加覆盖物
});
}

View File

@ -28,7 +28,7 @@
<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>
<script th:inline="javascript">
layui.config({
base: 'assets/layuiadmin/' //静态资源所在路径
}).extend({
@ -42,8 +42,8 @@
var queryParams = top.restAjax.params(window.location.href);
var gridId = queryParams.gridId;
var centerPoint = {
lng: queryParams.cplng,
lat: queryParams.cplat
lng: [[${baiduMapProperties.centerLng}]],
lat: [[${baiduMapProperties.centerLat}]]
}
var baiduMap = null;
@ -110,6 +110,7 @@
mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP],
});
baiduMap.getMap().addControl(mapTypeControl);
baiduMap.setBoundary([[${baiduMapProperties.boundary}]]);
baiduMap.setDefaultConfig();
baiduMap.initGridOptionEvent();
baiduMap.initColorOption();

View File

@ -59,9 +59,6 @@
var common = layui.common;
var resizeTimeout = null;
var tableUrl = 'api/grid/listpage';
var queryParams = top.restAjax.params(window.location.href);
var cplng = queryParams.cplng ? queryParams.cplng : 111.848937;
var cplat = queryParams.cplat ? queryParams.cplat : 40.904095;
// 初始化表格
function initTable() {
@ -259,7 +256,7 @@
area: ['100%', '100%'],
shadeClose: true,
anim: 2,
content: top.restAjax.path('route/grid/save?cplng={cplng}&cplat={cplat}', [cplng, cplat]),
content: top.restAjax.path('route/grid/save', []),
end: function() {
reloadTable();
}
@ -277,7 +274,7 @@
area: ['100%', '100%'],
shadeClose: true,
anim: 2,
content: top.restAjax.path('route/grid/update?gridId={gridId}&cplng={cplng}&cplat={cplat}', [checkDatas[0].gridId, cplng, cplat]),
content: top.restAjax.path('route/grid/update?gridId={gridId}', [checkDatas[0].gridId]),
end: function () {
reloadTable();
}
@ -303,7 +300,7 @@
var layEvent = obj.event;
if(layEvent === 'gridEvent') {
top.dialog.open({
url: top.restAjax.path('route/grid/get?gridId={gridId}&cplng={cplng}&cplat={cplat}', [data.gridId, cplng, cplat]),
url: top.restAjax.path('route/grid/get?gridId={gridId}', [data.gridId]),
title: '【'+ data.gridName +'】网格',
width: '80%',
height: '80%',

View File

@ -92,7 +92,7 @@
<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>
<script th:inline="javascript">
layui.config({
base: 'assets/layuiadmin/' //静态资源所在路径
}).extend({
@ -103,10 +103,9 @@
var form = layui.form;
var laytpl = layui.laytpl;
var laydate = layui.laydate;
var queryParams = top.restAjax.params(window.location.href);
var centerPoint = {
lng: queryParams.cplng,
lat: queryParams.cplat
lng: [[${baiduMapProperties.centerLng}]],
lat: [[${baiduMapProperties.centerLat}]]
}
var baiduMap = null;
@ -166,11 +165,12 @@
$('#confirmBtn').show();
}
});
baiduMap.setCenterAndZoom(centerPoint, 14);
baiduMap.setCenterAndZoom(centerPoint, [[${baiduMapProperties.zoom}]]);
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.initGridOption();
baiduMap.initGridOptionEvent();

View File

@ -78,7 +78,7 @@
<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>
<script th:inline="javascript">
layui.config({
base: 'assets/layuiadmin/' //静态资源所在路径
}).extend({
@ -92,8 +92,8 @@
var queryParams = top.restAjax.params(window.location.href);
var gridId = queryParams.gridId;
var centerPoint = {
lng: queryParams.cplng,
lat: queryParams.cplat
lng: [[${baiduMapProperties.centerLng}]],
lat: [[${baiduMapProperties.centerLat}]]
}
var baiduMap = null;
@ -183,11 +183,12 @@
$('#confirmBtn').show();
}
});
baiduMap.setCenterAndZoom(centerPoint, 14);
baiduMap.setCenterAndZoom(centerPoint, [[${baiduMapProperties.zoom}]]);
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.initGridOption();
baiduMap.initGridOptionEvent();