用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--
若无特别说明，本站文章均为原创，转载请保留[链接]
用OpenLayers开发地图应用的更多相关文章
- 使用OpenLayers 勾画地图
<!DOCTYPE html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta charset= ...
- JavaWeb和WebGIS学习笔记（五）——使用OpenLayers显示地图
系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...
- 使用OpenLayers发布地图
OpenLayers是用于制作交互式Web地图的开源客户端JavaScript类库,制作的地图几乎可以在所有的浏览器中查看.因为是客户端类库,它不需要特殊的服务器端软件或配置,甚至不用下载任何东西就可 ...
- iOS开发----地图与导航--定位和位置信息获取
要实现地图.导航功能,往往需要先熟悉定位功能,在iOS中通过Core Location框架进行定位操作.Core Location自身可以单独使用,和地图开发框架MapKit完全是独立的,但是往往地图 ...
- OpenLayers中地图缩放级别的设置方法
来源于:http://www.cnblogs.com/sailheart/archive/2011/03/15/1984519.html 一.概述 在OpenLayers中,地图必须具有一个缩放级别的 ...
- 使用Nodejs+mongodb开发地图瓦片服务器
原先地图瓦片服务器采用的是arcgisserver发布的地图服务并进行切片,但ags发布的地图服务很占内存,发布太多的话服务器压力很大.再一个就是ags价太高了. 学习Nodejs之后,发现这是一个可 ...
- OpenLayers在地图上显示统计图，饼图线状图柱状图，修复统计图跳动的问题
环境介绍 Openlayers ol.js v5.3.0 Highcharts highcharts.js v7.0.1 jquery jquery-3.3.1.js v3.3.1 显示效果 地图放大 ...
- 引用第三方高德地图接口---使用js脚本进行开发地图定位的步骤
①在高德地图开发平台注册一个账号,获取key ②添加新的key ③引入map插件 ④复制过来map的脚本代码和编写搜索框 <script type="text/javascript&q ...
- iOS开发--地图与定位
概览 现在很多社交.电商.团购应用都引入了地图和定位功能,似乎地图功能不再是地图应用 和导航应用所特有的.的确,有了地图和定位功能确实让我们的生活更加丰富多彩,极大的改变了我们的生活方式.例如你到了一 ...
随机推荐
- 机器学习实战之SVM
一引言: 支持向量机这部分确实很多,想要真正的去理解它,不仅仅知道理论,还要进行相关的代码编写和测试,二者想和结合,才能更好的帮助我们理解SVM这一非常优秀的分类算法 支持向量机是一种二类分类算法,假 ...
- iptables简易使用教程
iptables是linux里比较常用的防火墙,也是centos7.0之前的版本默认自带的防火墙. 配置防火墙需特别注意一件事情:如果服务器在异地机房,需要谨慎配置端口,以免造成新配置生效后无法远程登 ...
- 如何创建虚拟硬盘 + os 读取硬盘参数代码
[0]README 0.1) 本文旨在演示如何利用 bximage 创建虚拟硬盘: 0.2) 利用 os 读取硬盘参数, source code from orange's implemention ...
- Yii2 跨库orm实现
近期在对公司的Yii2项目进行子系统拆分,过度阶段难免会有一些跨库操作,原生语句还好,加下库名前缀就可以了,可是到了orm问题就来了,特别是用到model做查询的时候,现在来记录一下跳过的坑, 像下面 ...
- React中key的必要性与使用
React这个框架的核心思想是,将页面分割成一个个组件,一个组件还可能嵌套更小的组件,每个组件有自己的数据(属性/状态);当某个组件的数据发生变化时,更新该组件部分的视图.更新的过程是由数据驱动的,新 ...
- PHP 格式化数字串
在xls或csv文件中, 超过12位以上的数字会被"科学计数", 所以当php读取这些文件的时候, 会读成 420E+16 , 显然这不是我们想要的, 所以就要用到数字格式化了! ...
- JavaScript判断图片是否加载完成的三种方式 (转)
一.load事件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE HTML> <html> <head> ...
- JS dom最常用API
//document方法: var cont = document.getElementByIdx_x('cont'); //className给标签添加class cont.classN ...
- selenium超时设置
设置超时时间 from selenium import webdriverdriver=webdriver.Chrome()driver.set_page_load_timeout(5)driver. ...
- PAT 天梯赛 L2-022. 重排链表 【数据结构】
题目链接 https://www.patest.cn/contests/gplt/L2-022 思路 先用结构体 把每个结点信息保存下来 然后深搜一下 遍历一下整个链表 然后就重新排一下 但是要注意一 ...