最近的一个项目需要在局域网内做到地图效果,在网上搜素以后,决定使用openlayers加离线瓦片地图来做。
下面代码是摸索了几天以后做出的例子,当然因为了解不深,只是简单做了一个效果,没用到太多的组件和方法,还希望精通的大神不要笑话。
代码:
<?xml version="1.0" encoding="gbk"?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> <style> html,body { height: 99%; width: 99%; } #map { width: 512px; height: 512px; border: 1px solid black; } /* General settings */ body { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: small; } /* Toolbar styles */ #toolbar { position: relative; padding-bottom: 0.5em; } </style> <script src="OpenLayers.js"></script> <script type="text/javascript"> //地图基础配置 var options = { controls : [ new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.MousePosition({"displayProjection":"EPSG:4326"}) ], //地图的范围,通过投影方式和经纬度计算 restrictedExtent: new OpenLayers.Bounds(12522438.610693185, 4382976.287599767, 13464142.503343074, 5010371.265871971) , //地图上的1-12的分辨率,1像素=?米 resolutions: [78271.516953125, 39135.7584765625, 19567.87923828125, 9783.939619140625, 4891.9698095703125, 2445.9849047851562, 1222.9924523925781, 611.4962261962891, 305.74811309814453, 152.87405654907226, 76.43702827453613, 38.218514137268066], maxResolution : 'auto', //坐标投影方式 projection: "EPSG:900913", displayProjection: new OpenLayers.Projection("EPSG:4326"), //单位,米,另外还有度 units : 'm', //缩放级别 numZoomLevels:11 }; var map; var markers; function init(){ //新建地图对象 map = new OpenLayers.Map('map',options); //新建图层 var tmsoverlay = new OpenLayers.Layer.TMS( "test", "",{ type: 'png',getURL: get_my_url,alpha:true,isBaseLayer: true}); map.addLayer(tmsoverlay); map.addControl(new OpenLayers.Control.Navigation()); var lonLat = new OpenLayers.LonLat(117.21716, 39.12793); lonLat.transform(map.displayProjection, map.getProjectionObject()); map.setCenter(lonLat, 7); markers = new OpenLayers.Layer.Markers( "Markers" ); map.addLayer(markers); //设置地图最小缩放级别为7级,小于7时放大为7 map.events.register("zoomend", this, function (e) { if (map.getZoom() < 7){ map.setCenter(map.getCenter(),7); } }); //通过经纬度的范围和投影方式计算出restrictedExtent的值 var lonLat1 = new OpenLayers.LonLat(112.49579,41.50446); lonLat1.transform(map.displayProjection, map.getProjectionObject()); var lonLat2 = new OpenLayers.LonLat(121.63367,36.59568); lonLat2.transform(map.displayProjection, map.getProjectionObject()); var bounds = new OpenLayers.Bounds(); bounds.extend(lonLat1); bounds.extend(lonLat2); console.log(bounds); } //20037508.3427892是最大的显示范围 function get_my_url (bounds) { var res = this.map.getResolution(); var x = Math.round ((bounds.left + 20037508.3427892) / (res * this.tileSize.w)); var y = Math.round ((20037508.3427892 - bounds.top) / (res * this.tileSize.h)); var z = this.map.getZoom() + 1; var path = "data/" + z + "/" + x + "/" + y + "." + this.type; return this.url + path; } //添加标注 var marker1; function addMarker(){ var url = 'Z6.png'; var sz = new OpenLayers.Size(10, 10); //尺寸大小 var calculateOffset = function(size) { return new OpenLayers.Pixel(-(size.w/2), -size.h); }; var icon = new OpenLayers.Icon(url, sz, null, calculateOffset); var markerLonlat = new OpenLayers.LonLat(117.18843,39.12154); //坐标的投影变换 markerLonlat.transform(map.displayProjection, map.getProjectionObject()); marker1 = new OpenLayers.Marker(markerLonlat, icon); markers.addMarker(marker1); } function removeMarker() { //移除单个标注 //markers.removeMarker(marker1); //移除全部标注,即删掉标注图层,并重新初始化 map.removeLayer(markers); markers = new OpenLayers.Layer.Markers( "Markers" ); map.addLayer(markers); } </script> </head> <body onload="init()"> <input type="button" value="显示标注" onclick="addMarker()"/> <input type="button" value="移除标注" onclick="removeMarker()"/> <div id='map'></div> </body> </html>
附件是一个简单的离线地图下载器,当然也可以去网上找,有很多。
然后可以用经纬度的范围推算出实际的restrictedExtent的值,bounds参数为(left,bottom,right,top)。
最后修改相应路径即可。
相关推荐
本DEMO展示了如何利用OpenLayers发布离线地图,特别是针对瓦片数据的处理。 首先,理解“瓦片地图”是非常关键的。瓦片地图是一种将大型地图分割成小块(通常为256x256像素)图像的技术,这样可以有效地进行分发和...
本DEMO展示了如何利用OpenLayers来发布和展示离线地图瓦片数据。 离线地图的实现主要依赖于将在线地图数据预先下载并存储在本地,然后通过OpenLayers来读取和渲染这些存储的数据。在这个DEMO中,我们重点关注两个...
离线地图瓦片是一种将大型地图分割成许多小块图片(通常为256x256像素)的方法,这样可以更有效地存储和加载地图,尤其是在低带宽或无网络连接的环境下。 首先,我们需要了解瓦片的坐标系统。OpenLayers和Google ...
9. **更新日志和迁移指南**:如果OpenLayers有新的版本发布,更新日志会记录所有的改变,而迁移指南则指导如何将旧版本的代码平稳地迁移到新版本。 离线帮助文件的压缩包"Doc4OpenLayers"很可能包含了HTML格式的...
该示例为百度离线地图的一些实现,根据经纬度对离线地图实现标点,从后台返回数据,页面用ajax调用接口获取json数据,用OpenLayers实现离线地图的发布,里面包含了示例区域的离线地图瓦片以及网页Demo
OpenLayers 4.5.0版本的发布,意味着它可能修复了一些已知的bug,增加了新的特性,或者优化了性能。开发者应该关注这些更新,以便利用最新的功能和改进。同时,由于OpenLayers是一个活跃的开源项目,社区经常提供...
首先,"【图文】openlayers实例 第二十讲-OpenLayers离线地图快速实战(一)_百度文库.url"可能是一个关于如何使用OpenLayers构建离线地图的教程。离线地图是WebGIS中的一个重要特性,允许用户在没有网络连接时也能...
总之,OpenLayers 4.2为开发者提供了强大的工具,能够轻松地将百度地图和高德地图集成到Web应用中,无论是在线还是离线。通过理解上述代码,你可以根据自己的需求定制地图应用,比如添加标记、覆盖物,或者实现交互...
下面将详细解释如何使用OpenLayers调用GeoServer发布的地图以及实现地图的基本功能。 首先,GeoServer是OGC(开放地理空间联盟)标准的服务器实现,它支持WMS(Web Map Service)和WFS(Web Feature Service)等...
在JavaScript开发中,特别是在WebGIS应用中,离线加载GeoWebCache切片是实现离线地图浏览的重要技术。 GeoWebCache的工作原理是将地图瓦片按照特定的坐标系统和缩放级别进行划分,每个瓦片对应一个静态图像文件。当...
如何在内网(局域网)中发布OpenLayers地图平台是一项关键的技术任务,尤其是在需要离线使用WebGIS系统的情况下。本文将详细介绍这一过程,包括如何发布卫星影像以及构建基于OpenLayers的WebGIS地理信息系统站点。 ...
ol(openlayers)加载天地图/加载中xyz格式瓦片/加载Geoserver发布的WMS图层, 可以一次性加载多个图层: /** * 添加离线图层(数组) * @param {Array} optsArray 选项 * @example * var opts = [{ * url: "ol....
支持Openlayers/ArcGIS API For Javascript/Flex等多款GIS客户端离线浏览,同时支持发布TPK,发布ArcGIS缓存为WMTS地图,助您轻松构建自己的局域网离线地图应用! 4.无缝拼接成单张大图。支持无损压缩、分块拼接,可...
(将下载地图发布为Web服务(WMTS/WMS),供ArcGIS、SuperMap、Openlayers等客户端直接远程访问,支持Openlayers的离线浏览) 04.支持无缝拼接成单张大图 (支持无损压缩、分块拼接,可在ArcMap、Erdas Imagine中...
(将下载地图发布为Web服务(WMTS/WMS),供ArcGIS、SuperMap、Openlayers等客户端直接远程访问,支持Openlayers的离线浏览) 4、支持无缝拼接成单张大图 (支持无损压缩、分块拼接,可在ArcMap、Erdas Imagine中...
- **WMS (Web Map Service)**:主要用于获取地图图像,提供地图叠加显示等功能。 - **WFS (Web Feature Service)**:用于获取地理空间特征数据,支持读取、更新、删除等操作。 - **WCS (Web Coverage Service)**:...
前端部署虽未详细展开,但在实际的WebGIS系统中,前端通常需要使用GIS库(如OpenLayers或Leaflet)与后端的Geoserver进行交互,展示地图并执行各种GIS操作。此外,PostGIS的集成对于存储和检索地理数据至关重要。...
如Mapbox SDKs支持iOS和Android平台,提供离线地图、定位、路线规划等功能。 10. **实时地图更新**:对于交通、天气等动态数据,实时地图更新是必需的。源代码可能包含流数据处理和动态渲染的实现。 11. **三维...