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. VS 2003 无法打开Web项目，位于服务器“http:10.45.4.70:8080”上的项目不存在

    解决方法: 用记事本打开*.sln文件更改第2行 改成正确的虚拟目录 出现这种情况往往是从一台机器搬到另一台机器造成的虚拟路径名字不同

  2. 从C# String类理解Unicode（UTF8/UTF16)

    上一篇博客:从字节理解Unicode(UTF8/UTF16).这次我将从C# code 中再一次阐述上篇博客的内容. C# 代码看UTF8 代码如下: string test = "UTF- ...

  3. hdu1219

    Problem Description Ignatius is doing his homework now. The teacher gives him some articles and asks ...

  4. CDZSC_2015寒假新人（2）——数学 C

    C - C Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status ...

  5. Lenovo Y430P安装Linux无线网卡

    新买了一台Lenovo Y430P的笔记本,笔记本自带的无线网卡型号是BCM43142.安装了CentOS6.5的操作系统后,按照网上搜索到的网址http://zh-cn.broadcom.com/s ...

  6. [置顶] 【C/C++学习】之十三、虚函数剖析

    所谓虚函数,虚就虚在“推迟联编”或者“动态联编”上,一个类函数的调用并不是在编译时刻被确定的,而是在运行时刻被确定的.由于编写代码的时候并不能确定被调用的是基类的函数还是哪个派生类的函数,所以被称为“ ...

  7. 【3】python核心编程 第六章-序列：字符串、列表和元组

    1.序列类型操作符 序列操作符 作用 seq[ind] 获得下标为ind 的元素 seq[ind1:ind2] 获得下标从ind1 到ind2 间的元素集合 seq * expr 序列重复expr 次 ...

  8. HDU 题目分类收集

    并查集题型简单并查集1213 How Many Tables 1232 畅通工程 (杭电简单的并查集不是很多) 简单最小生成树1233 还是畅通工程 1863 畅通工程 1874 畅通工程再续 187 ...

  9. [C入门 - 游戏编程系列] 贪吃蛇篇(一) - 世界定义

    每个游戏都有一个很明确的目的或者说游戏主题,贪吃蛇的目的很明确:蛇找到并吃掉食物.只有目的是很无聊的,算不上一个好游戏.所以设计者增加了创意:1. 吃掉食物后蛇会增长:2. 吃掉食物后分数会增加.有些 ...

  10. ASP.NET MVC 4.0 学习5-ActionResult

    一,Controller簡介 Controller擔任了資料傳遞的角色,負責流程控制,決定存取哪個Model以及決定顯示哪個View頁面,即ASP.NET MVC中有關於『傳遞』的任務皆由Contro ...