arcgis api for javascipt 加载天地图、百度地图

最新推荐文章于 2023-10-08 16:09:37 发布
最新推荐文章于 2023-10-08 16:09:37 发布
阅读量387 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/telwanggs/p/6307727.html
版权

写在前面的话：

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

 

[javascript] view plain copy print?在CODE上查看代码片派生到我的代码片
  1. define(["dojo/_base/declare",  
  2.     "esri/layers/tiled"],  
  3.     function (declare) {  
  4.         return declare(esri.layers.TiledMapServiceLayer, {  
  5.             constructor: function () {  
  6.                 this.spatialReference = new esri.SpatialReference({ wkid: 102100 });  
  7.                 this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892, this.spatialReference));  
  8.                 this.scale = [591657527.591555,295828763.795777,147914381.897889,73957190.948944,36978595.474472,18489297.737236,9244648.868618,  
  9.                     4622324.434309,2311162.217155,1155581.108577,577790.554289,288895.277144,144447.638572,72223.819286,  
  10.                     36111.9096437,18055.9548224,9027.977411,4513.988705,2256.994353,1128.497176];  
  11.                 this.resolution = [156543.033928,78271.5169639999,39135.7584820001,19567.8792409999,9783.93962049996,4891.96981024998,2445.98490512499,  
  12.                     1222.99245256249,611.49622628138,305.748113140558,152.874056570411,76.4370282850732,38.2185141425366,19.1092570712683,9.55462853563415,  
  13.                     4.77731426794937,2.38865713397468,1.19432856685505,0.597164283559817,0.298582141647617];  
  14.                 this.tileInfo = new esri.layers.TileInfo({  
  15.                     "rows": 256,  
  16.                     "cols": 256,  
  17.                     "compressionQuality": 90,  
  18.                     "origin": {  
  19.                         "x": -20037508.3427892,  
  20.                         "y": 20037508.3427892  
  21.                     },  
  22.                     "spatialReference": this.spatialReference,  
  23.                     "lods": [{ "level": 0, "resolution": this.resolution[0], "scale": this.scale[0] },  
  24.                         { "level": 1, "resolution": this.resolution[1], "scale": this.scale[1] },  
  25.                         { "level": 2, "resolution": this.resolution[2], "scale": this.scale[2] },  
  26.                         { "level": 3, "resolution": this.resolution[3], "scale": this.scale[3] },  
  27.                         { "level": 4, "resolution": this.resolution[4], "scale": this.scale[4] },  
  28.                         { "level": 5, "resolution": this.resolution[5], "scale": this.scale[5] },  
  29.                         { "level": 6, "resolution": this.resolution[6], "scale": this.scale[6] },  
  30.                         { "level": 7, "resolution": this.resolution[7], "scale": this.scale[7] },  
  31.                         { "level": 8, "resolution": this.resolution[8], "scale": this.scale[8] },  
  32.                         { "level": 9, "resolution": this.resolution[9], "scale": this.scale[9] },  
  33.                         { "level": 10, "resolution": this.resolution[10], "scale": this.scale[10] },  
  34.                         { "level": 11, "resolution": this.resolution[11], "scale": this.scale[11] },  
  35.                         { "level": 12, "resolution": this.resolution[12], "scale": this.scale[12] },  
  36.                         { "level": 13, "resolution": this.resolution[13], "scale": this.scale[13] },  
  37.                         { "level": 14, "resolution": this.resolution[14], "scale": this.scale[14] },  
  38.                         { "level": 15, "resolution": this.resolution[15], "scale": this.scale[15] },  
  39.                         { "level": 16, "resolution": this.resolution[16], "scale": this.scale[16] },  
  40.                         { "level": 17, "resolution": this.resolution[17], "scale": this.scale[17] },  
  41.                         { "level": 18, "resolution": this.resolution[18], "scale": this.scale[18] },  
  42.                         { "level": 19, "resolution": this.resolution[19], "scale": this.scale[19] }  
  43.                     ]  
  44.                 });  
  45.                 this.loaded = true;  
  46.                 this.onLoad(this);  
  47.             },  
  48.             getTileUrl: function (level, row, col) {  
  49.                 var zoom = level - 1;  
  50.                 var offsetX = parseInt(Math.pow(2, zoom));  
  51.                 var offsetY = offsetX - 1;  
  52.                 var numX = col - offsetX, numY = (-row) + offsetY ;  
  53.                 var num = (col + row) % 8 + 1;  
  54.                 return "http://online" + num + ".map.bdimg.com/tile/?qt=tile&x="+numX+"&y="+numY+"&z="+level+"&styles=sl&udt=20141015";  
  55.             }  
  56.         });  
  57.     });  

BDVecLayer.js

 

[javascript] view plain copy print?在CODE上查看代码片派生到我的代码片
  1. define(["dojo/_base/declare",  
  2.     "esri/layers/tiled"],  
  3.     function (declare) {  
  4.         return declare(esri.layers.TiledMapServiceLayer, {  
  5.             constructor: function () {  
  6.                 this.spatialReference = new esri.SpatialReference({ wkid: 102100 });  
  7.                 this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892, this.spatialReference));  
  8.                 this.scale = [591657527.591555,295828763.795777,147914381.897889,73957190.948944,36978595.474472,18489297.737236,9244648.868618,  
  9.                     4622324.434309,2311162.217155,1155581.108577,577790.554289,288895.277144,144447.638572,72223.819286,  
  10.                     36111.9096437,18055.9548224,9027.977411,4513.988705,2256.994353,1128.497176];  
  11.                 this.resolution = [156543.033928,78271.5169639999,39135.7584820001,19567.8792409999,9783.93962049996,4891.96981024998,2445.98490512499,  
  12.                     1222.99245256249,611.49622628138,305.748113140558,152.874056570411,76.4370282850732,38.2185141425366,19.1092570712683,9.55462853563415,  
  13.                     4.77731426794937,2.38865713397468,1.19432856685505,0.597164283559817,0.298582141647617];  
  14.                 this.tileInfo = new esri.layers.TileInfo({  
  15.                     "rows": 256,  
  16.                     "cols": 256,  
  17.                     "compressionQuality": 90,  
  18.                     "origin": {  
  19.                         "x": -20037508.3427892,  
  20.                         "y": 20037508.3427892  
  21.                     },  
  22.                     "spatialReference": this.spatialReference,  
  23.                     "lods": [{ "level": 0, "resolution": this.resolution[0], "scale": this.scale[0] },  
  24.                         { "level": 1, "resolution": this.resolution[1], "scale": this.scale[1] },  
  25.                         { "level": 2, "resolution": this.resolution[2], "scale": this.scale[2] },  
  26.                         { "level": 3, "resolution": this.resolution[3], "scale": this.scale[3] },  
  27.                         { "level": 4, "resolution": this.resolution[4], "scale": this.scale[4] },  
  28.                         { "level": 5, "resolution": this.resolution[5], "scale": this.scale[5] },  
  29.                         { "level": 6, "resolution": this.resolution[6], "scale": this.scale[6] },  
  30.                         { "level": 7, "resolution": this.resolution[7], "scale": this.scale[7] },  
  31.                         { "level": 8, "resolution": this.resolution[8], "scale": this.scale[8] },  
  32.                         { "level": 9, "resolution": this.resolution[9], "scale": this.scale[9] },  
  33.                         { "level": 10, "resolution": this.resolution[10], "scale": this.scale[10] },  
  34.                         { "level": 11, "resolution": this.resolution[11], "scale": this.scale[11] },  
  35.                         { "level": 12, "resolution": this.resolution[12], "scale": this.scale[12] },  
  36.                         { "level": 13, "resolution": this.resolution[13], "scale": this.scale[13] },  
  37.                         { "level": 14, "resolution": this.resolution[14], "scale": this.scale[14] },  
  38.                         { "level": 15, "resolution": this.resolution[15], "scale": this.scale[15] },  
  39.                         { "level": 16, "resolution": this.resolution[16], "scale": this.scale[16] },  
  40.                         { "level": 17, "resolution": this.resolution[17], "scale": this.scale[17] },  
  41.                         { "level": 18, "resolution": this.resolution[18], "scale": this.scale[18] },  
  42.                         { "level": 19, "resolution": this.resolution[19], "scale": this.scale[19] }  
  43.                     ]  
  44.                 });  
  45.                 this.loaded = true;  
  46.                 this.onLoad(this);  
  47.             },  
  48.             getTileUrl: function (level, row, col) {  
  49.                 var zoom = level - 1;  
  50.                 var offsetX = parseInt(Math.pow(2, zoom));  
  51.                 var offsetY = offsetX - 1;  
  52.                 var numX = col - offsetX, numY = (-row) + offsetY ;  
  53.                 var num = (col + row) % 8 + 1;  
  54.                 return "http://online" + num + ".map.bdimg.com/tile/?qt=tile&x="+numX+"&y="+numY+"&z="+level+"&styles=pl&scaler=1&udt=20141103";  
  55.             }  
  56.         });  
  57.     });  

BDimgLayer.js

[javascript] view plain copy print?在CODE上查看代码片派生到我的代码片
  1. define(["dojo/_base/declare",  
  2.     "esri/layers/tiled"],  
  3.     function (declare) {  
  4.         return declare(esri.layers.TiledMapServiceLayer, {  
  5.             constructor: function () {  
  6.                 this.spatialReference = new esri.SpatialReference({ wkid: 102100 });  
  7.                 this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892, this.spatialReference));  
  8.                 this.scale = [591657527.591555,295828763.795777,147914381.897889,73957190.948944,36978595.474472,18489297.737236,9244648.868618,  
  9.                     4622324.434309,2311162.217155,1155581.108577,577790.554289,288895.277144,144447.638572,72223.819286,  
  10.                     36111.9096437,18055.9548224,9027.977411,4513.988705,2256.994353,1128.497176];  
  11.                 this.resolution = [156543.033928,78271.5169639999,39135.7584820001,19567.8792409999,9783.93962049996,4891.96981024998,2445.98490512499,  
  12.                     1222.99245256249,611.49622628138,305.748113140558,152.874056570411,76.4370282850732,38.2185141425366,19.1092570712683,9.55462853563415,  
  13.                     4.77731426794937,2.38865713397468,1.19432856685505,0.597164283559817,0.298582141647617];  
  14.                 this.tileInfo = new esri.layers.TileInfo({  
  15.                     "rows": 256,  
  16.                     "cols": 256,  
  17.                     "compressionQuality": 90,  
  18.                     "origin": {  
  19.                         "x": -20037508.3427892,  
  20.                         "y": 20037508.3427892  
  21.                     },  
  22.                     "spatialReference": this.spatialReference,  
  23.                     "lods": [{ "level": 0, "resolution": this.resolution[0], "scale": this.scale[0] },  
  24.                         { "level": 1, "resolution": this.resolution[1], "scale": this.scale[1] },  
  25.                         { "level": 2, "resolution": this.resolution[2], "scale": this.scale[2] },  
  26.                         { "level": 3, "resolution": this.resolution[3], "scale": this.scale[3] },  
  27.                         { "level": 4, "resolution": this.resolution[4], "scale": this.scale[4] },  
  28.                         { "level": 5, "resolution": this.resolution[5], "scale": this.scale[5] },  
  29.                         { "level": 6, "resolution": this.resolution[6], "scale": this.scale[6] },  
  30.                         { "level": 7, "resolution": this.resolution[7], "scale": this.scale[7] },  
  31.                         { "level": 8, "resolution": this.resolution[8], "scale": this.scale[8] },  
  32.                         { "level": 9, "resolution": this.resolution[9], "scale": this.scale[9] },  
  33.                         { "level": 10, "resolution": this.resolution[10], "scale": this.scale[10] },  
  34.                         { "level": 11, "resolution": this.resolution[11], "scale": this.scale[11] },  
  35.                         { "level": 12, "resolution": this.resolution[12], "scale": this.scale[12] },  
  36.                         { "level": 13, "resolution": this.resolution[13], "scale": this.scale[13] },  
  37.                         { "level": 14, "resolution": this.resolution[14], "scale": this.scale[14] },  
  38.                         { "level": 15, "resolution": this.resolution[15], "scale": this.scale[15] },  
  39.                         { "level": 16, "resolution": this.resolution[16], "scale": this.scale[16] },  
  40.                         { "level": 17, "resolution": this.resolution[17], "scale": this.scale[17] },  
  41.                         { "level": 18, "resolution": this.resolution[18], "scale": this.scale[18] },  
  42.                         { "level": 19, "resolution": this.resolution[19], "scale": this.scale[19] }  
  43.                     ]  
  44.                 });  
  45.                 this.loaded = true;  
  46.                 this.onLoad(this);  
  47.             },  
  48.             getTileUrl: function (level, row, col) {  
  49.                 var zoom = level - 1;  
  50.                 var offsetX = parseInt(Math.pow(2, zoom));  
  51.                 var offsetY = offsetX - 1;  
  52.                 var numX = col - offsetX, numY = (-row) + offsetY ;  
  53.                 var num = (col + row) % 8 + 1;  
  54.                 return "http://shangetu" + num + ".map.bdimg.com/it/u=x="+numX+";y="+numY+";z="+level+";v=009;type=sate&fm=46&udt=20141015";  
  55.             }  
  56.         });  
  57.     });  
?
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>
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
  6.     <style type="text/css">  
  7.         body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}  
  8.     </style>  
  9.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥"></script>  
  10.     <title>地图展示</title>  
  11. </head>  
  12. <body>  
  13. <div id="allmap"></div>  
  14. </body>  
  15. </html>  
  16. <script type="text/javascript">  
  17.     // 百度地图API功能  
  18.     var map = new BMap.Map("allmap");    // 创建Map实例  
  19.     map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);  // 初始化地图,设置中心点坐标和地图级别  
  20.     map.addControl(new BMap.MapTypeControl());   //添加地图类型控件  
  21.     map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的  
  22.     map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放  
  23. </script> 
?
1
<span style= "color: rgb(128, 0, 0);" > </span>

转载于:https://www.cnblogs.com/telwanggs/p/6307727.html

dhptkq9465
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
arcgis使用天地图综合示例
02-28
前段时间研究了下arcgis，尝试了在arcgis中使用天地图资源，在网上找了不少资料，终于成功的在arcgis中用上了天地图。不过，貌似只用的到天地图提供的图层资源，用不上天地图的搜索查询服务。本例中，切换底图的功能访问的服务是我本地arcgis服务器上发布的图层服务，你们可能用不了，不过其他功能应该没问题。
02-ArcGIS API For JavaScript调用动态地图服务
Ocean111best的博客
11-22 1422
一、ArcGIS发布动态地图服务 参考：https://blog.csdn.net/lovecarpenter/article/details/52205093 我发布的地图服务是： 二、通过属性查询地图服务中的信息 1、调用地图服务 在ArcGIS API 中给我们提供了一个类叫做ArcGISDynamicMapServiceLayer利用这个类，我们可以获得发布的地...
ArcGIS API for Javascript4.10加载天地图（墨卡托投影）
佯佯DESIGNER
01-19 4397
本篇主要介绍利用ArcGIS API for Javascript 4版本的最新版本4.10加载天地图的矢量底图、影像地图和地形图，以加载矢量地图为例，我们通过扩展BaseTileLayer来自定义矢量地图图层TiandiMapLayer模块。
ArcGIS API for JavaScript实现加载必应地图
qq_36965238的博客
04-14 946
加载最简单的基础地图和道路信息（本例来自ArcGIS官方：加载必应地图）如何将Bing地图的图层添加到地图、如何使用按钮在不同类型的地图之间切换&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; ...
【ArcGis for javascript从零开始】之一 ArcGis加载天地图
每天学习一点点
12-04 1万+
现在正在做的项目，需要用ArcGis来加载天地图，由于刚刚接触ArcGis方面，一边学习一边做比较吃力。先把学习到的一点点拿出来现学现卖吧。
ArcGIS API for Javascript3加载天地图
12-21
利用ArcGIS API for Javascript3最新版本【3.23】加载天地图，包括矢量图、影像图、地形图，并包含标注图层。
ArcGIS API 4.10之加载百度地图
01-18
基于ArcGIS API 4.10，通过自定义BaseTileLayer类来实现在三维球体加载显示百度地图和影像地图
vue3+arcgis for js 4.17 加载天地图
10-13
基于vue3，使用arcgis for javascript 4.17 加载天地图，已经上线使用。在使用是可以直接天地图官网更换需要得地图服务http://lbs.tianditu.gov.cn/data/dataapi.html
arcgis for js加载百度地图高德地图天地图
05-09
arcgis for js加载百度地图高德地图天地图
ArcGIS API for JavaScript4.10加载高德地图
01-16
使用ArcGIS API for JavaScript4.10加载高德地图和高德影像，通过扩展BaseTileLayer来自定义GaodeMapLayer模块。
ArcGIS API for JavaScript部署开发
最新发布
m0_53156691的博客
10-08 1515
简单来说，开发可以通过在线引用官网CDN和 通过下载本地开发包引用的两种形式来进行。（这里本地部署又分别可以通过NPM下载模块，或者在官网下载ArcGIS API for JavaScript开发包。而，和ES modules是js模块化开发的规范。可以了解：AMD modules 和 ES modules 两种都是异步的，都适用于前端。
arcgis api for javascript4.18加载天地图服务，并且加载自己的发布的动态地图服务
RADI的博客
12-24 2025
以arcgis api for javascript4.18 API为例： 遇到几个问题： 1、用户，特别是小白用户，不知道用什么API类来调用各种地图服务。 解决办法： 方法一：正向思考方法 参考官方APIhttps://developers.arcgis.com/javascript/latest/api-reference 方法二：技巧型方法 那么有一个很简单的方法，进入server manager服务目录，找到你的服务，预览一下， 然后你按F12,看到了没有，这个服务用啥方法，咋写，
ArcGIS API for JavaScript学习笔记（3）加载谷歌卫星图和天地图标注
圈圈的博客
08-30 1332
ArcGIS Pro自2.4起可以从自带的底图中一键加载天地图的卫星图、矢量图和地形图，但是从实际使用中看，卫星图的显示效果模糊，更要命的是时效性差，比如某一块用地已经开展了建设，但是从天地图的卫星图上看还是一片空地。从这个需求上看，google的卫星图仍然是首选。ArcGIS Pro的底图中没有自带谷歌的卫星图，不过可以使用ArcGIS Online间接满足要求。 方法：在ArcGIS Online中新建地图，从Web添加图层-切片图层，输入google卫星图的链接http://mt0.google.cn
Arcgis API for JS 地图小部件
aoyueng_XT的博客
08-16 1742
ArcGIS API for JavaScript地图小部件类主要放在esri/dijit包中。 原文自GISXXCOM微信公众号，存档各地图小部件的引用方法： 比例尺（Scalebar） require(["esri/dijit/Scalebar"], function(Scalebar) { var scalebar = new Scalebar({
ArcGIS JavaScript for API（001）：加载ArcGISServer MapServer
wangjianbo09的博客
03-29 2697
根据工作需要最近在调研 arcgis api。 地图显示： 1，基础地图显示 ：在创建map时，定义“basemap”，即可显示arcgis预设地图。 const map = new Map({ basemap: 'streets-night-vector' }); 2，加载指定地图服务地图-arcgis server地图源：arcgis server 发布地图网上教程很多，在此不再赘述；加载arcgis server地图功能实现很简单，主要是选对laye
[WebGIS] ArcGIS api for javascript3.21版本加载天地图
geodoer
08-29 7916
介绍 文件 TDTLayerjs TDTLayerjs indexhtml或jspflt前端文件 结果介绍ArcGIS api for Javascript3.21版本加载天地图 目录介绍： js TDTAnnoLayer.js //天地图注解图层 TDTLayer.js //天地图注解图层 index.html //视图文件 下载链接文件TDTLayer.js封装加
ArcGIS.Server.9.3和ArcGIS API for JavaScript实现基本的地图功能（一） javascript
chaoxidawang的专栏
01-09 1205
arcgis.server.9.3和arcgis api for javascript实现基本的地图功能(一) 目的: 1.arcgis api for javascript实现基本的地图功能,包括2个地图服务的叠加显示、图层过滤定义、地图视图范围设置、地图鼠标移动事件等。 准备工作: 1.在arcgis.server.9.3发布一个叫usa的map service,并且把这个servic
Arcgis+Vue加载天地图组件
RenZhXu的博客
09-03 922
arcgis 加载天地图
ArcGIS（ArcMap）中添加在线地图（天地图、影像图、街道图等）无需插件
热门推荐
qq_27816785的博客
09-17 6万+
🔥🔥🔥ArcGIS作为最强大的地理数据处理、编辑、制图和地图服务发布、管理等的GIS平台，在不同的专业都可以看到它的身影。对于那些利用GIS信息进行编辑，设计的专业人士来说，其桌面端ArcMap备受欢迎。但是非GIS专业人员上手时候可能有些困难，需要一些小白级的简单教程。
arcgis api 三维加载天地图 注记
08-29
要在ArcGIS API中加载天地图注记，需要以下步骤： 1. 首先，在ArcGIS API中创建一个三维场景容器，可以是SceneView对象。 2. 然后，创建一个ImageryLayer对象，并指定其图层类型为label-annotation。 3. 在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值