WMS 是OGC制定的標準 WEB GIS 協議，現在眾多的圖形提供商都提供了自己的WEB圖形服務，例如：ArcIMS、GoogleMaps、KaMap等等、要使用這些服務并制作自己的WEB客戶端，使用 OpenLayers 是很方便的事情，其中 WMS 是比較通用的協議，尤其適合服務器端矢量圖形的生成，但是在我們自己的項目中發現由于WMS每次發送給服務器的都是幾何坐標的格式化字符串來表達視野，這導致服務器端在提供瓦片時無法很好的進行高效的服務，幾乎總是需要對瓦片進行拼接和剪裁，通過分析 GOOGLE 和 TMS 協議，發現很多服務都不采用幾何坐標的字符串來表達視野，而是直接提供瓦片的行列號，這樣服務器端甚至可以直接使用一個簡單的HTTP服務器就可以了，基于以上考慮決定擴展OpenLayers來提供一個自己的瓦片服務的客戶端；

原理很簡單，就是在構造 WMS請求的URL時，采用自己的方式進行構造，代碼如下：

?

1 /**
2 * Class: ShineEnergy.Layer.TileImage
3 *
4 * Inherits from:
5 * - <OpenLayers.Layer.WMS>
6 */
7 ShineEnergy.Layer.TileImage = OpenLayers.Class(OpenLayers.Layer.WMS, {
8
9 /**
10 * Constructor: ShineEnergy.Layer.TileImage
11 *
12 * Parameters:
13 * name - {String} A name for the layer
14 * url - {String} Base url for the TileImage
15 * params - {Object} An object with key/value pairs representing the
16 * GetMap query string parameters and parameter values.
17 * options - {Object} Hashtable of extra options to tag onto the layer
18 */
19 initialize: function(name, url, params, options) {
20 OpenLayers.Layer.WMS.prototype.initialize.apply(this, arguments);
21 },
22
23 /**
24 * APIMethod:destroy
25 */
26 destroy: function() {
27 // for now, nothing special to do here.
28 ? OpenLayers.Layer.WMS.prototype.destroy.apply(this, arguments);
29 },
30
31 /**
32 * APIMethod: clone
33 *
34 * Parameters:
35 * obj - {Object}
36 *
37 * Returns:
38 * {<ShineEnergy.Layer.TileImage>} An exact clone of this <ShineEnergy.Layer.TileImage>
39 */
40 clone: function (obj) {
41
42 if (obj == null) {
43 obj = new ShineEnergy.Layer.TileImage(this.name,
44 this.url,
45 this.options);
46 }
47
48 //get all additions from superclasses
49 ? obj = OpenLayers.Layer.WMS.prototype.clone.apply(this, [obj]);
50
51 // copy/set any non-init, non-simple values here
52 ?
53 return obj;
54 },
55
56 /**
57 * Method: getURL
58 *
59 * Parameters:
60 * bounds - {<OpenLayers.Bounds>}
61 *
62 * Returns:
63 * {String} A string with the layer's url and parameters and also the
64 * passed-in bounds and appropriate tile size specified as
65 * parameters
66 */
67 getURL: function (bounds) {
68 bounds = this.adjustBounds(bounds);
69 var res = this.map.getResolution();
70 var tileOriginY = this.options.maxExtent.top;
71 var tileOriginX = this.options.maxExtent.left;
72 var x = Math.round((bounds.left - tileOriginX) / (res * this.tileSize.w));
73 var y = Math.round((tileOriginY - bounds.bottom) / (res * this.tileSize.h));
74 var z = this.map.getZoom();
75 var path = "?LAYER=" + this.params.LAYERS + "&X=" + x + "&Y=" + y + "&Z=" + z + "&S=Map";
76 var url = this.url;
77 if (url instanceof Array) {
78 url = this.selectUrl(path, url);
79 }
80 return url + path;
81 },
82
83 CLASS_NAME: "ShineEnergy.Layer.TileImage"
84 });
85 ?

?經過如上簡單的進行擴展，就可以使用實現自定義的 WEB GIS 協議，服務器端只需要根據 LAYER/X/Y/Z參數可以確定唯一的一張瓦片圖片，返回給客戶端就可以了，同時也方便服務器端采用緩存優化處理；

在上面的例子中還有一個參數“S”，這個參數是備用參數，你也可以當做是一個展示如何增加自定義參數的例子來修改，例如增加控制客戶端的緩存行為的功能就可以根據時間產生不同的參數來實現；

最后補充一點，WMS協議在根據視野填充瓦片的時候，是根據左下角的地理坐標開始進行填充的，而ARCGIS等工具則是根據左上角進行行列號進行編排的，所以要想能夠和其他的圖層完全配準，那么必須根據DPI和比例尺計算出一個確定的視野高度，這個高度要求能夠正好在最大的視野情況下正好有整數個瓦片進行平鋪；

轉載于:https://www.cnblogs.com/WonKerr/archive/2010/01/22/OpenLayers_Layer_TileImage.html

總結

以上是生活随笔為你收集整理的扩展 OpenLayers.Layer.WMS 为自定义的瓦片浏览服务的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。