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. Ext的labelWidth默认会给100

    Ext的textfield控件的labelWidth属性,如果没有设置这个属性,那么默认会给100,导致左侧有100px的留白

  2. 简化工作——我的bat文件

    重启adb(radb.bat): @echo off call adb kill-server call adb start-server call adb remount push 一个apk(pu ...

  3. 7、Khala设备资源的申请和释放

    在实际业务中,我们每次登录后,可能需要在服务端维护一些设备相关的资源信息,而不同设备所需维护的资源信息又不尽相同.Khala提供了设备资源的维护储存功能,在此我们通过一个具体的业务中对其进行展示. 一 ...

  4. codeforces 336C Vasily the Bear and Sequence(贪心)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Vasily the Bear and Sequence Vasily the b ...

  5. 远程复制 scp命令

    定义 本机为A,用户名为usera,登录远程主机B的为userb,IP为remote_ip 1. 从B 拷贝文件到A机器  用下面的命令 scp userb@remote_ip:remote_path ...

  6. numpy库：常用基本

    numpy 本文主要列出numpy模块常用方法 大部分内容来源于网络,而后经过自己的一点思考和总结,如果有侵权,请联系我 我是一名初学者,有哪些地方有错误请留言,我会及时更改的 创建矩阵(采用ndar ...

  7. Django学习(六) 模板

    下面是一个新闻的模板:mysite/news/templates/news/year_archive.html mysite/news/templates/news/year_archive.html ...

  8. Cleaning Shifts（POJ 2376 贪心）

    Cleaning Shifts Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 15143   Accepted: 3875 ...

  9. Qt wrappers for OS X Cocoa widgets

    Qt wrappers for OS X Cocoa widgetshttps://github.com/MikeMcQuaid/Qocoa

  10. javascript之Error

    一.Error()构造函数 构造函数:new Error(); new Error(message); 二.Error.message //人类可读的错误消息 语法:error.message; 三. ...