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

目录
相关文章
|
8月前
|
机器学习/深度学习 缓存 自然语言处理
DeepSeek背后的技术基石:DeepSeekMoE基于专家混合系统的大规模语言模型架构
DeepSeekMoE是一种创新的大规模语言模型架构,融合了专家混合系统(MoE)、多头潜在注意力机制(MLA)和RMSNorm归一化。通过专家共享、动态路由和潜在变量缓存技术,DeepSeekMoE在保持性能的同时,将计算开销降低了40%,显著提升了训练和推理效率。该模型在语言建模、机器翻译和长文本处理等任务中表现出色,具备广泛的应用前景,特别是在计算资源受限的场景下。
1021 29
DeepSeek背后的技术基石:DeepSeekMoE基于专家混合系统的大规模语言模型架构
|
API
[已解决]openai.error.APIConnectionError: Error communicating with OpenAI: HTTPSConnectionPool(host=‘api
[已解决]openai.error.APIConnectionError: Error communicating with OpenAI: HTTPSConnectionPool(host=‘api
2436 0
|
8月前
|
云安全 运维 安全
阿里云免费版SSL证书申请及部署图文教程指导
SSL证书是个人和企业搭建网站不可或缺的云安全产品,SSL证书能够为网站和移动应用(APP)及小程序提供数据HTTPS加密协议访问,保障数据的安全。阿里云SSL证书有收费版的也有免费版的,有的新手用户由于是初次在阿里云申请SSL证书,可能不是很清楚免费版证书的申请和部署流程,本文为以图文形式为大家展示阿里云免费版SSL证书最新的申请及部署教程,以供参考。
|
9月前
|
存储 人工智能 自然语言处理
|
9月前
|
运维 关系型数据库 分布式数据库
阿里云PolarDB:引领云原生数据库创新发展
阿里云PolarDB引领云原生数据库创新,2024云栖大会将分享其最新发展及在游戏行业的应用。PolarDB凭借弹性、高可用性、多写技术等优势,支持全球80多个站点,服务1万多家企业。特别是针对游戏行业,PolarDB助力Funplus等公司实现高效运维、成本优化和业务扩展。通过云原生能力,PolarDB推动游戏业务的全球化部署与快速响应,提升用户体验并保障数据安全。未来,PolarDB将继续探索AI、多云管理等前沿技术,为用户提供更智能的数据基础设施。
346 2
|
11月前
|
人工智能 测试技术 API
探索通义灵码的无限可能:功能场景与应用实战分析
本文深入探讨了通义灵码在现代软件开发中的应用价值。通过代码补全、单元测试自动生成等功能,通义灵码显著提升了开发效率和代码质量。文章通过具体案例展示了其在团队协作、代码风格一致性和创新项目中的实用性,并展望了未来开发的新趋势。
486 5
探索通义灵码的无限可能:功能场景与应用实战分析
|
编解码 前端开发 JavaScript
OpenLayers入门-第一篇、基本概念与核心组件
OpenLayers入门-第一篇、基本概念与核心组件
546 3
|
缓存 Java 关系型数据库
【超全详解】Maven工程配置与常见问题解决指南
检查Maven配置包括验证路径、设置pom.xml与Project Structure的Java版本。基本操作有`clean-compile`、`install`和`package`,其中`install`会将jar包放入本地仓库。获取他人工程后需修改配置、清除缓存、更新依赖等。配置文件应从Maven Repository找寻,选择稳定高版本。创建Maven工程可选archetype如`quickstart`或直接创建Java工程。基本目录结构遵循分层设计原则,常见问题包括假性导包、端口占用、时区问题等,对应解决方案包括删除本地仓库文件、调整系统设置或重新加载项目。
2309 6
【超全详解】Maven工程配置与常见问题解决指南
|
分布式计算 API 云计算
|
机器学习/深度学习 人工智能 自然语言处理
【机器学习】Chameleon多模态模型探究
【机器学习】Chameleon多模态模型探究
425 5