arcgis api for javascipt 加载天地图、百度地图
写在前面的话:
1.百度地图是自己定义的坐标系统,wkid=102100.百度地图数据是加密的产物。下文将附上百度坐标与WGS84,谷歌等坐标系统转换方法(地理-地理),此方法并未亲测,据说准
2.百度地图可以直接加载经纬度坐标
3.百度地图如果加载的arcgis api中会出现坐标偏移,1.中已经解决了地理坐标转换,那么找到百度投影-地理坐标的转换方式,则arcgis就可以直接无偏加载了,网上很多方法,但是亲测不行。
4.天地图不是涉密数据,根据本文提供的类库,arcgis api for js可以直接加载。但是数据有略微的偏移
天地图的切片地图可以通过esri.layers.TiledMapServiceLayer来加载,在此将之进行了一定的封装,如下:
1、切片线划图——TDTLayer.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
define([ "dojo/_base/declare" , "esri/layers/tiled" ], function (declare) { return declare(esri.layers.TiledMapServiceLayer, { constructor: function () { this .spatialReference = new esri.SpatialReference({ wkid: 4326 }); this .initialExtent = ( this .fullExtent = new esri.geometry.Extent(- 180.0 , - 90.0 , 180.0 , 90.0 , this .spatialReference)); this .tileInfo = new esri.layers.TileInfo({ "rows" : 256 , "cols" : 256 , "compressionQuality" : 0 , "origin" : { "x" : - 180 , "y" : 90 }, "spatialReference" : { "wkid" : 4326 }, "lods" : [ { "level" : 2 , "resolution" : 0.3515625 , "scale" : 147748796.52937502 }, { "level" : 3 , "resolution" : 0.17578125 , "scale" : 73874398.264687508 }, { "level" : 4 , "resolution" : 0.087890625 , "scale" : 36937199.132343754 }, { "level" : 5 , "resolution" : 0.0439453125 , "scale" : 18468599.566171877 }, { "level" : 6 , "resolution" : 0.02197265625 , "scale" : 9234299.7830859385 }, { "level" : 7 , "resolution" : 0.010986328125 , "scale" : 4617149.8915429693 }, { "level" : 8 , "resolution" : 0.0054931640625 , "scale" : 2308574.9457714846 }, { "level" : 9 , "resolution" : 0.00274658203125 , "scale" : 1154287.4728857423 }, { "level" : 10 , "resolution" : 0.001373291015625 , "scale" : 577143.73644287116 }, { "level" : 11 , "resolution" : 0.0006866455078125 , "scale" : 288571.86822143558 }, { "level" : 12 , "resolution" : 0.00034332275390625 , "scale" : 144285.93411071779 }, { "level" : 13 , "resolution" : 0.000171661376953125 , "scale" : 72142.967055358895 }, { "level" : 14 , "resolution" : 8 .58306884765625e- 005 , "scale" : 36071.483527679447 }, { "level" : 15 , "resolution" : 4 .291534423828125e- 005 , "scale" : 18035.741763839724 }, { "level" : 16 , "resolution" : 2 .1457672119140625e- 005 , "scale" : 9017.8708819198619 }, { "level" : 17 , "resolution" : 1 .0728836059570313e- 005 , "scale" : 4508.9354409599309 }, { "level" : 18 , "resolution" : 5 .3644180297851563e- 006 , "scale" : 2254.4677204799655 } ] }); this .loaded = true ; this .onLoad( this ); }, getTileUrl: function (level, row, col) { return "http://t" + col % 8 + ".tianditu.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles" ; } }); }); |
2、切片标注——TDTAnnoLayer.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
define([ "dojo/_base/declare" , "esri/layers/tiled" ], function (declare) { return declare(esri.layers.TiledMapServiceLayer, { constructor: function () { this .spatialReference = new esri.SpatialReference({ wkid: 4326 }); this .initialExtent = ( this .fullExtent = new esri.geometry.Extent(- 180.0 , - 90.0 , 180.0 , 90.0 , this .spatialReference)); this .tileInfo = new esri.layers.TileInfo({ "rows" : 256 , "cols" : 256 , "compressionQuality" : 0 , "origin" : { "x" : - 180 , "y" : 90 }, "spatialReference" : { "wkid" : 4326 }, "lods" : [ { "level" : 2 , "resolution" : 0.3515625 , "scale" : 147748796.52937502 }, { "level" : 3 , "resolution" : 0.17578125 , "scale" : 73874398.264687508 }, { "level" : 4 , "resolution" : 0.087890625 , "scale" : 36937199.132343754 }, { "level" : 5 , "resolution" : 0.0439453125 , "scale" : 18468599.566171877 }, { "level" : 6 , "resolution" : 0.02197265625 , "scale" : 9234299.7830859385 }, { "level" : 7 , "resolution" : 0.010986328125 , "scale" : 4617149.8915429693 }, { "level" : 8 , "resolution" : 0.0054931640625 , "scale" : 2308574.9457714846 }, { "level" : 9 , "resolution" : 0.00274658203125 , "scale" : 1154287.4728857423 }, { "level" : 10 , "resolution" : 0.001373291015625 , "scale" : 577143.73644287116 }, { "level" : 11 , "resolution" : 0.0006866455078125 , "scale" : 288571.86822143558 }, { "level" : 12 , "resolution" : 0.00034332275390625 , "scale" : 144285.93411071779 }, { "level" : 13 , "resolution" : 0.000171661376953125 , "scale" : 72142.967055358895 }, { "level" : 14 , "resolution" : 8 .58306884765625e- 005 , "scale" : 36071.483527679447 }, { "level" : 15 , "resolution" : 4 .291534423828125e- 005 , "scale" : 18035.741763839724 }, { "level" : 16 , "resolution" : 2 .1457672119140625e- 005 , "scale" : 9017.8708819198619 }, { "level" : 17 , "resolution" : 1 .0728836059570313e- 005 , "scale" : 4508.9354409599309 }, { "level" : 18 , "resolution" : 5 .3644180297851563e- 006 , "scale" : 2254.4677204799655 } ] }); this .loaded = true ; this .onLoad( this ); }, getTileUrl: function (level, row, col) { return "http://t" + row % 8 + ".tianditu.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles" ; } }); }); |
封装好之后就可以在页面调用了,调用的时候需要导入这些自定义的图层,导入方式为:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<script type= "text/javascript" > dojoConfig = { parseOnLoad: true , packages: [{ name: 'tdlib' , location: this .location.pathname.replace(/\/[^/]+$/, "" )+ "/js/tdlib" }] }; </script> <script src= "http://localhost/arcgis_js_api/library/3.9/3.9/init.js" ></script> <script> require([ "tdlib/TDTLayer" , "tdlib/TDTAnnoLayer" ], function (TDTLayer, TDTAnnoLayer ){ var basemap = new TDTLayer(); map.addLayer(basemap); var annolayer = new TDTAnnoLayer(); map.addLayer(annolayer); }); </script><br><br><span style= "color: rgb(128, 0, 0);" >完整调用代码:<br></span> |
1
|
<strong>[javascript]</strong> <a title= "view plain" class = "ViewSource" href= "http://blog.csdn.net/gisshixisheng/article/details/44853709#" >view plain</a><span data-mod= "popu_168" > <a title= "copy" class = "CopyToClipboard" href= "http://blog.csdn.net/gisshixisheng/article/details/44853709#" >copy</a><span data-mod= "popu_169" > <a title= "print" class = "PrintSource" href= "http://blog.csdn.net/gisshixisheng/article/details/44853709#" >print</a><a title= "?" class = "About" href= "http://blog.csdn.net/gisshixisheng/article/details/44853709#" >?</a><span class = "tracking-ad" data-mod= "popu_167" ><a title= "在CODE上查看代码片" style= "text-indent: 0px;" href= "https://code.csdn.net/snippets/635113" target= "_blank" ><img width= "12" height= "12" style= "left: 2px; top: 1px; position: relative;" alt= "在CODE上查看代码片" src= "https://code.csdn.net/assets/CODE_ico.png" ></a><span class = "tracking-ad" data-mod= "popu_170" ><a title= "派生到我的代码片" style= "text-indent: 0px;" href= "https://code.csdn.net/snippets/635113/fork" target= "_blank" ><img width= "12" height= "12" style= "left: 2px; top: 2px; position: relative;" alt= "派生到我的代码片" src= "https://code.csdn.net/assets/ico_fork.svg" ></a></span></span></span></span> |
1
|
<span style= "color: rgb(128, 0, 0);" ><br><br><br><!DOCTYPE html><br><html><br><head><br> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /><br> <title>Baidu Map</title><br> <link rel= "stylesheet" href= "https://js.arcgis.com/3.17/esri/css/esri.css" ><br> <style><br> html, body, #map {<br> height: 100 %;<br> margin: 0 ;<br> padding: 0 ;<br> }<br> .base-map-ano{<br> position: absolute;<br> right: 0pt;<br> top:18pt;<br> background: #e6edf1;<br> border: #96aed1 1px solid;<br> padding: 4px 5px;<br> padding-left: 0px;<br> padding-top: 0px;<br> display: none;<br> font-weight: normal;<br> }<br> .base-map{<br> position: absolute;<br> right: 15pt;<br> top:15pt;<br> background: #f0f0f0;<br> border: #96aed1 1px solid;<br> width: auto;<br> height: auto;<br> z-index: 99 ;<br> font:normal 11px "宋体" ,Arial;<br> color:# 868686 ;<br> }<br> .base-map- switch {<br> padding: 4px 8px;<br> float : left;<br> }<br> .base-map- switch -active{<br> background:#e6edf1;<br> font-weight: bold;<br> color: #4d4d4d;<br> }<br> .base-map- switch :hover{<br> cursor: pointer;<br> }<br> .base-map- switch -center{<br> border: 1px #96aed1 solid;<br> border-top:none;<br> border-bottom:none;<br> }<br> </style><br> <script type= "text/javascript" ><br> dojoConfig = {<br> parseOnLoad: true ,<br> packages: [{<br> name: 'bdlib' ,<br> location: this .location.pathname.replace(/\/[^/]+$/, "" )+ "/js/bdlib" <br> }]<br> };<br> </script><br> <script type= "text/javascript" src= "js/transformspatial.js" ></script><br> <script src= "https://js.arcgis.com/3.17/" ></script><br> <script type= "text/javascript" src= "js/plugins/jquery-1.11.1.min.js" ></script><br> <script><br> var test=GPS.mercator_encrypt( 39.115698 , 117.264604 );<br> console.log(test);<br> var map,showMap,anoCtrl;<br> require([ "esri/map" ,<br> "bdlib/BDVecLayer" ,<br> "bdlib/BDImgLayer" ,<br> "bdlib/BDAnoLayer" ,<br> "esri/layers/FeatureLayer" ,<br> "esri/geometry/Point" ,<br> "esri/SpatialReference" ,<br> "dojo/domReady!" ],<br> function (Map,<br> BDVecLayer,<br> BDImgLayer,<br> BDAnoLayer,<br> FeatureLayer,<br> Point,<br> SpatialReference<br> ){<br> map = new Map( "map" , {<br> logo: false <br> });<br> var vecMap = new BDVecLayer();<br> var imgMap = new BDImgLayer();<br> var anoMap = new BDAnoLayer();<br> map.addLayer(vecMap);<br> map.addLayers([imgMap,anoMap]);<br> imgMap.hide(),anoMap.hide();<br>map.on( "mouse-down" ,function(item){<br> mousedownlocation=item;<br> console.log(item.mapPoint.x+ "||" +item.mapPoint.y);<br> //console.log(mousedownlocation.pageX+ "down||down" +mousedownlocation.pageY);<br> })<br> var pt = new Point( 7795368.13681627 , 2813270.0795953586 , new SpatialReference({ wkid: 102100 }));<br> map.centerAndZoom(pt, 19 );<br> map.on( "mouse-move" ,function(evt){<br> // console.log(evt);<br> })<br> showMap = function(layer){<br> //设置按钮样式<br> var baseMap = [ "vec" , "img" ];<br> for (var i= 0 , dl=baseMap.length;i<dl;i++){<br> $( "#" +baseMap[i]).removeClass( "base-map-switch-active" );<br> }<br> $( "#" +layer).addClass( "base-map-switch-active" );<br> //设置显示地图<br> switch (layer){<br> case "img" :{//影像<br> vecMap.hide();<br> imgMap.show();<br> $( "#ano" ).show();<br> break ;<br> }<br> default :{//地图<br> vecMap.show();<br> imgMap.hide(),anoMap.hide();<br> $( "#ano" ).hide();<br> $( "#chkAno" ).attr( "checked" , false );<br> break ;<br> }<br> }<br> };<br> anoCtrl = function(){<br> if ($( "#chkAno" ).is( ":checked" )){<br> anoMap.show();<br> }<br> else {<br> anoMap.hide();<br> }<br> }<br> });<br> </script><br></head><br><body><br><div id= "map" ><br> <div class = "base-map" ><br> <div id= "vec" class = "base-map-switch base-map-switch-active" onclick= "showMap('vec')" >地图</div><br> <div id= "img" class = "base-map-switch base-map-switch-center" onclick= "showMap('img')" >影像<br> <div id= "ano" class = "base-map-ano" ><br> <input id= "chkAno" type= "checkbox" name= "chkAno" value= "chkAno" onchange= "anoCtrl()" />标注<br> </div><br> </div><br> </div><br></div><br></body><br></html><br><br><br>百度地图可调用的有地图切片,影像切片,以及道路等POI切片,我将之用<span style= "font-family: Consolas; font-size: 9pt;" ><span style= "font-family: Consolas; font-size: 9pt;" >TiledMapServiceLayer做了扩展,成了BDAnoLayer,BDVecLayer,BDimgLayer三个图层,其代码如下:</span></span></span> |
BDAnoLayer.js
- define(["dojo/_base/declare",
- "esri/layers/tiled"],
- function (declare) {
- return declare(esri.layers.TiledMapServiceLayer, {
- constructor: function () {
- this.spatialReference = new esri.SpatialReference({ wkid: 102100 });
- this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892, this.spatialReference));
- this.scale = [591657527.591555,295828763.795777,147914381.897889,73957190.948944,36978595.474472,18489297.737236,9244648.868618,
- 4622324.434309,2311162.217155,1155581.108577,577790.554289,288895.277144,144447.638572,72223.819286,
- 36111.9096437,18055.9548224,9027.977411,4513.988705,2256.994353,1128.497176];
- this.resolution = [156543.033928,78271.5169639999,39135.7584820001,19567.8792409999,9783.93962049996,4891.96981024998,2445.98490512499,
- 1222.99245256249,611.49622628138,305.748113140558,152.874056570411,76.4370282850732,38.2185141425366,19.1092570712683,9.55462853563415,
- 4.77731426794937,2.38865713397468,1.19432856685505,0.597164283559817,0.298582141647617];
- this.tileInfo = new esri.layers.TileInfo({
- "rows": 256,
- "cols": 256,
- "compressionQuality": 90,
- "origin": {
- "x": -20037508.3427892,
- "y": 20037508.3427892
- },
- "spatialReference": this.spatialReference,
- "lods": [{ "level": 0, "resolution": this.resolution[0], "scale": this.scale[0] },
- { "level": 1, "resolution": this.resolution[1], "scale": this.scale[1] },
- { "level": 2, "resolution": this.resolution[2], "scale": this.scale[2] },
- { "level": 3, "resolution": this.resolution[3], "scale": this.scale[3] },
- { "level": 4, "resolution": this.resolution[4], "scale": this.scale[4] },
- { "level": 5, "resolution": this.resolution[5], "scale": this.scale[5] },
- { "level": 6, "resolution": this.resolution[6], "scale": this.scale[6] },
- { "level": 7, "resolution": this.resolution[7], "scale": this.scale[7] },
- { "level": 8, "resolution": this.resolution[8], "scale": this.scale[8] },
- { "level": 9, "resolution": this.resolution[9], "scale": this.scale[9] },
- { "level": 10, "resolution": this.resolution[10], "scale": this.scale[10] },
- { "level": 11, "resolution": this.resolution[11], "scale": this.scale[11] },
- { "level": 12, "resolution": this.resolution[12], "scale": this.scale[12] },
- { "level": 13, "resolution": this.resolution[13], "scale": this.scale[13] },
- { "level": 14, "resolution": this.resolution[14], "scale": this.scale[14] },
- { "level": 15, "resolution": this.resolution[15], "scale": this.scale[15] },
- { "level": 16, "resolution": this.resolution[16], "scale": this.scale[16] },
- { "level": 17, "resolution": this.resolution[17], "scale": this.scale[17] },
- { "level": 18, "resolution": this.resolution[18], "scale": this.scale[18] },
- { "level": 19, "resolution": this.resolution[19], "scale": this.scale[19] }
- ]
- });
- this.loaded = true;
- this.onLoad(this);
- },
- getTileUrl: function (level, row, col) {
- var zoom = level - 1;
- var offsetX = parseInt(Math.pow(2, zoom));
- var offsetY = offsetX - 1;
- var numX = col - offsetX, numY = (-row) + offsetY ;
- var num = (col + row) % 8 + 1;
- return "http://online" + num + ".map.bdimg.com/tile/?qt=tile&x="+numX+"&y="+numY+"&z="+level+"&styles=sl&udt=20141015";
- }
- });
- });
BDVecLayer.js
- define(["dojo/_base/declare",
- "esri/layers/tiled"],
- function (declare) {
- return declare(esri.layers.TiledMapServiceLayer, {
- constructor: function () {
- this.spatialReference = new esri.SpatialReference({ wkid: 102100 });
- this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892, this.spatialReference));
- this.scale = [591657527.591555,295828763.795777,147914381.897889,73957190.948944,36978595.474472,18489297.737236,9244648.868618,
- 4622324.434309,2311162.217155,1155581.108577,577790.554289,288895.277144,144447.638572,72223.819286,
- 36111.9096437,18055.9548224,9027.977411,4513.988705,2256.994353,1128.497176];
- this.resolution = [156543.033928,78271.5169639999,39135.7584820001,19567.8792409999,9783.93962049996,4891.96981024998,2445.98490512499,
- 1222.99245256249,611.49622628138,305.748113140558,152.874056570411,76.4370282850732,38.2185141425366,19.1092570712683,9.55462853563415,
- 4.77731426794937,2.38865713397468,1.19432856685505,0.597164283559817,0.298582141647617];
- this.tileInfo = new esri.layers.TileInfo({
- "rows": 256,
- "cols": 256,
- "compressionQuality": 90,
- "origin": {
- "x": -20037508.3427892,
- "y": 20037508.3427892
- },
- "spatialReference": this.spatialReference,
- "lods": [{ "level": 0, "resolution": this.resolution[0], "scale": this.scale[0] },
- { "level": 1, "resolution": this.resolution[1], "scale": this.scale[1] },
- { "level": 2, "resolution": this.resolution[2], "scale": this.scale[2] },
- { "level": 3, "resolution": this.resolution[3], "scale": this.scale[3] },
- { "level": 4, "resolution": this.resolution[4], "scale": this.scale[4] },
- { "level": 5, "resolution": this.resolution[5], "scale": this.scale[5] },
- { "level": 6, "resolution": this.resolution[6], "scale": this.scale[6] },
- { "level": 7, "resolution": this.resolution[7], "scale": this.scale[7] },
- { "level": 8, "resolution": this.resolution[8], "scale": this.scale[8] },
- { "level": 9, "resolution": this.resolution[9], "scale": this.scale[9] },
- { "level": 10, "resolution": this.resolution[10], "scale": this.scale[10] },
- { "level": 11, "resolution": this.resolution[11], "scale": this.scale[11] },
- { "level": 12, "resolution": this.resolution[12], "scale": this.scale[12] },
- { "level": 13, "resolution": this.resolution[13], "scale": this.scale[13] },
- { "level": 14, "resolution": this.resolution[14], "scale": this.scale[14] },
- { "level": 15, "resolution": this.resolution[15], "scale": this.scale[15] },
- { "level": 16, "resolution": this.resolution[16], "scale": this.scale[16] },
- { "level": 17, "resolution": this.resolution[17], "scale": this.scale[17] },
- { "level": 18, "resolution": this.resolution[18], "scale": this.scale[18] },
- { "level": 19, "resolution": this.resolution[19], "scale": this.scale[19] }
- ]
- });
- this.loaded = true;
- this.onLoad(this);
- },
- getTileUrl: function (level, row, col) {
- var zoom = level - 1;
- var offsetX = parseInt(Math.pow(2, zoom));
- var offsetY = offsetX - 1;
- var numX = col - offsetX, numY = (-row) + offsetY ;
- var num = (col + row) % 8 + 1;
- return "http://online" + num + ".map.bdimg.com/tile/?qt=tile&x="+numX+"&y="+numY+"&z="+level+"&styles=pl&scaler=1&udt=20141103";
- }
- });
- });
BDimgLayer.js
- define(["dojo/_base/declare",
- "esri/layers/tiled"],
- function (declare) {
- return declare(esri.layers.TiledMapServiceLayer, {
- constructor: function () {
- this.spatialReference = new esri.SpatialReference({ wkid: 102100 });
- this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892, this.spatialReference));
- this.scale = [591657527.591555,295828763.795777,147914381.897889,73957190.948944,36978595.474472,18489297.737236,9244648.868618,
- 4622324.434309,2311162.217155,1155581.108577,577790.554289,288895.277144,144447.638572,72223.819286,
- 36111.9096437,18055.9548224,9027.977411,4513.988705,2256.994353,1128.497176];
- this.resolution = [156543.033928,78271.5169639999,39135.7584820001,19567.8792409999,9783.93962049996,4891.96981024998,2445.98490512499,
- 1222.99245256249,611.49622628138,305.748113140558,152.874056570411,76.4370282850732,38.2185141425366,19.1092570712683,9.55462853563415,
- 4.77731426794937,2.38865713397468,1.19432856685505,0.597164283559817,0.298582141647617];
- this.tileInfo = new esri.layers.TileInfo({
- "rows": 256,
- "cols": 256,
- "compressionQuality": 90,
- "origin": {
- "x": -20037508.3427892,
- "y": 20037508.3427892
- },
- "spatialReference": this.spatialReference,
- "lods": [{ "level": 0, "resolution": this.resolution[0], "scale": this.scale[0] },
- { "level": 1, "resolution": this.resolution[1], "scale": this.scale[1] },
- { "level": 2, "resolution": this.resolution[2], "scale": this.scale[2] },
- { "level": 3, "resolution": this.resolution[3], "scale": this.scale[3] },
- { "level": 4, "resolution": this.resolution[4], "scale": this.scale[4] },
- { "level": 5, "resolution": this.resolution[5], "scale": this.scale[5] },
- { "level": 6, "resolution": this.resolution[6], "scale": this.scale[6] },
- { "level": 7, "resolution": this.resolution[7], "scale": this.scale[7] },
- { "level": 8, "resolution": this.resolution[8], "scale": this.scale[8] },
- { "level": 9, "resolution": this.resolution[9], "scale": this.scale[9] },
- { "level": 10, "resolution": this.resolution[10], "scale": this.scale[10] },
- { "level": 11, "resolution": this.resolution[11], "scale": this.scale[11] },
- { "level": 12, "resolution": this.resolution[12], "scale": this.scale[12] },
- { "level": 13, "resolution": this.resolution[13], "scale": this.scale[13] },
- { "level": 14, "resolution": this.resolution[14], "scale": this.scale[14] },
- { "level": 15, "resolution": this.resolution[15], "scale": this.scale[15] },
- { "level": 16, "resolution": this.resolution[16], "scale": this.scale[16] },
- { "level": 17, "resolution": this.resolution[17], "scale": this.scale[17] },
- { "level": 18, "resolution": this.resolution[18], "scale": this.scale[18] },
- { "level": 19, "resolution": this.resolution[19], "scale": this.scale[19] }
- ]
- });
- this.loaded = true;
- this.onLoad(this);
- },
- getTileUrl: function (level, row, col) {
- var zoom = level - 1;
- var offsetX = parseInt(Math.pow(2, zoom));
- var offsetY = offsetX - 1;
- var numX = col - offsetX, numY = (-row) + offsetY ;
- var num = (col + row) % 8 + 1;
- return "http://shangetu" + num + ".map.bdimg.com/it/u=x="+numX+";y="+numY+";z="+level+";v=009;type=sate&fm=46&udt=20141015";
- }
- });
- });
1
2
|
<span style= "color: rgb(128, 0, 0);" > <span style= "font-family: Consolas; font-size: 9pt;" ><span style= "font-family: Consolas; font-size: 9pt;" ><span style= "font-family: Consolas;" ><span class = "tracking-ad" data-mod= "popu_170" ><strong>[javascript]</strong> <a title= "view plain" class = "ViewSource" href= "http://blog.csdn.net/gisshixisheng/article/details/44853709#" >view plain</a><span data-mod= "popu_168" > <a title= "copy" class = "CopyToClipboard" href= "http://blog.csdn.net/gisshixisheng/article/details/44853709#" >copy</a><span data-mod= "popu_169" > <a title= "print" class = "PrintSource" href= "http://blog.csdn.net/gisshixisheng/article/details/44853709#" >print</a><a title= "?" class = "About" href= "http://blog.csdn.net/gisshixisheng/article/details/44853709#" >?</a><span class = "tracking-ad" data-mod= "popu_167" ><a title= "在CODE上查看代码片" style= "text-indent: 0px;" href= "https://code.csdn.net/snippets/635113" target= "_blank" ><img width= "12" height= "12" style= "left: 2px; top: 1px; position: relative;" alt= "在CODE上查看代码片" src= "https://code.csdn.net/assets/CODE_ico.png" ></a><span class = "tracking-ad" data-mod= "popu_170" ><a title= "派生到我的代码片" style= "text-indent: 0px;" href= "https://code.csdn.net/snippets/635113/fork" target= "_blank" ><img width= "12" height= "12" style= "left: 2px; top: 2px; position: relative;" alt= "派生到我的代码片" src= "https://code.csdn.net/assets/ico_fork.svg" ></a></span></span></span></span></span></span></span></span></span> |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
- <style type="text/css">
- body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
- </style>
- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥"></script>
- <title>地图展示</title>
- </head>
- <body>
- <div id="allmap"></div>
- </body>
- </html>
- <script type="text/javascript">
- // 百度地图API功能
- var map = new BMap.Map("allmap"); // 创建Map实例
- map.centerAndZoom(new BMap.Point(116.404, 39.915), 5); // 初始化地图,设置中心点坐标和地图级别
- map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
- map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
- map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
- </script>
1
|
<span style= "color: rgb(128, 0, 0);" > </span> |