OpenLayers加载QQ地图

http://www.openlayers.cn/portal.php?mod=view&aid=4

2012-10-21 17:22| 发布者: admin| 查看: 16890| 评论: 24|原作者: admin|来自: 本站

摘要: OpenLayers加载QQ地图，QQ卫星图
 
经过一段时间的准备，OpenLayers中文官方站终于和大家见面了。
本站本着分享学习的原则， 为初学者提供交流学习的平台。
同时也希望高手们不吝惜自己的智慧，与大家共同分享自己的经验和代码等
好吧 开始正题。     数据对于GIS来说，是至关重要的，所以首页我们要解决数据的问题
google地图一直在中国不是很稳定，所以要充分利用本土资源了。
加载地图是在不修改源码为原则， 一共分为QQ地图，世纪高通地图，阿里云地图，51地图，搜狗地图，百度地图
 
下面是第一个  加载QQ地图
大家都知道 QQ地图是属于高德系地图，和google有着同样的偏移量，所以是可以完全重合的，Web墨卡托投影
 
1. 我们在lib\OpenLayers\Layer目录下面新建一共QQMap.js
我们的目的是取得瓦片数据的url，所以只要找到QQ地图的瓦片url就可以了
新建一共OpenLayers.Layer.QQMap类继承自OpenLayers.Layer.TileCache  ，重新定义getURL方法
 
具体代码如下

[代码]js代码：

01 /**
02  * 对自定义规则切割的图片进行拼装的类
03  */
04 OpenLayers.Layer.QQMap = OpenLayers.Class(OpenLayers.Layer.TileCache, {
05     sateTiles:false,
06     initialize: function (name, url, options) {
07         var tempoptions = OpenLayers.Util.extend({
08             'format': 'image/png',
09             isBaseLayer: true
10         }, options);
11         OpenLayers.Layer.TileCache.prototype.initialize.apply(this, [name, url, {},
12         tempoptions]);
13         this.extension = this.format.split('/')[1].toLowerCase();
14         this.extension = (this.extension == 'jpg') ? 'jpeg' : this.extension;
15         this.transitionEffect = "resize";
16         this.buffer = 0;
17     },
18     /**
19      * 按地图引擎切图规则实现的拼接方式
20      */
21     getURL: function (bounds) {
22         var res = this.map.getResolution();
23         var bbox = this.map.getMaxExtent();
24         var size = this.tileSize;
25         var tileZ = this.map.zoom;
26         //计算列号
27         var tileX = Math.round((bounds.left - bbox.left) / (res * size.w));
28         //计算行号
29         var tileY = Math.round((bbox.top - bounds.top) / (res * size.h));
30         var  scope =new Array(0, 0, 0, 0, 0, 3, 0, 3, 0, 3, 0, 3, 0, 7, 0, 7, 0, 15, 0, 15, 0, 31, 0, 31, 0, 63, 4, 59, 0, 127, 12, 115, 0, 225, 28, 227, 356, 455, 150, 259, 720, 899, 320, 469, 1440, 1799, 650, 929, 2880, 3589, 1200, 2069, 5760, 7179, 2550, 3709, 11520, 14349, 5100, 7999, 23060, 28689, 10710, 15429, 46120, 57369, 20290, 29849, 89990, 124729, 41430, 60689, 184228, 229827, 84169, 128886);
31         var  f=tileZ*4;
32         var i = scope[f++];
33          var j = scope[f++];
34          var l = scope[f++];
35          var scope = scope[f];
36          var imgformat=this.sateTiles ? ".jpg" : ".png"
37           if (tileX >= i && tileX <= j && tileY >= l && tileY <= scope) {
38                     tileY = Math.pow(2, tileZ) - 1 - tileY;
39                     var tileNo =  tileZ + "/" + Math.floor(tileX / 16) + "/" +  Math.floor(tileY / 16)+ "/" + tileX + "_" + tileY + imgformat;
40           }
41  
42         var Surl=this.url;
43         if (OpenLayers.Util.isArray(Surl))
44             Surl = this.selectUrl(tileNo, Surl);
45         return Surl+tileNo;
46     },
47  
48     clone: function (obj) {
49         if (obj == null) {
50             obj = new OpenLayers.Layer.QQMap(this.name, this.url, this.options);
51         }
52         obj = OpenLayers.Layer.TileCache.prototype.clone.apply(this, [obj]);
53         return obj;
54     },
55     CLASS_NAME: "OpenLayers.Layer.QQMap"
56 });

2.  在lib文件夹下的OpenLayers.js 中加载js文件的函数中添加

"OpenLayers/Layer/QQMap.js"      注意最后一个是没有“，”的
 
3.  在地图中加载QQ图层

[代码]js代码：

1 var qq=new OpenLayers.Layer.QQMap("QQ地图",
2 [http://p0.map.soso.com/maptilesv2/,
3 http://p1.map.soso.com/maptilesv2/,
4 http://p2.map.soso.com/maptilesv2/,
5 "http://p3.map.soso.com/maptilesv2/"],
6 {sateTiles: false}
7     );

{sateTiles: false}  就是判断是否加载的卫星图

[代码]js代码：

01 var qqsatellite=new OpenLayers.Layer.QQMap("QQ卫星图",
02     [http://p0.map.soso.com/sateTiles/,
03     http://p1.map.soso.com/sateTiles/,
04     http://p2.map.soso.com/sateTiles/,
05     "http://p3.map.soso.com/sateTiles/"],
06                 {sateTiles: true}
07                 );
08 var qqsatellitetran=new OpenLayers.Layer.QQMap("QQ卫星图标注",
09 [http://p0.map.soso.com/sateTranTiles/,
10 http://p1.map.soso.com/sateTranTiles/,
11 http://p2.map.soso.com/sateTranTiles/,
12 "http://p3.map.soso.com/sateTranTiles/"],
13                 {isBaseLayer: false}
14                 );

本程序仅是测试所用，如想商用请联系相关单位。本站不对版权负责。。。

 
 
 
 
 
 
 
 
发表评论

最新评论

引用 wangkongwei 2015-10-28 10:26
楼主，我用你这种方法怎么加载不出来地图，麻烦发一个程序给我，最近一直在研究openlayers，谢谢！ 592057393@qq.com
引用 whyyiyi 2015-9-11 10:14
这个很不错，有时间好好研究一下。
引用 OMG.ONES 2015-8-19 15:34
楼主，麻烦发一个程序给我，最近一直在研究openlayers，如果可以一起发个百度的就更好了，先谢过！ 815579238@qq.com
引用 wutao 2014-12-14 11:43
上面的代码都放在QQMap.js里面吗    发个完整的教程哈   谢谢楼主！！
引用 w156445045 2014-7-23 12:35
有没有怎么调用百度地图的。
引用 iNiL0119 2014-7-16 15:26
function init() {
                var map = new OpenLayers.Map("myMap");
                var qq = new OpenLayers.Layer.QQMap("QQ地图",
                    ["http://p0.map.soso.com/maptilesv2/",
                    "http://p1.map.soso.com/maptilesv2/",
                    "http://p2.map.soso.com/maptilesv2/",
                    "http://p3.map.soso.com/maptilesv2/"],
                    { sateTiles: false }
                );
                map.addLayer(qq);
                map.zoomToMaxExtent();
            }
???为啥不能显示
引用 摩羯女孩20 2014-5-30 18:35
都太厉害了
引用 摩羯女孩20 2014-5-29 10:27
都太厉害了
引用 viola 2014-5-28 14:37
厉害，来学习
引用 LINK_JACK 2014-4-30 17:15
楼主，麻烦发一个程序给我，最近一直在研究openlayers，谢谢！ DYLEE2013@126.COM
引用 xxisxx1 2014-4-25 11:08
显示出来的和你的不一样
引用 nbwgl 2013-2-20 15:21
qq地图使用这个js，好像偏移很严重啊
引用 jacksonlai 2012-12-27 13:38
学习学习
引用 lc25329234 2012-12-25 11:04
为什么,已知一个坐标点(例如109.04720,21.44819) 我创建一个点显示在图上 但是位置不对呢
引用 admin 2012-12-18 11:28

wyl20032005: 这么多地图，请问哪些地图是免费的呢？中国的免费地图有没有？如果要收费，是怎么收取费用的啊？

这个你去联系地图提供商

引用 admin 2012-12-18 11:27

china_xn: QQ地图是空白的，其余两个都有图

QQ第零级没有瓦片，设置第一级 或者map.zoomToMaxExtent();

引用 admin 2012-12-18 10:53
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
                                     20037508.34, 20037508.34)
20037508.34改成20037508
引用 xuhaiyan8825 2012-12-17 23:56
var options = {
                controls : [
                    new OpenLayers.Control.Navigation(),
                                                        new OpenLayers.Control.KeyboardDefaults(),
                                                        new OpenLayers.Control.Scale(),
                                                        new OpenLayers.Control.MousePosition({
                                                                formatOutput:_this.MousePositionFormatOutput
                                                        }),
                                                        new OpenLayers.Control.LayerSwitcher(),
                                                        new OpenLayers.Control.PanZoomBar()],
    projection: new OpenLayers.Projection("EPSG:900913"),
    displayProjection : new OpenLayers.Projection("EPSG:4326"),
    units: "m",
    numZoomLevels:19,
    maxResolution: 156543.0339,
    maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
                                     20037508.34, 20037508.34)
};

map = new OpenLayers.Map('map', options);
                var qqmap = new OpenLayers.Layer.QQMap('qqmap',
                                                                ["http://p0.map.soso.com/maptilesv2/",
                                                                "http://p1.map.soso.com/maptilesv2/",
                                                                "http://p2.map.soso.com/maptilesv2/",
                                                                "http://p ...

引用 wyl20032005 2012-12-5 16:29
这么多地图，请问哪些地图是免费的呢？中国的免费地图有没有？如果要收费，是怎么收取费用的啊？
引用 working-rou 2012-11-22 00:23
加油，为啥我看不到 加载那个 百度地图？

OpenLayers加载QQ地图(转)的更多相关文章

  1. OpenLayers加载高德地图离线瓦片地图

    本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer加载谷歌地球离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/openla ...

  2. openlayers加载百度地图

    最近在做openlayers添加百度地图的扩展类,经过轮番的尝试,终于将其接入了,但是发现偏差比较大,有根据百度的坐标进行了比对,将切片原点进行了调整,发现OK了.打开百度地图,可以看出切片的路径如: ...

  3. Arcgis api For silverlight 加载QQ地图

    原文 http://www.cnblogs.com/thinkaspx/archive/2012/11/07/2759079.html //本篇博客仅在技术上探讨可行性   //如果要使用Q 地图,请 ...

  4. openLayers加载高德地图

    之前用openlayers对高德,百度,腾讯,bing,supermap,天地图,arcgis,google等地图进行了对接,今天简单介绍一下openlayers+高德: 在Openlayers.La ...

  5. OpenLayers加载谷歌地图服务

    谷歌地图的地址如下: 谷歌交通地图地址:http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i3800725 ...

  6. WebGIS开发之用openlayers加载离线百度地图

    因为项目需要,只有内网环境,没有外网环境,所以需要下载地图瓦片. 一.下载瓦片地图 这个可以自行在网上找一些地图瓦片下载器,下好的瓦片地图是分级的.大概如图这种类型. 二.在地图上显示标记 首先使用o ...

  7. OpenLayers加载百度离线瓦片地图（完美无偏移）

    本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer完美无偏移加载百度离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/ope ...

  8. （转）Openlayers 2.X加载高德地图

    http://blog.csdn.net/gisshixisheng/article/details/44853881 概述: 前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍O ...

  9. openlayers 加载瓦片详解 一

    在这先说点题外话,本人在研究webgl 三维球过程中惊人发现,openlayers 的开发人员也在研究webgl并经证实他们也正在研发基于 webgl的三维gis开源平台,这可能是首个开源的三维平台, ...

随机推荐

  1. AJAX 控件集之TextBoxWatermark(水印文本框)控件

    功能:       可以让TextBox控件初始化的时候拥有水印文字.属性:    TargetControlID :要使用具有水印效果的TextBox控件ID.    WatermarkCssCla ...

  2. alarm函数可以定时

    貌似是可以的,不过感觉好像这样用不是很好,最好还是用回timer_settimer一些列函数吧,不过既然开了头,就看下alarm怎么用吧. 1. 所需头文件  #include<unistd.h ...

  3. Python3.5入门学习记录-条件控制

    Python的条件控制同C#一样,都是通过一条或多条语句的执行结果(True OR False)来决定执行的代码块. if 语句 Python中if语句的一般形式如下所示: if condition_ ...

  4. C++学习笔录4

    1.容器=数据结构+算法.相当于是为复杂的数据设计一种专门用于存放该数据的东西.用于开发中传递复杂的数据. 2.模版函数只能写在头文件中.不能单独做声明. 3.STL容器类分为三类: (1).顺序容器 ...

  5. SQL语句 计算某段时间工作日的天数（除了周六日）

    --只是加了固定日期,可以根据需求给成变量形式(BY 少年工藤) -思路:根据日期区间循环判断每一天是周日(1).周六(7)不变,其他加1 1 DECLARE @DAY DATE,@COUNT INT ...

  6. Pie（hdu 1969 二分查找）

    Pie Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submiss ...

  7. mysql trigger 权限的说明

    普通用户在创建trigger时会遇到的问题: 1.如果开启了二进制日志,但是用户没有supper 权限:那么他在创建trigger 时会提示设置log_bin_trust_function_creat ...

  8. jdbc 通过rs.getString()获取数据库中的时间字段问题

    例如在mysql中的一张表中存在一个字段opr_time为datetime类型, 在JDBC 中通过rs.getString("opr_time");来获取使会在日期后面添加&qu ...

  9. UVA_Digit Puzzle UVA 12107

    If you hide some digits in an integer equation, you create a digit puzzle. The figure below shows tw ...

  10. iOS 之点击按钮改变状态的图片

    .h  文件中 @property (strong, nonatomic) IBOutletUIButton *publishBtton; @property (strong, nonatomic) ...