openlayers自定义规则切片TMS浏览实例_openlayer加载tms,openlayerstms资源-CSDN文库

共26个文件

png：22个

js：2个

gif：1个

4星 · 超过85%的资源需积分: 49 149 浏览量 2012-07-17 15:50:40 上传评论 1 收藏 178KB RAR 举报

在IT行业中，地图服务是数据可视化的一个重要领域，OpenLayers是一个强大的JavaScript库，用于创建交互式的二维和三维地图应用。本实例重点讲解如何利用OpenLayers实现自定义规则切片的TMS（Tile Map Service）浏览。 TMS是一种地图瓦片服务，它将地图分割成多个小块（即瓦片），以便于快速加载和高效展示大规模地理数据。在OpenLayers中，我们可以自定义规则来控制这些瓦片的生成和显示，以满足特定需求。 `TMS.html`是主页面，它包含了网页的HTML结构和OpenLayers的相关设置。在这个文件中，我们需要引入`openlayers.js`库，它是OpenLayers的核心，提供地图操作和渲染功能。此外，`Config.js`文件通常用来存储地图配置信息，如图层设置、投影、比例尺等。在`Config.js`中，你可以定义TMS服务的URL、图层名称、版本以及其他参数。例如，你可能需要设置一个TMS服务端点，如`http://yourserver.com/tiles/{z}/{x}/{y}.png`，其中`{z}`、`{x}`和`{y}`分别代表缩放级别、行和列，这些值在加载瓦片时会被动态替换。在`TMS.html`中，创建一个新的OpenLayers.Map对象，并添加TMS图层。这通常涉及以下步骤： 1. 初始化地图容器：创建一个div元素，作为地图显示的区域。 2. 创建地图对象：`var map = new OpenLayers.Map('map_div')`，这里的'map_div'是地图容器的ID。 3. 加载TMS图层：`var tmsLayer = new OpenLayers.Layer.TMS("Your Layer Name", "TMS Service URL", {layername: 'Your Layer', type: 'png', isBaseLayer: true})`，其中'Your Layer Name'是你给图层起的名字，'TMS Service URL'是前面在`Config.js`中定义的TMS服务地址。 4. 添加图层到地图：`map.addLayer(tmsLayer)`。 5. 设置初始视图：`map.setCenter(new OpenLayers.LonLat(lon, lat), zoom)`，其中`lon`、`lat`是中心点的经度和纬度，`zoom`是初始的缩放级别。 6. 可选地，添加控制元素，如缩放滑块、导航控件等：`map.addControl(new OpenLayers.Control.Navigation())`。在自定义规则方面，OpenLayers提供了丰富的API，你可以根据需要调整切片的加载策略、缓存行为、透明度等。例如，你可以通过监听地图移动事件，动态改变加载的瓦片级别，以实现更高效的渲染。此外，如果`img`目录下包含了一些预定义的瓦片图片，你可以在TMS服务中使用它们作为默认或备用图层。这样，即使在没有网络连接或者TMS服务不可用的情况下，用户也能看到基本的地图内容。这个实例展示了如何利用OpenLayers结合TMS服务创建一个可自定义规则的地图应用。通过理解和实践这个例子，开发者可以进一步掌握OpenLayers的高级功能，定制自己的地图服务，为各种地理信息系统项目提供支持。

资源推荐

资源详情

资源评论

收起资源包目录

自定义规则切片浏览.rar （26个子文件）

Config.js 451B

OpenLayers.js 722KB

img

north-mini.png 484B

measuring-stick-off.png 3KB

marker-blue.png 992B

layer-switcher-minimize.png 249B

blank.gif 42B

marker-green.png 967B

east-mini.png 451B

zoombar.png 463B

drag-rectangle-off.png 1KB

west-mini.png 453B

marker-gold.png 831B

zoom-world-mini.png 1KB

south-mini.png 481B

panning-hand-on.png 4KB

measuring-stick-on.png 4KB

layer-switcher-maximize.png 451B

slider.png 285B

zoom-minus-mini.png 359B

zoom-plus-mini.png 489B

panning-hand-off.png 4KB

marker.png 606B

drag-rectangle-on.png 1KB

cloud-popup-relative.png 3KB

My_TMS.html 3KB

<html> <head> <title>切片浏览</title> <link rel="stylesheet" href="css/style.css" type="text/css" /> <script src="js/OpenLayers.js"></script> <script src="js/Config.js"></script> <script type="text/javascript"> var map, layer; //complex object of type OpenLayers.Map //Initialise the 'map' object function init() { var imageUrl=GetParamValue("strImageUrl",strImageUrl); map = new OpenLayers.Map("map", { maxExtent : new OpenLayers.Bounds(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892), numZoomLevels : 18, maxResolution : 156543.0339, units : 'm', projection : "EPSG:900913", displayProjection : new OpenLayers.Projection("EPSG:4326") }); layer = new OpenLayers.Layer.TMS("Name", imageUrl, { 'type' : 'png', 'getURL' : get_my_url }); map.addLayer(layer); map.addControl(new OpenLayers.Control.PanZoomBar()); var lonLat = new OpenLayers.LonLat(parseInt(strX), parseInt(strY)); lonLat.transform(map.displayProjection, map.getProjectionObject()); map.setCenter(lonLat, parseInt(strLevel)); } //自定义切片规则的切片路径获取 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(); var imgtype = "png"; var imgsrc = this.url+ "/"+z+ "/"+ Math.floor(x/16) + "/"+ Math.floor((Math.pow(2,z) - 1 - y)/ 16) + "/"+x + "_" + (Math.pow(2, z) - 1 - y); return imgsrc+ "."+imgtype; } function GetParamValue(findParam, defaultValue) { var arr0 = document.location.href.split("?"); if (arr0.length <= 1) return defaultValue; var arr; if( arr0[1].indexOf("&")==-1) { arr = arr0[1].split("%26"); } else { arr = arr0[1].split("&"); } for (var i=0; i<arr.length; i++) { if (arr[i].indexOf(findParam) == 0 && arr[i].indexOf("=") == findParam.length) { arr = arr[i].split("="); defaultValue = arr[1]; break; } } return defaultValue; } </script> </head>  <body onload="init();">  <div style="width: 100%; height: 100%" id="map"></div> </body> </html>

评论收藏

内容反馈