项目背景

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

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

几个方案

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-- 
若无特别说明，本站文章均为原创，转载请保留[链接]

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

  1. 使用OpenLayers 勾画地图

    <!DOCTYPE html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta charset= ...

  2. JavaWeb和WebGIS学习笔记（五）——使用OpenLayers显示地图

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  3. 使用OpenLayers发布地图

    OpenLayers是用于制作交互式Web地图的开源客户端JavaScript类库,制作的地图几乎可以在所有的浏览器中查看.因为是客户端类库,它不需要特殊的服务器端软件或配置,甚至不用下载任何东西就可 ...

  4. iOS开发----地图与导航--定位和位置信息获取

    要实现地图.导航功能,往往需要先熟悉定位功能,在iOS中通过Core Location框架进行定位操作.Core Location自身可以单独使用,和地图开发框架MapKit完全是独立的,但是往往地图 ...

  5. OpenLayers中地图缩放级别的设置方法

    来源于:http://www.cnblogs.com/sailheart/archive/2011/03/15/1984519.html 一.概述 在OpenLayers中,地图必须具有一个缩放级别的 ...

  6. 使用Nodejs+mongodb开发地图瓦片服务器

    原先地图瓦片服务器采用的是arcgisserver发布的地图服务并进行切片,但ags发布的地图服务很占内存,发布太多的话服务器压力很大.再一个就是ags价太高了. 学习Nodejs之后,发现这是一个可 ...

  7. OpenLayers在地图上显示统计图，饼图线状图柱状图，修复统计图跳动的问题

    环境介绍 Openlayers ol.js v5.3.0 Highcharts highcharts.js v7.0.1 jquery jquery-3.3.1.js v3.3.1 显示效果 地图放大 ...

  8. 引用第三方高德地图接口---使用js脚本进行开发地图定位的步骤

    ①在高德地图开发平台注册一个账号,获取key ②添加新的key ③引入map插件 ④复制过来map的脚本代码和编写搜索框 <script type="text/javascript&q ...

  9. iOS开发--地图与定位

    概览 现在很多社交.电商.团购应用都引入了地图和定位功能,似乎地图功能不再是地图应用 和导航应用所特有的.的确,有了地图和定位功能确实让我们的生活更加丰富多彩,极大的改变了我们的生活方式.例如你到了一 ...

随机推荐

  1. Paxos算法学习

    早在1990年,Leslie Lamport(即 LaTeX 中的"La",微软研究院科学家,获得2013年图灵奖)向ACM Transactions on Computer Sy ...

  2. php通过curl下载远程图片实例

    <?php $url = 'http://mf1905.com/upload/video_img/df3074c98ec5124ad47c52ff59f74e04_middle.jpeg'; f ...

  3. erlang进程监控：link和monitor

    Erlang最开始是为了电信产品而发展起来的语言,因为这样的目的,决定了她对错误处理的严格要求.Erlang除了提供exception,try catch等语法,还支持Link和Monitor两种监控 ...

  4. Docker入门系列6 如何打开多个终端进入Docker容器

    Docker容器运行后,如何进入容器进行操作呢?起初我是用SSH.如果只启动一个容器,用SSH还能应付,只需要将容器的22端口映射到本机的一个端口即可.当我启动了五个容器后,每个容器默认是没有配置SS ...

  5. antd引入普通html使用，将ant Design本地化

    一直想着能本地化antd的,不用npm以及dva那么复杂的配置环境来开发,并且本地化以后对以后链接flask的模板渲染机制也能很好的结合.下面是具体的实现方法: 1.将react的相关链接引入: &l ...

  6. 帝国CMS万能标签ecmsinfo介绍

    带模板的信息调用标签:[万能标签](ecmsinfo) 标签名称: 带模板的信息调用标签 (sys_GetEcmsInfo) 格式:[ecmsinfo]栏目ID/专题ID, 显示条数, 标题截取数, ...

  7. SQLServer中游标实例介绍（转）

    引言 我们先不讲游标的什么概念,步骤及语法,先来看一个例子: 表一 OriginSalary                      表二 AddSalary 现在有2张表,一张是OriginSal ...

  8. cocos2d-js添加广点通插屏（通过jsb反射机制）

    1.把广点通的jar包加入libs文件夹 2.修改AndroidManifest.xml文件 添加权限: <uses-permission android:name="android. ...

  9. phpPHP创建创建jpg格式图片以及压缩图片(转)

    其实是因为一些业务上的需求,所以需要对用户上传后的图片进行压缩,因为上传的图片比较大,显示的时候加载起来如果网速不给力的话就很吃力了,而且大图片也浪费空间,于是找了一下相关的资源,主要方法在开源中国上 ...

  10. 设置sudo的过期时间

    默认sudo的过期时间过短,经常要输入密码 sudo visudo Defaults env_reset找到这行代码 后面加上timestamp_timeout参数,数值是分钟 ,timestamp_ ...