`
wangzemin
  • 浏览: 13692 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

openlayers发布离线地图

阅读更多

     最近的一个项目需要在局域网内做到地图效果,在网上搜素以后,决定使用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)。

最后修改相应路径即可。

分享到:
评论

相关推荐

    openlayers发布离线地图DEMO

    本DEMO展示了如何利用OpenLayers发布离线地图,特别是针对瓦片数据的处理。 首先,理解“瓦片地图”是非常关键的。瓦片地图是一种将大型地图分割成小块(通常为256x256像素)图像的技术,这样可以有效地进行分发和...

    openlayers发布简易离线地图DEMO

    本DEMO展示了如何利用OpenLayers来发布和展示离线地图瓦片数据。 离线地图的实现主要依赖于将在线地图数据预先下载并存储在本地,然后通过OpenLayers来读取和渲染这些存储的数据。在这个DEMO中,我们重点关注两个...

    openlayers加载本地离线底图瓦片google数据直接运行即可(亲测)

    离线地图瓦片是一种将大型地图分割成许多小块图片(通常为256x256像素)的方法,这样可以更有效地存储和加载地图,尤其是在低带宽或无网络连接的环境下。 首先,我们需要了解瓦片的坐标系统。OpenLayers和Google ...

    OpenLayers离线帮助文件

    9. **更新日志和迁移指南**:如果OpenLayers有新的版本发布,更新日志会记录所有的改变,而迁移指南则指导如何将旧版本的代码平稳地迁移到新版本。 离线帮助文件的压缩包"Doc4OpenLayers"很可能包含了HTML格式的...

    百度离线地图实现(可完全实现断网访问)

    该示例为百度离线地图的一些实现,根据经纬度对离线地图实现标点,从后台返回数据,页面用ajax调用接口获取json数据,用OpenLayers实现离线地图的发布,里面包含了示例区域的离线地图瓦片以及网页Demo

    OpenLayers4.5.0所有资源包

    OpenLayers 4.5.0版本的发布,意味着它可能修复了一些已知的bug,增加了新的特性,或者优化了性能。开发者应该关注这些更新,以便利用最新的功能和改进。同时,由于OpenLayers是一个活跃的开源项目,社区经常提供...

    webgis之OpenLayers地图使用教程合集_极品.zip

    首先,"【图文】openlayers实例 第二十讲-OpenLayers离线地图快速实战(一)_百度文库.url"可能是一个关于如何使用OpenLayers构建离线地图的教程。离线地图是WebGIS中的一个重要特性,允许用户在没有网络连接时也能...

    openlayers 4.2 加载百度 高德

    总之,OpenLayers 4.2为开发者提供了强大的工具,能够轻松地将百度地图和高德地图集成到Web应用中,无论是在线还是离线。通过理解上述代码,你可以根据自己的需求定制地图应用,比如添加标记、覆盖物,或者实现交互...

    openlayer调用geoserver发布的地图实现地图的基本功能

    下面将详细解释如何使用OpenLayers调用GeoServer发布的地图以及实现地图的基本功能。 首先,GeoServer是OGC(开放地理空间联盟)标准的服务器实现,它支持WMS(Web Map Service)和WFS(Web Feature Service)等...

    离线单独加载GeoWebCache的切片

    在JavaScript开发中,特别是在WebGIS应用中,离线加载GeoWebCache切片是实现离线地图浏览的重要技术。 GeoWebCache的工作原理是将地图瓦片按照特定的坐标系统和缩放级别进行划分,每个瓦片对应一个静态图像文件。当...

    如何在内网(局域网中)发布OpenLayers地图平台.pdf

    如何在内网(局域网)中发布OpenLayers地图平台是一项关键的技术任务,尤其是在需要离线使用WebGIS系统的情况下。本文将详细介绍这一过程,包括如何发布卫星影像以及构建基于OpenLayers的WebGIS地理信息系统站点。 ...

    ol(openlayers)加载天地图/加载中xyz格式瓦片/加载Geoserver发布的WMS图层

    ol(openlayers)加载天地图/加载中xyz格式瓦片/加载Geoserver发布的WMS图层, 可以一次性加载多个图层: /** * 添加离线图层(数组) * @param {Array} optsArray 选项 * @example * var opts = [{ * url: "ol....

    太乐地图下载器V4.6破解+步骤

    支持Openlayers/ArcGIS API For Javascript/Flex等多款GIS客户端离线浏览,同时支持发布TPK,发布ArcGIS缓存为WMTS地图,助您轻松构建自己的局域网离线地图应用! 4.无缝拼接成单张大图。支持无损压缩、分块拼接,可...

    太乐地图下载器(40多个地图,还支持坐标纠偏和坐标系转换)

    (将下载地图发布为Web服务(WMTS/WMS),供ArcGIS、SuperMap、Openlayers等客户端直接远程访问,支持Openlayers的离线浏览) 04.支持无缝拼接成单张大图 (支持无损压缩、分块拼接,可在ArcMap、Erdas Imagine中...

    太乐地图4.6+注册器 测试能用

    (将下载地图发布为Web服务(WMTS/WMS),供ArcGIS、SuperMap、Openlayers等客户端直接远程访问,支持Openlayers的离线浏览) 4、支持无缝拼接成单张大图 (支持无损压缩、分块拼接,可在ArcMap、Erdas Imagine中...

    webgis面试题开源gis

    - **WMS (Web Map Service)**:主要用于获取地图图像,提供地图叠加显示等功能。 - **WFS (Web Feature Service)**:用于获取地理空间特征数据,支持读取、更新、删除等操作。 - **WCS (Web Coverage Service)**:...

    前端-tomcat-geosever-postgis部署文档

    前端部署虽未详细展开,但在实际的WebGIS系统中,前端通常需要使用GIS库(如OpenLayers或Leaflet)与后端的Geoserver进行交互,展示地图并执行各种GIS操作。此外,PostGIS的集成对于存储和检索地理数据至关重要。...

    计算机地图制图的14个源代码

    如Mapbox SDKs支持iOS和Android平台,提供离线地图、定位、路线规划等功能。 10. **实时地图更新**:对于交通、天气等动态数据,实时地图更新是必需的。源代码可能包含流数据处理和动态渲染的实现。 11. **三维...

Global site tag (gtag.js) - Google Analytics