新增了百度地图配置和边界控制
This commit is contained in:
parent
dca7a18b30
commit
5e41e12bee
@ -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;
|
||||
}
|
||||
}
|
@ -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")
|
||||
|
@ -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); //添加覆盖物
|
||||
});
|
||||
}
|
@ -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();
|
||||
|
@ -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%',
|
||||
|
@ -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();
|
||||
|
@ -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();
|
||||
|
Loading…
Reference in New Issue
Block a user