高德地图 围栏 多边形 增删改查 绘制 返回围栏的坐标数据

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";
	}

【核心】地图： 

    
    
    
    
    
    
    
    
    
    

    



    

        

            
            

            





            

                新建
                删除
            
            
操作提示：【左键】选点绘制，点击【右键】结束绘制
        
    

如果文章帮助到了你，点赞，评论，关注下吧

谢谢，欢迎多多交流！

——tanly