layui、jquery、高德地图
1、支持绘制后，返回围栏坐标数据
2、支持点击切换不同围栏，进行编辑、删除
3、支持一个区域数据包含多个围栏
4、支持搜索定位（高德限制次数）
效果图：
区域数据：
新增区域时设置围栏（打开地图）：
function openScopeMap() {
layer.open({
type: 2,
title: '绘制围栏',
maxmin: true,
shadeClose: false, // 点击遮罩关闭层
area: ['90%', '90%'],
btn: ['确定', '取消'],
yes: function (index, layero) {
window["layui-layer-iframe" + index].endDraw();
var res = window["layui-layer-iframe" + index].confirmDraw();
console.log('设置后返回内容', res);
if (res.length > 0 && res !== "[]") {
$('#locationJson').val(res)
} else {
$('#locationJson').val("")
}
layer.close(index);
},
content: '/xxx/xxxxx/scopeMap',//替换为自己的请求路径
success: function (layero, index) {
// 获取子页面的iframe
var iframe = window['layui-layer-iframe' + index];
// 向子页面的全局函数child传参
iframe.getParentParam($('#locationJson').val());
}
});
}编辑区域时设置围栏（打开地图）：
function openScopeMap() {
layer.open({
type: 2,
title: '绘制围栏',
maxmin: true,
shadeClose: false, // 点击遮罩关闭层
area: ['90%', '90%'],
btn: ['确定', '取消'],
yes: function (index, layero) {
// 点击确定触发围栏编辑器的关闭endDraw，否则获取不到正在编辑的围栏坐标
window["layui-layer-iframe" + index].endDraw();
var res = window["layui-layer-iframe" + index].confirmDraw();
console.log('设置后返回内容', res);
if (res.length > 0 && res !== "[]") {
$('#locationJson').val(res)
} else {
$('#locationJson').val("")
}
layer.close(index);
},
content: '/xxx/xxxxx/scopeMap?scopeId=' + $('#id').val(),//替换为自己的请求路径
success: function (layero, index) {
// 获取子页面的iframe
var iframe = window['layui-layer-iframe' + index];
// 向子页面的全局函数child传参
iframe.getParentParam($('#locationJson').val());
}
});
}
打开地图请求（Java）
/**
* 进入围栏地图界面
* @param model
* @param scopeId
* @return
*/
@GetMapping("/scopeMap")
public String tree(Model model, String scopeId) {
if (StringUtils.isNotEmpty(scopeId)) {
model.addAttribute("scopeId", scopeId);
model.addAttribute("szScope", szScopeService.get(Long.parseLong(scopeId)).getLocationJson());
}
return "xxx/xxxxx/scopeMap";
}【核心】地图：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>绘制地图</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<script src="/js/layui.js"></script>
<script src="/js/jquery.min.js?v=2.1.4"></script>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script src="https://webapi.amap.com/maps?v=2.0&key=替换成你的Key值&plugin=AMap.PolygonEditor"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<link href="/layui-v2.6.8/layui/css/layui.css" rel="stylesheet">
<style>
.tipdiv{
width: 100%;
height: 29px;
top: auto;
bottom: 0rem;
position: fixed;
line-height: 30px;
background-color: #2f4050;
color: #ff9900;
font-size: 13px;
font-weight: 400;
padding-left: 15px;
}
.searchdiv{
width: 100%;
top: 5px;
bottom: auto;
position: fixed;
color: #ff9900;
font-size: 13px;
font-weight: 400;
padding-left: 15px;
display: flex;
}
</style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
<div class="row">
<div class="col-sm-12">
<input id="locationjsonID" value="" type="hidden">
<div id="map-container" style="width: 100%;height: 800px;"></div>
<!-- 搜索 高德会限制每日次数，只能暂时屏蔽掉：USER_DAILY_QUERY_OVER_LIMIT -->
<!-- <div class="searchdiv">-->
<!-- <div class="columns pull-right col-md-2 nopadding">-->
<!-- <input id="searchName" type="text" class="form-control" placeholder="搜索" style="height: 38px;width: 360px;">-->
<!-- </div>-->
<!-- </div>-->
<div class="input-card" style="width: 120px;top: 1rem;bottom: auto">
<button class="btn" onclick="createPolygon()" style="margin-bottom: 5px">新建</button>
<button class="btn" onclick="deleteCur()" style="margin-bottom: 5px">删除</button>
</div>
<div class="tipdiv">操作提示：【左键】选点绘制，点击【右键】结束绘制</div>
</div>
</div>
</div>
<script type="text/javascript">
var map = new AMap.Map('map-container', {
zoom: 13,
center: [113.55005, 22.356141]
});
map.setFitView();
// 搜索
AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
var placeSearch = new AMap.PlaceSearch({
map: map
});
var auto = new AMap.AutoComplete({
input: "searchName"
});
auto.on("select", select);
function select(e) {
// placeSearch.setCity("北京");
placeSearch.setCity(e.poi.adcode);
placeSearch.search(e.poi.name);
}
});
var polyEditor = new AMap.PolygonEditor(map);
var newLocationJsonObj = {};
var doDel = false;
// 返回绘制数据
function confirmDraw() {
let newLocationJson = [];
for (let key in newLocationJsonObj) {
if (newLocationJsonObj.hasOwnProperty(key)) {
newLocationJson.push(newLocationJsonObj[key])
}
}
return JSON.stringify(newLocationJson);
}
function getParentParam(dataJson){
console.log('tanlydefined', dataJson);
document.getElementById('locationjsonID').setAttribute("value", dataJson)
var jsonStr = document.getElementById('locationjsonID').value;
const edit = jsonStr.length > 0;
if(jsonStr.length>0){
let jsonObj = JSON.parse(jsonStr);
console.log('jsonObj',jsonObj);
for (let i = 0; i < jsonObj.length; i++) {
let scope = jsonObj[i];
let tempArys = [];
let tempPaths = []
for (let j = 0; j < scope.length; j++) {
tempArys.push([scope[j].lng, scope[j].lat])
tempPaths.push({
lng: scope[j].lng,
lat: scope[j].lat
});
}
// 收集原数据
// 创建围栏
let tempPolygon = new AMap.Polygon({
map: map,
strokeWeight: 2,
strokeColor: '#FF33FF',
fillColor: '#FF99FF',
fillOpacity: 0.5,
path: tempArys
});
polyEditor.addAdsorbPolygons(tempPolygon);
newLocationJsonObj[tempPolygon._amap_id] = tempPaths;
tempPolygon.on('click', () => {
console.log('tanlydefinedtempPolygon', tempPolygon);
if (polyEditor.getTarget()==null || tempPolygon._amap_id !== polyEditor.getTarget()._amap_id) {
polyEditor.setTarget(tempPolygon);
polyEditor.open();
}
})
tempPolygon.on('dblclick', () => {
polyEditor.setTarget();
polyEditor.close();
})
}
}
polyEditor.on('add', function (data) {
var polygon = data.target;
polyEditor.addAdsorbPolygons(polygon);
polygon.on('click', () => {
if (polyEditor.getTarget()==null || polygon._amap_id !== polyEditor.getTarget()._amap_id) {
polyEditor.setTarget(polygon);
polyEditor.open();
}
})
polygon.on('dblclick', () => {
polyEditor.setTarget();
polyEditor.close();
})
var path = polygon.getPath();
var tempPaths = []
var temparys = []
for (let i = 0; i < path.length; i++) {
tempPaths.push({
lng: path[i].lng,
lat: path[i].lat
});
let tempary = [];
tempary = [path[i].R, path[i].Q];
temparys.push(tempary)
}
newLocationJsonObj[polygon._amap_id] = tempPaths;
})
// 监听绘制完成事件 close后
polyEditor.on('end', function (data) {
if(!doDel){
let polygon = data.target;
let path = polygon.getPath();
let tempPaths = []
for (let i = 0; i < path.length; i++) {
tempPaths.push({
lng: path[i].lng,
lat: path[i].lat
});
}
newLocationJsonObj[polygon._amap_id] = tempPaths;
}
doDel = false;
});
if(!edit){
// 新增自动开启绘制工具
createPolygon();
polyEditor.open();
}
}
function createPolygon() {
polyEditor.close();
polyEditor.setTarget();
polyEditor.open();
}
function deleteCur() {
let polygon = polyEditor.getTarget();
if(polygon){
delete newLocationJsonObj[polygon._amap_id];
polyEditor.getTarget().setMap(null);
polyEditor.removeAdsorbPolygons(polygon);
doDel = true;
polyEditor.setTarget();
polyEditor.close();
}
}
function endDraw(){
polyEditor.setTarget();
polyEditor.close();
}
</script>
</body>
</html>
如果文章帮助到了你，点赞，评论，关注下吧
谢谢，欢迎多多交流！
——tanly
2435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
