OpenLayers学习笔记8——使用servlet实现从数据库获取数据并标注

时间：2015-06-20 11:58:59 阅读：402 评论：0 收藏：0 [点我收藏+]

标签：javascript openlayers webgis 前端开发地理信息

这两天在图书馆边看jsp边查边写代码，改完了老板交给的任务，也顺带实现了查询的效果，先来看下最终实现的效果图：

技术分享

整个实现思路是：服务器端采用servlet+mysql模糊查询，servlet返回json数据，客户端解析json数据以表格形式显示并根据经纬度在地图上进行标注。

1、服务器端Servlet代码：

package edu.whu.vge.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import edu.whu.vge.dbUtil.PoiDBBean;

public class SchoolQueryServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	/*
	 * (non-Javadoc)
	 * 
	 * @see
	 * javax.servlet.http.HttpServlet#doPost(javax.servlet.http.HttpServletRequest
	 * , javax.servlet.http.HttpServletResponse)
	 */
	@Override
	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException {
		// 设置输出内容格式和编码
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		// 设置接收参数编码格式
		response.setCharacterEncoding("utf-8");
		String schoolID = request.getParameter("schoolID");
		String schoolName = request.getParameter("schoolName");
		String schoolAddress = request.getParameter("schoolAddress");
		String sql = "select * from school where ID like " + "\'" + "%"
				+ schoolID + "%" + "\'" + " and name like " + "\'" + "%"
				+ schoolName + "%" + "\'" + " and address like " + "\'" + "%"
				+ schoolAddress + "%" + "\'";
		PoiDBBean poiDBBean = new PoiDBBean();

		//
		JSONArray array = new JSONArray();
		try {
			ResultSet resultSet = poiDBBean.query(sql);
			while (resultSet.next()) {
				JSONObject object = new JSONObject()
						.element("schoolName", resultSet.getString(4))
						.element("schoolAddress", resultSet.getString(5))
						.element("schoolTel", resultSet.getString(6))
						.element("schoolKind", resultSet.getString(7))
						.element("schoolLat", resultSet.getDouble(3))
						.element("schoolLon", resultSet.getDouble(2));
				array.add(object);

			}
			out.println(array.toString());
			System.out.println(array.toString());

		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} finally {
			try {
				poiDBBean.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}

	}

	public void destroy() {
		super.destroy(); // Just puts "destroy" string in log
		// Put your code here
	}

	/**
	 * Initialization of the servlet. <br>
	 * 
	 * @throws ServletException
	 *             if an error occurs
	 */
	public void init() throws ServletException {
		// Put your code here
	}

}

这里看一下servlet的知识就可以了。

2、客户端请求代码：

这里采用jquery ajax方法异步请求服务器端servlet，jquery及ajax见：w3cschool。代码如下：

  $.ajax({
        
            url: "http://127.0.0.1:8080/taxGIS/servlet/SchoolQueryServlet",
            type: 'post',
            dataType: 'json',
            data: {
                schoolID: $("#schoolID").val(),
                schoolName: $("#schoolName").val(),
                schoolAddress: $("#schoolAddress").val()
            },
            success: function(jsonData){
                //查询返回数据后标注在地图上并启用查询结果显示对话框
                patchAddMarker(jsonData);
                showQueryRes(jsonData);
            }
            
        });

3、解析json并标注在地图上：

以一次查询为例，得到的json数据如下：

[
    {
        "schoolName": "城阳区第二实验中学", 
        "schoolAddress": "山东省青岛市城阳区礼阳路107号", 
        "schoolTel": "0532-81156666", 
        "schoolKind": "教育学校:中学", 
        "schoolLat": 36.28491, 
        "schoolLon": 120.40238
    }, 
    {
        "schoolName": "小寨子幼儿园", 
        "schoolAddress": "山东省青岛市城阳区 ", 
        "schoolTel": " ", 
        "schoolKind": "教育学校:幼儿园", 
        "schoolLat": 36.29791, 
        "schoolLon": 120.39172
    }, 
    {
        "schoolName": "新太阳托管中心", 
        "schoolAddress": "山东省青岛市市北区嘉兴路11-2", 
        "schoolTel": " ", 
        "schoolKind": "教育学校:幼儿园", 
        "schoolLat": 36.10921, 
        "schoolLon": 120.35659
    }, 
    {
        "schoolName": "金苹果幼儿园(香江医院西)", 
        "schoolAddress": "山东省青岛市黄岛区香江路311号(香江医院西)", 
        "schoolTel": " ", 
        "schoolKind": "教育学校:幼儿园", 
        "schoolLat": 35.97422, 
        "schoolLon": 120.16204
    }, 
    {
        "schoolName": "锦桥社区托辅中心", 
        "schoolAddress": "山东省青岛市黄岛区王家石桥村锦桥社区", 
        "schoolTel": " ", 
        "schoolKind": "教育学校:幼儿园", 
        "schoolLat": 35.87418, 
        "schoolLon": 120.00619
    }, 
    {
        "schoolName": "艺星幼儿园", 
        "schoolAddress": "山东省青岛市城阳区岙东北路541", 
        "schoolTel": " ", 
        "schoolKind": "教育学校:幼儿园", 
        "schoolLat": 36.33419, 
        "schoolLon": 120.2701
    }, 
    {
        "schoolName": "隐珠街道办事处中心幼儿园", 
        "schoolAddress": "山东省青岛市胶南市灵海路126号", 
        "schoolTel": " ", 
        "schoolKind": "教育学校:幼儿园", 
        "schoolLat": 35.89869, 
        "schoolLon": 120.0444
    }, 
    {
        "schoolName": "慧诺托管家园", 
        "schoolAddress": "山东省青岛市黄岛区虹桥大街83-5", 
        "schoolTel": " ", 
        "schoolKind": "教育学校:幼儿园", 
        "schoolLat": 35.87653, 
        "schoolLon": 120.00338
    }, 
    {
        "schoolName": "四方区尚志幼儿园", 
        "schoolAddress": "山东省青岛市市北区尚志路4", 
        "schoolTel": " ", 
        "schoolKind": "教育学校:幼儿园", 
        "schoolLat": 36.11456, 
        "schoolLon": 120.35691
    }, 
    {
        "schoolName": "宝贝之家亲子园", 
        "schoolAddress": "山东省青岛市崂山区松岭路58-1", 
        "schoolTel": "(0532)88891918,(0532)88893227", 
        "schoolKind": "教育学校:幼儿园", 
        "schoolLat": 36.10406, 
        "schoolLon": 120.47963
    }, 
    {
        "schoolName": "天真幼儿园(灵山卫街道办事处人大工作办公室北)", 
        "schoolAddress": "山东省青岛市黄岛区329省道(灵山卫街道办事处人大工作办公室北)", 
        "schoolTel": " ", 
        "schoolKind": "教育学校:幼儿园", 
        "schoolLat": 35.93806, 
        "schoolLon": 120.15021
    }, 
    {
        "schoolName": "城阳区城阳街道皂户幼儿园", 
        "schoolAddress": "山东省青岛市城阳区正阳中路", 
        "schoolTel": " ", 
        "schoolKind": "教育学校:幼儿园", 
        "schoolLat": 36.30772, 
        "schoolLon": 120.35847
    }, 
    {
        "schoolName": "胶南市王台镇石梁小学", 
        "schoolAddress": "山东省青岛市黄岛区 ", 
        "schoolTel": "0532-83116752", 
        "schoolKind": "教育学校:小学", 
        "schoolLat": 36.07053, 
        "schoolLon": 120.03613
    }
]

json解析可以采用json2.js也可以使用js的eval函数。这里采用后者，代码如下，很简单就不做解释了。

function patchAddMarker(jsonData){
    var jsonArray = eval(jsonData);
    for (var i = 0; i < jsonArray.length; i++) {
        var schoolName = jsonArray[i].schoolName;
        var schoolAddress = jsonArray[i].schoolAddress;
        var schoolTel = jsonArray[i].schoolTel;
        var schoolKind = jsonArray[i].schoolKind;
        var schoolLat = jsonArray[i].schoolLat;
        var schoolLon = jsonArray[i].schoolLon;
        
        var lonlat = corTransform(schoolLon, schoolLat);
        var lonLatStr = lonlat.toShortString();
        var lonLatArr = lonLatStr.split(",");
        var lon = lonLatArr[0];
        var lat = lonLatArr[1];
        
        var att = {
            名称: schoolName,
            地址: schoolAddress,
            电话: schoolTel,
            类别: schoolKind
        
        };
        addMarke(lon, lat, att);
    }
}

4、表格显示：

这里采用jquery easyui的datagrid控件来实现，其表格控件的使用网上有很多博客，参考就可以实现了，这里不再展开了。

5、总结

1、遇到跨域问题，客户端请求不到访问结果。解决办法：访问地址为：http://127.0.0.1:8080/taxGIS/index.jsp；而不是http://localhost:8080/taxGIS/index.jsp

2、jquery-ui和jquery easyui冲突问题。这两个都是基于jquery，有些方法和属性名称都是相同的，导致冲突，就看引入其js的先后顺序，后引入的覆盖先引入的。我这里主要用到jquery-ui的对话框和按钮以及折叠栏，而jquery easyui只用到了datagrid，所以我的引用是这样的：jquery--->jquery-ui--->jquery easyui

 <script src="lib/jquery/js/jquery-1.10.2.js"></script>
        <script src="lib/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
        <script src="lib/jquery/js/jquery-ui-1.10.4.custom.js"></script>

3、前端开发用到的知识比较多而且杂，不像C#、java开发那般只用一种语言。刚开始可能会觉得手足无措，但是只要用心，入了门后面就会轻松些了。

4、注重开发部署的便宜性、用户体验度，不能做出来的东西部署非常复杂而又不实用。

OpenLayers学习笔记8——使用servlet实现从数据库获取数据并标注

标签：javascript openlayers webgis 前端开发地理信息

原文地址：http://blog.csdn.net/giser_whu/article/details/46569603

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行