SSH地图功能（四）重绘数据库保存所有图形

折腾了一天完成了重绘数据库所有图形的功能，整个过程中出了很多小问题，所以变量一次声明后就用Ctrl+C，Ctrl+V来写了，避免再次输入的时候搞错浪费很多时间，而且要养成备份的习惯，在开发新功能时不要因为修改部分代码最后无法还原。

下面是geoAction类中的findAll方法，传输数据库所有数据到前端，这一部分要把格式确定，前后端都要满足json的格式

public String findAll(){
//        //将要被返回到客户端的对象
        List<Geometry> list = this.geoService.findAll();
        JSONObject json = new JSONObject();
        String rejson = "";
        int nCount = list.size();
        for(int i = 0; i < nCount; i++){
            int id = list.iterator().next().getId();
            String type =  list.iterator().next().getType();
            String path = list.iterator().next().getGeo();
            list.remove(0);
            rejson += type + ":" + path + "%";
        }
        System.out.println(rejson);
        json.fluentPut("allpath",rejson);
        this.setResult(json.toString());
        //将数据以json字符串形式传到请求页面end
        return SUCCESS;
    }

json格式的数据在前端解析需要用到js自带的方法eval，用法为：eval('('+data+')')，其中个data是Action返回的数据

如：

var obj = eval('(' + data + ')');

对于后端传到前端的数据处理，先用split()方法以某一个字符为断点将返回的内容分隔开，如：

TypeAndPaths = obj.allpath.split("%");

对于后台传出数据的处理，我这里传过来的数据形如：

polyline:[[lng1, lat1], [lng2, lat2], ...]，[lng，lat]是坐标点对构成的数组

然后取":"之后的数据即为高德API绘制折线中参数path的值，这里要将字符串转为json对象数组，用到了JSON.parse()方法

这是json包中包含的，需要在项目中引入json对应的包，在maven的配置文件中这样写即可

<dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20171018</version>
        </dependency>

然后是前端请求重绘的代码：

var TypeAndPaths = [];
    AMap.event.addDomListener(document.getElementById('show'), 'click', function() {
        $.ajax({
            type : 'POST',
            url : "geoAction_findAll",
            data:{},
            // 对象参数转换json格式字符串
            contentType: "application/x-www-form-urlencoded",
            dataType:'json',
            Async:true,
            success:function(data) {
                if(data){
                    //将json字符串转换为json对象，因为要通过点的方法来拿它的属性  eval('('+str+')');
                    var obj = eval('(' + data + ')');
                    TypeAndPaths = obj.allpath.split("%");
                    for(var m in TypeAndPaths){
                        if("polygon" == TypeAndPaths[m].substring(0,7)){
                            alert(TypeAndPaths[m]);
                            var jobj = JSON.parse(TypeAndPaths[m].substring(8,TypeAndPaths[m].length));
                            var arr = [];
                            for(var k in jobj){
                                arr.push([jobj[k].lng,jobj[k].lat]);
                            }
                            var polygon = new AMap.Polygon({
                                path: arr,          //设置线覆盖物路径
                                fillColor: 'yellow', // 多边形填充颜色
                                borderWeight: 2, // 线条宽度，默认为 1
                                strokeColor: 'red' // 线条颜色
                            });
                            map.add(polygon);
                        }
                        else if("polyline" == TypeAndPaths[m].substring(0,8)){
                            alert(TypeAndPaths[m]);
                            var jobj = JSON.parse(TypeAndPaths[m].substring(9,TypeAndPaths[m].length));
                            var arr = [];
                            for(var k in jobj){
                                arr.push([jobj[k].lng,jobj[k].lat]);
                            }
                            var polyline = new AMap.Polyline({
                                path: arr,        //设置线覆盖物路径
                                borderWeight: 2, // 线条宽度，默认为 1
                                strokeColor: 'red', // 线条颜色
                                lineJoin: 'round' // 折线拐点连接处样式
                            });
                            map.add(polyline);
                        }
                    }
                }else{
                    alert("传值为null");
                }
            },
            error:function (){
                alert("error");
            }
        });
    }, false);

        

然后运行tomcat即可，点击已有图形可在页面重绘数据库所有图形

持续更新。。。