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. UNION 和UNION ALL

    UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每条 SELECT 语句中的列 ...

  2. uva 508 Morse Mismatches

    Samuel F. B. Morse is best known for the coding scheme that carries his name. Morse code is still us ...

  3. UVA 221 - Urban Elevations（离散化）!!!!!!

    题意:给出一张俯视图.给出N个建筑物的左下标,长度,宽度,高度.现在求,从南面看,能看到那些建筑? Sample Input 14 160 0 30 60 30 125 0 32 28 60 95 0 ...

  4. 从汇编看c++中的placement operator new

    placement operator new是重载的operator new运算符,它允许我们将对象放到一个指定的内存中.下面来看c++源码: class X { private: int _x; p ...

  5. gradle构建依赖

    本地依赖 gradle 作为构建工具,能够很方便的使用本地jar包,以下为使用的代码块. dependencies { //单文件依赖 compile files('libs/android-supp ...

  6. 菜单之一：Menu基础内容

    参考<疯狂android讲义>2.10节P168 1.重要接口 Android菜单相关的重要接口共有以下四个: 其中Menu为普通菜单,SubMenu包含子项,ContextMenu当长时 ...

  7. pymssql文档

    原文地址 http://pymssql.org/en/latest/ref/_mssql.html _mssql module reference pymssql模块类,方法和属性的完整文档. Com ...

  8. VCL线程的同步方法 Synchronize（用消息来同步）

    看本文时,可以同时参考:Delphi中线程类 TThread实现多线程编程(事件.临界区.Synchronize.WaitFor……) 先说一下RTL和VCL RTL(Run-Time library ...

  9. Json之语法，格式

    JSON 文本格式在语法上与创建 JavaScript 对象的代码相同.由于这种相似性,无需解析器,JavaScript 程序能够使用内建的 eval() 函数,用 JSON 数据来生成原生的 Jav ...

  10. UESTC_摩天轮 2015 UESTC Training for Dynamic Programming<Problem K>

    K - 摩天轮 Time Limit: 10000/4000MS (Java/Others)     Memory Limit: 262143/262143KB (Java/Others) Submi ...