项目验收完,趁着事情不是很多,对这个项目进行梳理。我主要负责地图模块,网站其他模块主要有两个,一个是报表,主要是100多张报表,技术没有难度,主要是工作量的问题。另一个是数据的校验,就是校验数据的冲突。
 
       现在主要介绍地图,地图主要使用openlayers+geoserver,通过Geoserver加载路线以及点状物的shape数据,将各个图层形成一个图层组,页面前端用openlayers加载该图层组,然后对此图层组进行查询。这样做的好处就是,如果有新的图层增加,如果没有特殊的需求,是不需要修改代码的,只需要在Geoserver中修改图层组,增加新的图层就可以了。如果你添加的是图层的数组,你就需要修改代码,而且查询的时候,不需要单独增加遍历新的图层。公司的数据工程部,就是负责Geoserver的配图,他们交付其他项目的时候,都是这种做法。因为这个项目地图是我一个人做,所以配图就不是那么好看,中规中矩。地图中区域的铁路、湖泊等装饰性图层都没有,没有那么好看。
 
      地图主要加载的是某区域的国道(6326条路)、省道(8380条)、县道(9076条路)、乡道(7万)、村道(9万)、专道(134条)以及路线上的桥隧渡涵。为了此项目,去其他用到openlayers开发部门去借鉴经验,因为他们的项目需求定位就是只加载高速,数据量很小,直接从数据库加载,很显然对于此项目行不通,数据量太大。
 
       开发的环境是Geoserver 2.7.1.1,第一次用的Geoserver 2.6.3,后来发现它对页面中文会显示乱码(尽管已经将图层的数据存储(Store)的DBF字符集设置成GBK,可能还需要其他设置就不知道了),所以改用了新的版本 。openlayers用的是2.13.1,并不是现在最新的openlayers 3.x,尽管新的备受推崇,但是由于项目太紧,没有时间去学习和替换。

      在做项目的时候,参考了很多文章,比较有用的是longshenguoji的文章,也推荐加群OpenLayers官方旗舰群[2] (群号:274788071),里面很多高手,不过大部分都是推崇openlayers 3.x,进去的时候,还是不要做伸手党,很多官方的demo都能解决问题。
 
       以上是对项目介绍,年前打算把地图部分梳理完,预计写四章内容,第一章项目介绍以及地图加载,第二章Geoserver的配置,第三章地图的图层查询以及数据的解析,第四章地图小工具。文章中都会写一些项目中自己的体会以及经验教训,走过的弯路也算是后车之鉴,毕竟openlayers 2.x有点老了。一个人的精力毕竟是有限的,欢迎大家多交流。
     
第一章简单介绍地图的加载,下面是主要前端页面,Window.css主要是将body设置成页面全宽。
 
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title ></title>
<script src="Script/jquery-1.10.2.min.js"></ script>
<script src="Script/OpenLayers/OpenLayers.js"></ script>
<script src="Script/Map.js"></ script>
<link rel="stylesheet" type="text/css" href="CSS/Window.css" /> </head>
<body>
<div id='map' class="map">
</div >
</body> </html>

下面的代码是这一系列主要的内容Map.js,页面的加载,以及后面介绍的查询以及小工具 都会写在这个js里面。

var map;

//地图初始化加载
function init()
{
var bounds = new OpenLayers.Bounds(109.62468672071573, 20.061844970906243,
117.35435946391824, 25.528473333333334); //地图的边界
var options = {
projection: "EPSG:4326", minResolution: "auto",
maxResolution: "auto", numZoomLevels: 20,
center: new OpenLayers.LonLat(113, 23)
};//地图控制 map = new OpenLayers.Map( 'map', options); //group就是相应的图层组,在Geoserver中该图层组叫 guangdong
var group = new OpenLayers.Layer.WMS("group" ,
//geoserver所在服务器地址,ip是内网的,geoserver端口是8090;
"http://192.168.0.87:8090/geoserver/guangdong/wms" ,
{
layers: "guangdong",//图层组名称
transparent: "true"
},
{ isBaseLayer: true }
); map.addLayer(group); map.zoomToExtent(bounds); //将地图扩大的数据
} $(function () {
init();
})

效果图如下:

Openlayers+Geoserver(一):项目介绍以及地图加载的更多相关文章

  1. OpenLayers项目分析——(一)项目介绍

    OpenLayers 是由MetaCarta公司开发的,用于WebGIS客户端的JavaScript包,目前的最高版本是2.7 V,通过BSD License 发行.它实现访问地理空间数据的方法都符合 ...

  2. Hadoop学习笔记—20.网站日志分析项目案例(一)项目介绍

    网站日志分析项目案例(一)项目介绍:当前页面 网站日志分析项目案例(二)数据清洗:http://www.cnblogs.com/edisonchou/p/4458219.html 网站日志分析项目案例 ...

  3. 10年C#历程的MVP之路与MVP项目介绍

            本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html  1.意外的惊喜 10月份收到微软总部寄来的荣誉证书,非常激动, ...

  4. CoinPunk项目介绍

           CoinPunk是一个bitcoin比特币钱夹服务web应用程序,你可以自己构建钱夹服务.开源,免费. 轻量级,高效 响应式设计 轻易创建新账户 详细的交易记录 构建于Node.js与H ...

  5. Android Hotpatch系列之-项目介绍

    给现实Android apk打补丁,不用强迫客户升级客户端,悄悄的就把bug修复了,程序猿再也不用被老大骂娘了. 客户端例子实现:https://github.com/fengcunhan/Hotpa ...

  6. xcode新建项目介绍

    xcode新建项目介绍 1.打开xcode选择“create a new xcode project 2.product name 工程名称 campany identifter 公司id 一般都写公 ...

  7. 斗地主算法的设计与实现--项目介绍&如何定义和构造一张牌

    本篇主要讲解斗地主中如何比较两手牌的大小. 友情提示:本篇是接着以下两篇文章就讲解的,建议先看看下面这2篇. 斗地主算法的设计与实现--如何判断一手牌的类型(单,对子,三不带,三带一,四代二等) 斗地 ...

  8. Oschat IM 开源即时通讯项目介绍 - FengJ的个人页面 - 开源中国社区

    Oschat IM 开源即时通讯项目介绍 - FengJ的个人页面 - 开源中国社区 Oschat IM 开源即时通讯项目介绍    255人收藏此文章, 我要收藏 发表于5天前(2013-08-28 ...

  9. NiftyNet项目介绍

    NiftyNet项目介绍  简述  NiftyNet是一款开源的卷积神经网络平台,旨在通过实现医学图像分析的深度学习方法和模块,支持快速原型和再现性,由WEISS (Wellcome EPSRC Ce ...

随机推荐

  1. avi文件打开出现花屏、打开不了问题

    以avi为后缀名文件,其编码格式并不是单一的,而是多种格式都可以以avi作为后缀. AVI(Audio Video Interleaved的缩写)是一种RIFF(Resource Interchang ...

  2. ssh config host

    Host mygithub HostName github.com User git IdentityFile ~/.ssh/github/id_rsa IdentitiesOnly yes

  3. sizeof(结构体) = ?

    关于结构体大小怎样计算的文章,我想网上一搜到处都有人总结,本人之所以在此基础上还要发表这样的文章是想用最简单的计算方法来总结前人给出的结论,以致我们在以后在对结构体相关编程中不会陷入字节对齐的陷阱中. ...

  4. 转-servlet 获取 post body 体用流读取为空的问题

    目前基于rest风格的很多API开始使用通过body data来传输来代替之前的key-value传输方式.在Java servlet或者springmvc中可以通过如下代码来获取并图片通过流方式传输 ...

  5. 所有HTTP请求参数及报文查看SERVLET

    HttpRequestServlet.java 说明: 用于接受所有http形式的请求,并把接受到的request中param及getInputStream全打印出来. package king.se ...

  6. 简洁的java代码

    最近在codewars上刷题,学习到了不少简洁优雅的代码. codewars和leetcode都是刷题网站,codewars的题目难度分类比较广,适合各种不同水平的coder刷题. 刷完题后,看一下其 ...

  7. WebService基本概念及原理

    一.Web Service基本概念 WebService是一种跨编程语言和跨操作系统平台的远程调用技术.Web Service也叫XML Web Service WebService是一种可以接收从I ...

  8. WIN32_LEAN_AND_MEAN宏

    网上说: 不加载MFC所需的模块. 用英语解释:Say no to MFC 如果你的工程不使用MFC,就加上这句,这样一来在编译链接时,包括最后生成的一些供调试用的模块时,速度更快,容量更小. 我们经 ...

  9. colorbox 自适应 高度

    $(".example3").colorbox({  inline: true, scrolling: false ,                    onComplete: ...

  10. 利用windows服务+timer或者windows任务计划程序+控制台进行进行每日邮件推送

    1.邮件发送代码 using System.Text; using System.Net; using System.Net.Mail; using System.Reflection; using ...