用OpenLayers开发地图应用

项目背景

最近有一个使用全球地图展示数据的项目,用地图展示数据本身没什么难度,但出于安全和保密的考虑,甲方单位要求项目不能连接外网,只能在内网使用,也就是说,我们不得不在内网中部署一个地图服务器,在这个地图服务器的基础上进行开发。

由于之前没有这方面的技术积累,在经过一番搜素和比较后,发现了几个解决方案。 不过,甲方不愿意再花钱购买任何第三方的软件和服务了,所以,我的解决方案就只能在开源方案中寻找了,商业的解决方案都被排除在外。

几个方案

GeoServer

GeoServer是一个功能齐全,遵循OGC开放标准的开源WFS-T和WMS服务器。利用Geoserver可以把数据作为maps/images来发布(利用WMS来实现)也可以直接发布实际的数据(利用WFS来实现),同时也提供了修改,删除和新增的功能(利用WFS-T)。

GeoServer的安装部署比较简单,按照官方网站的文档就可以了。 不过,由于GIS方面的知识比较欠缺,加上项目工期紧张,一直没有搞定地图的显示。

OpenLayers

Openlayers是一个开源的Javascript库(基于修改过的BSD许可发布),用来在Web浏览器显示地图。它提供API接口创建类似于Google Maps和Bing Maps的基于web的地理应用。

选定OpenLayers+Google地图瓦片

结合项目的需求,由于功能上只是用来显示地图,标注地点而已,用OpenLayers足够满足需求,所以,采用OpenLayers与Google离线地图相结合的解决方案。 下面,详细的记录我安装配置的过程,方便有类似需要的朋友们参考。

1. 安装配置web服务器

我选择了nginx作为web服务器。我使用的是Mac OS操作系统,下面的命令适用于Mac OS,使用其他系统的朋友们可以根据自己的实际情况进行操作。

brew install nginx

注意:修改配置文件 /usr/local/etc/nginx/nginx.conf

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile      off;

sendfile默认是on,改成off

原因:sendfile on #开启高效文件传输模式,sendfile指令指定nginx是否调用sendfile函数来输出文件,对于普通应用设为on,如果用来进行下载等应用磁盘IO重负载应用,可设置为off,以平衡磁盘与网络I/O处理速度,降低系统的负载。注意:如果图片显示不正常把这个改成off。

如果不改成off,图片请求会不正常。

2.配置离线地图

打开/usr/local/var/www目录,这是nginx的web根目录,创建gis目录,把下载的google离线地图文件放到这个目录下。 下载openlayers v2.13.1,将其解压后放到/usr/local/var/www目录下。

Google离线地图,可以采用网上的某个工具,这里就不说了,免得有广告嫌疑。大家自己搜索一下就可以找到很多类似的工具。

3.创建example.html

<html>
     <head>
          <title>Google Local Tiles</title>
          <script src="../lib/OpenLayers.js"></script>
          <script type="text/javascript">
               var map, layer; 

               function init() {
               var map = new OpenLayers.Map("map", {
                         maxExtent : new OpenLayers.Bounds(-20037508.3427892,
                             -20037508.3427892,
                             20037508.3427892,
                             20037508.3427892),

               numZoomLevels : 8
               });

               layer = new OpenLayers.Layer.TMS("Name",
                                        "http://localhost:8080/google_map/", {
                                        'type' : 'jpg',
                                        'getURL' : get_my_url
                                    });

               map.addLayer(layer);

               map.addControl(new OpenLayers.Control.Scale());
               map.addControl(new OpenLayers.Control.ScaleLine());
               map.addControl(new OpenLayers.Control.MousePosition());

               // 设置最小zoom
               map.isValidZoomLevel = function(zoomLevel) {
                   return ( (zoomLevel != null) &&
                   // set min level here, could read from property
                   (zoomLevel >= 3) &&
                   (zoomLevel < this.getNumZoomLevels()) );
               }

               var lonLat = new OpenLayers.LonLat(117.62519, 39.52329);
               lonLat.transform(map.displayProjection, map.getProjectionObject());
               map.setCenter(lonLat, 8);

               }

               function tlen(len, mystr){
                        mystr = String(mystr);
                        var num = len - mystr.length;
                        for (var i = 0; i <= num; i++)
                        {
                           mystr =  "0" + mystr;
                        }

                        return mystr;
                    }

               function get_my_url(bounds) {
                    var res = this.map.getResolution();
                    var x = Math.round((bounds.left - this.maxExtent.left)
                              / (res * this.tileSize.w));
                    var y = Math.round((this.maxExtent.top - bounds.top)
                              / (res * this.tileSize.h));
               var z = this.map.getZoom()+1;

                        z= tlen(1, z);
                        x= tlen(5, x);
                        y = tlen(5, y);

                         var path = "L"+z+"/"+ y + "-" + x + ".jpg";
                         var url = this.url;
                         if (url instanceof Array) {
                            url = this.selectUrl(path, url);
                        }

                        return url + path;

               }
          </script>
     </head>

     <body onload="init();">
          <div style="width: 100%; height: 100%" id="map"></div>
     </body>
</html>

 

 

4、访问地图

如果不出意外,访问http://localhost:8080/gis/v2.13/examples/example.html,就可以看到显示的本地地图了。

--EOF-- 
若无特别说明,本站文章均为原创,转载请保留[链接]

时间: 2025-01-21 02:25:26

用OpenLayers开发地图应用的相关文章

app-求解,关于iOS开发地图绘线(动态)

问题描述 求解,关于iOS开发地图绘线(动态) 最近在仿行图这款app学习.现在一个测距的功能都完成不了了!求大神能提供点思路.就是中间那条线可以用什么方法画出来呢?我现在用的思路是 添加overLay 然后用pan手势来处理,每次pan触发后,把上一个overLay删除,添加新的overLay这样造成的结果就是不断的添加删除,移动的话就会有闪烁.可是这款app不会出现这种问题,所以我觉得我的思路应该是不对的,希望能有大神指点.谢谢

swift-使用SWIFT开发地图应用 有个疑问求各位大神帮忙

问题描述 使用SWIFT开发地图应用 有个疑问求各位大神帮忙 import UIKit let APIKey = "456502f40fcce736c5a32fbb397ff19c" class MapViewController: UIViewController,UITableViewDelegate,AMapSearchDelegate,MAMapViewDelegate,UIGestureRecognizerDelegate{ var mapView: MAMapView? v

baidu-Android怎么开发地图呢?

问题描述 Android怎么开发地图呢? 用baidu地图怎么使用在自己的应用上呢?求大神解答....... 解决方案 参考:http://www.apkbus.com/android-109187-1-1.html 解决方案二: 百度地图都有包,你引入到自己工程,按照人家提供的sdk开发文档,做就是了,接口都是提供好的 解决方案三: 百度地图能直接拿来用,有开发接口

openlayers限制地图拖动区域

    现在做webgis基本都会用到openlayers或者leaflet.那么在显示地图的时候,特别是显示小区域地图的时候,由于地图区域较小,就会存在把地图拖动到显示区域之外的现象.那么该如何限制地图拖动的区域呢.        在openlayers2中有restrictedExtent属性,直接设置下即可. var options = { controls : [ new OpenLayers.Control.Navigation() ], projection: new OpenLay

基于OpenLayers的地图应用中图标汉化

    在OpenLayers中图标默认是英文的,但是作为中国人,且做出来的地图产品主要是面向中国人,英文的图标对我们来说自然是不可接受的,因此需要对其进行汉化.这个功能做起来也很简单.只需要添加如下几个语句即可: OpenLayers.INCHES_PER_UNIT["千米"]=OpenLayers.INCHES_PER_UNIT["km"]; OpenLayers.INCHES_PER_UNIT["米"]=OpenLayers.INCHES_

ios开发地图问题-求大神百度地图 引擎初始化失败

问题描述 求大神百度地图 引擎初始化失败 百度地图 引擎初始化失败 是什么原因,授权网络都是好的,定位也没有问题 解决方案 看看硬件是否符合运行标准 解决方案二: 还是要查看sdk,看返回的错误信息具体分析.

地图开发-地图上图像显示不出的问题

问题描述 地图上图像显示不出的问题 怎么显示不出地图啊,就只有空格子,没有图片啊...在虚拟机上可以跑,但是到了手机上就显示不了... 解决方案 百度地图?密钥对不对? 解决方案二: 一般是密钥问题,demo里应该有提示是否验证通过.或者网络不好

java离线地图开发

问题描述 最近公司准备项目,需要用到地图,web上的地图,具体功能是:可以实现地图上某个点或者某个区域闪烁,可以实现从一个点到另一个点有轨迹的移动,请问各位前辈们,实现这些需要用到什么框架或者用什么开发比较好,本人用的java,地图需要离线的,就是不通过互联网,局域网里面的. 解决方案 用开源地图服务器吧.前端JS调用使用Openlayers.地图服务器:geoserver(java开发)地图数据存储:Postgres+PostGIS如果要加快访问速度,可以使用geoserver缓存切片.这个组

iOS 6苹果地图应用开发

在iOS 6之后,不再使用谷歌地图了,而是使用苹果自己的地图,但是API编程接口没有太大的变化.开发人员不需要再学习很多新东西就能开发地图应用,这是负责任的做法.因此本节介绍的内容也同样适用于iOS5上运行地图应用开发. iOS应用程序中使用Map Kit API开发地图应用程序. 其核心是MKMapView类使用.我们可以设置地图显示方式.控制地图,可以在地图上添加标注. 显示地图 在Map Kit API中显示地图的视图是MKMapView,它的委托协议是MKMapViewDelegate.