Openlayer 调用天地图瓦片服务

最新推荐文章于 2025-04-21 14:24:57 发布

chongjiaofeng1616

最新推荐文章于 2025-04-21 14:24:57 发布

阅读量368

点赞数

文章标签： php

原文链接：https://my.oschina.net/LinBandit/blog/84862

版权

本文介绍了一种自定义实现OpenLayers中的TiandituLayer的方法，通过继承OpenLayers.Layer.Grid并调整参数，实现了从天地图获取不同层级的地图瓦片。文中详细展示了关键代码及如何在项目中引入并使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文关键代码引用自以下博客：

http://www.3sren.com/bbs/home.php?mod=space&uid=189&do=blog&id=5026

我在此基础上根据实际应用加以定制：

OpenLayers.Layer.TiandituLayer = OpenLayers.Class(OpenLayers.Layer.Grid, {

    mapType: null,
    mirrorUrls: null,
    topLevel: null,
    bottomLevel: null,

    topLevelIndex: 0,
    bottomLevelIndex: 20,
    topTileFromX: -180,
    topTileFromY: 90,
    topTileToX: 180,
    topTileToY: -270,

    isBaseLayer: true,

    initialize: function (name,options) {

        options.topLevel = options.topLevel ? options.topLevel : this.topLevelIndex;
        options.bottomLevel = options.bottomLevel ? options.bottomLevel : this.bottomLevelIndex;
        options.maxResolution = this.getResolutionForLevel(options.topLevel);
        options.minResolution = this.getResolutionForLevel(options.bottomLevel);

        var newArguments = [name, {}, {}, options];
        OpenLayers.Layer.Grid.prototype.initialize.apply(this, newArguments);
    },

    clone: function (obj) {

        if (obj == null) {
            obj = new OpenLayers.Layer.TDTLayer(this.name, this.url, this.options);
        }

        obj = OpenLayers.Layer.Grid.prototype.clone.apply(this, [obj]);

        return obj;
    },

    getURL: function (bounds) {
        var level = this.getLevelForResolution(this.map.getResolution()); 
        var coef = 360 / Math.pow(2, level); 
        var x_num = this.topTileFromX < this.topTileToX ? Math.round((bounds.left - this.topTileFromX) / coef) : Math.round((this.topTileFromX - bounds.right) / coef);
        var y_num = this.topTileFromY < this.topTileToY ? Math.round((bounds.bottom - this.topTileFromY) / coef) : Math.round((this.topTileFromY - bounds.top) / coef);
		
		switch(level){
			case 8:
				url="http://tile6.tianditu.com/DataServer?T=tdt_vip_img_2_10_120627";
				break
			case 9:
				url="http://tile5.tianditu.com/DataServer?T=tdt_vip_img_2_10_120627";
				break
			case 10:
				url="http://tile5.tianditu.com/DataServer?T=tdt_vip_img_2_10_120627";
				break
			case 11:
				url:"http://tile1.tianditu.com/DataServer?T=E11N";
				break
			case 12:
				url="http://tile6.tianditu.com/DataServer?T=E12N";
				break
			case 13:
				url="http://tile3.tianditu.com/DataServer?T=E13N";
				break
			case 14:
				url="http://tile2.tianditu.com/DataServer?T=E14N";
				break
			case 15:
				url="http://tile5.tianditu.com/DataServer?T=tdt_vip_img_120627_dyd"
				break
			case 16:
				url="http://tile2.tianditu.com/DataServer?T=tdt_vip_img_120627_dyd";
				break
			case 17:
				url="http://tile1.tianditu.com/DataServer?T=tdt_vip_img_120627_dyd";
				break
			case 18:
				url="http://tile0.tianditu.com/DataServer?T=tdt_vip_img_120627_dyd";
				break
		}

        return this.getFullRequestString({ T: null, X: x_num, Y: y_num, L: level }, url);
    },
    selectUrl: function (a, b) { return b[a % b.length] },
    getLevelForResolution: function (res) {
        var ratio = this.getMaxResolution() / res;
        if (ratio < 1) return 0;
        for (var level = 0; ratio / 2 >= 1; )
        { level++; ratio /= 2; }
        return level;
    },
    getResolutionForLevel: function (level) {
        return 360 / 256 / Math.pow(2, level);
    },
    getMaxResolution: function () {
        return this.getResolutionForLevel(this.topLevelIndex)
    },
    getMinResolution: function () {
        return this.getResolutionForLevel(this.bottomLevelIndex)
    },
    addTile: function (bounds, position) {
        var url = this.getURL(bounds);
        return new OpenLayers.Tile.Image(this, position, bounds, url, this.tileSize);
    },

    CLASS_NAME: "OpenLayers.Layer.TiandituLayer"
});

使用非常简单，首先要引用这个js文件，然后：

var map=new OpenLayers.Map("mapDiv");
var tianditu=new OpenLayers.Layer.TiandituLayer(
		"tianditu",
		{
		    topLevel:8,
		    bottomLevel:18
		}
	);
map.addLayers([tianditu]);

完成，不过，如果天地图的服务有变动的话，还需要根据实际改动

转载于:https://my.oschina.net/LinBandit/blog/84862