前台使用高德地图绘制面
<div id="container"></div>
<div class="button-group">
<input type="button" class="button" value="鼠标绘制面" id="polygon"/>
<input type="button" class="button" value="保存" onclick="save()"/>
</div>
<script>
var map = new AMap.Map("container", {
resizeEnable: true,
zoom: 13,
center: [108.82988, 34.267431]
});
//在地图中添加MouseTool插件
var dspath = [];
var mouseTool = new AMap.MouseTool(map);
AMap.event.addDomListener(document.getElementById('polygon'), 'click', function () {
mouseTool.polygon({
strokeColor: 'red',
strokeOpacity: 0.8,//轮廓线透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
strokeWeight: 1, // 轮廓线宽度
fillColor: '#fff9f8',//多边形填充颜色,使用16进制颜色代码赋值,如:#FFAA00
fillOpacity: 0.6 // 多边形填充透明度,取值范围[0,1],0表示完全透明,1表示不透明。默认为0.9
});
}, false);
AMap.event.addListener(mouseTool, 'draw', function(e) { //添加事件
console.log("ggggg==" + e.obj.getPath());//获取经纬度值
var path = e.obj.getPath();
for (var i in path){
dspath.push({"lng":path[i].getLng(),"lat":path[i].getLat()});
//dpath.push([path[i].getLng(),path[i].getLat()]);
}
console.log(dspath);
});
function save() {
$.ajax({
type : 'get',
url :getContextPath() + "/gmap/savePath",
data:{"dpath":JSON.stringify(dspath)}, // 对象参数转换json格式字符串
contentType: "application/x-www-form-urlencoded",
dataType:'json',
success : function(data) {
if (data) {
alert(data);
} else {
alert("失败");
}
}
});
}
</script>
后台接收
@RequestMapping(value = "/savePath")
public void savePath(HttpServletRequest request, HttpServletResponse response) {
try {
request.setCharacterEncoding("utf-8");
String path = request.getParameter("dpath");
JSONObject json = new JSONObject();
list =(List<Map<String,Integer>>) json.parse(path);
System.out.println("list========"+list.toString());
response.getWriter().write(json.toJSONString(true));
} catch (IOException e) {
e.printStackTrace();
}
}
高德地图多边形覆盖物显示
<script>
var map = new AMap.Map("container", {
resizeEnable: true,
zoom: 13,
center: [108.82988, 34.267431]
});
var polygonArr=new Array();//多边形覆盖物节点坐标数组
polygonArr.push(new AMap.LngLat(lng,lat));
map.
on(
'complete',
function() {
var
polygon =
new AMap.Polygon({
strokeColor:
'red',
strokeOpacity:
0.8,
//
轮廓线透明度,取值范围
[0,1]
,
0
表示完全透明,
1
表示不透明。默认为
0.9
strokeWeight:
1,
//
轮廓线宽度
fillColor:
'#fff9f8',
//
多边形填充颜色,使用
16
进制颜色代码赋值,如:
#FFAA00
fillOpacity:
0.6,
//
多边形填充透明度,取值范围
[0,1]
,
0
表示完全透明,
1
表示不透明。默认为
0.9
path:
polygonArr
} );
polygon.setMap(
map);
});
</
script
>