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代码:

view source print?
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代码:

view source print?
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代码:

view source print?
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                 );

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

20


鲜花

2


握手


雷人

路过

鸡蛋

刚表态过的朋友 (22 人)

  • wangkongwei

  • caochong

  • lzg515

  • gaojiandong

  • comamao

  • cleam

  • chenjingchun

  • caomei

  • Angel_11

  • lll222yyy

  • Letgaoyingo

  • wushuang

  • govawu

  • cgg5207

  • fml_2009

  • chenleijiangjun

  • jacksonlai

  • tianya84

  • 白宇

  • working-rou

  • ptma

  • china_xn

收藏 分享

发表评论

最新评论

引用 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
加油,为啥我看不到 加载那个 百度地图?

转载于:https://www.cnblogs.com/yasepix/p/5147329.html

OpenLayers加载QQ地图(转)相关推荐

  1. vue openlayers 加载高德地图等 gcj02 的图层偏移问题

    vue openlayers 加载高德地图等 gcj02 的图层偏移问题 这个问题是在使用 openlayers 地图引擎加载高德地图或者是谷歌地图都会遇到的问题,所以说呢这篇博文稍微说一下解决办法. ...

  2. openlayers加载离线地图并实现深色地图

    问题背景       我们自己一直使用的openlayer+geoserver自己发布的地图,使用的是矢量地图.但是由于政府地图大都使用为天地图,所以需要将geoserver的矢量地图更改为天地图,并 ...

  3. openlayers加载bing地图

    openlayers加载bing地图 注:需要bingmap网站提供的许可key,注册微软账号就有了,https://www.bingmapsportal.com/Application# 查看文章

  4. openlayers加载百度地图作为底图坐标偏移的解决办法

    openlayers加载天地图作为底图,在网上找了公开的服务资源,要做到百度地图与天地图之间切换,同样也从网上找到百度地图的服务资源但是在地图上坐标总是有偏差,最初的代码是这样的: var proje ...

  5. 005:vue+openlayers加载Mapbox地图示例

    第005个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+openlayers中加载Mapbox地图. 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果 ...

  6. Openlayers加载离线地图Arcgis瓦片

    文章目录 一.介绍 二.快速入门 一.下载地图瓦片 二.OpenLayers加载离线Arcgis瓦片 一.介绍 OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类 ...

  7. openlayers加载谷歌地图(在线demo)

    最近发现可以直接访问谷歌地图了(不用梯子,不用翻墙,直接访问谷歌地图,关键是使用了gac-geo.googlecnapps.cn ),用openlayers随手写了一个,方便自己使用,感兴趣的可以访问 ...

  8. OpenLayers加载搜狗地图

    从目前国内的地图服务商提供的地图来看,地图瓦片切图规则只少分为三种.其中Google Map.Bing地图.MapABC.QQ地图是一类,而百度地图.搜狗地图是使用的另一类,他们是在GCJ02 基础上 ...

  9. 使用openlayers加载离线地图

    什么是Openlayers? 简单来说,Openlayers是一个基于Javacript开发,免费.开源的前端地图开发库,使用它,可以很容易的开发出WebGIS系统.目前Openlayers支持地图瓦 ...

最新文章

  1. Hive1.2.1安装
  2. 【干货书】深度学习合成数据
  3. 机器人“快递小哥”上岗了!京东配送机器人编队长沙亮相
  4. 详解MySQL查询缓存
  5. c语言recv函数返回值,谈谈recv()函数的返回值
  6. wxWidgets:wxColourPickerEvent类用法
  7. Django 基础,创建一个Django,并成功在网页中运行
  8. [渝粤教育] 西南科技大学 企业生产运作管理 在线考试复习资料2021版
  9. 操作系统学习思维导图——2处理器管理
  10. k8s Storage Classes
  11. (最完美)MIUI12系统的Usb调试模式在哪里开启的步骤
  12. Js、Jquery对goTop功能的实现
  13. python语言工具_可爱的 Python
  14. 汽车门把手的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
  15. nova-compute
  16. VUE项目(仿商城)
  17. pandas读取excel数据并对重复数据进行标记或者删除
  18. 用JS做10以内的加法(带按钮)
  19. 7z SFX Constructor 4.4中文版(文件自解压生成器)简介
  20. jenkins 构建提示 can‘t open file xxxx [Errno 2] No such file or directory

热门文章

  1. 实现不完全规划的方法
  2. 人工智能数学基础5:数列的单调有界定理
  3. [Lpp]Python中数据类型
  4. 必备绝技——Hook大法(上)
  5. 这世上最大的误解是你以为李白只是一个诗人
  6. [非典型游记]春风十里扬州路
  7. 1.1JAVA概述以及JDK的安装
  8. vivo领跑中国智能手机市场
  9. 鲁大师html5测试网站,鲁大师测网速(鲁大师网速测试在哪里)
  10. mariadb进入mysql命令_mariadb数据库常用命令