写在前面的话:

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 plaincopy print?
  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 plaincopy print?
  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?
  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>

arcgis api for javascipt 加载天地图、百度地图相关推荐

  1. 填坑 ---- arcgis api for javascript 加载天地图

    写在前面 首先要感谢 arcgis api for javascript 加载天地图 这篇文章,帮助我完成了在网页中加载天地图. 在此就不再描述加载天地图的方法与过程,只记录我遇到的一个坑与填坑方法. ...

  2. GIS开发之二维地下管线综合管理系统(Arcgis)第四节 使用arcgis api for js 加载天地图

    GIS开发之二维地下管线综合管理系统(Arcgis)第四节 使用arcgis api for js 加载天地图 核心js文件 调用方式 调用结果 核心js文件 #通过定义加载天地图js文件,引用并组织 ...

  3. 基于ArcGIS API for JavaScript加载天地图

    文章目录 前言 效果图 详细代码 总结 参考链接 前言 该篇主要介绍如何用ArcGIS JS API加载天地图,具体应用场景以及需求分析等,在上篇基于ArcGIS API for JavaScript ...

  4. arcgis api 4.x加载天地图(经纬度和墨卡托投影)(一篇文章搞透天地图加载)

    主要说明: 1.天地图影像分两种经纬度投影(WKID:4490)和墨卡托投影两种,arcgis默认为墨卡托坐标系(3857),可以切换二维/三维,加载经纬度切片时view需要设置wkid:4326 2 ...

  5. OpenLayers3加载离线百度地图(百度迁徙底图)

    关于openlayers加载离线百度地图的东东好几年前就做过了,不过当时做的是2.0版本的. 自从好久没有去做可视化分析之后,也很少接触这些前端的JS的东西了.最近想实现一个东西的时候,才想起需要用到 ...

  6. (转载)arcgis for js - 解决加载天地图和WMTS服务,WMTS服务不显示的问题,以及wmts服务密钥。...

    1 arcgis加载天地图和wmts服务 arcgis for js加载天地图的例子网上有很多,这里先不写了,后期有空再贴代码,这里主要分析下WMTS服务为什么不显示,怎么解决. 条件:这里的WMTS ...

  7. Android Arcgis入门(12)、加载天地图

    在项目中可以经常需要动态加载一些图层,像投影地图服务.投影地图服务器.其实网上有大量这样的服务,比如天地图官网, . 随便点开一个服务,里面有相关的信息.那如何加载这样图层服务呢. 一.首先感谢这篇博 ...

  8. OpenLayer学习之加载天地图在线地图

    1.天地图官网 http://www.tianditu.gov.cn/ 2.申请key 注意: 天地图自2019年1月 1日起需获得开发授权,然后在引用的API 地址后增加授权信息即可(&tk ...

  9. 基于ArcGIS API for JavaScript加载百度各种类型切片地图

    文章目录 应用场景 需求分析 效果图 实现代码 原理解读 应用场景 部分项目基于ArcGIS平台,但是甲方只提供部分矢量数据,用作底图的地形图数据没有,表示可以使用百度地图作为底图.所以才会有使用Ar ...

最新文章

  1. 三维匹配_机器视觉——双目视觉的基础知识(视差深度、标定、立体匹配)
  2. EF映射之修改数据库
  3. 基于Boost::beast模块的异步HTTP客户端
  4. Python简单实现基于VSM的余弦相似度计算
  5. 已知线性表最多可能有20个元素,存储每个元素需要8字节,存储每个指针需要4字节。当元素个数为( )时使用单链表比使用数组存储此线性表更加节约空间。
  6. UIView的生命周期
  7. flyme7 android彩蛋,魅族 15 系列开启预约,Flyme7 或是发布会彩蛋
  8. springboot+openFeign+nacos+seata开发实战
  9. Portainer容器管理软件,安装
  10. 窗口大小改变时,显示内容的处理(正投影情况)
  11. 云计算、计算虚拟化、网络基础简介
  12. 连接共享服务器显示拒绝访问权限,无权限访问共享打印机,windows无法连接到打印机拒绝访问 怎么办?...
  13. 塔防游戏制作教程(二)
  14. Mac小白——如何查看网速
  15. 【爬虫】关于企业信用信息公示系统-加速乐最新反爬虫机制
  16. ThinkPHP3.2.3 where注入
  17. 小波变换比傅里叶变换好在哪里_小波变换与傅里叶变换详解——代码下载——非平稳信号与平稳信号的滤波效果对比
  18. 疫情之后,SaaS的春天就来了吗?
  19. Android实现弹出窗口(PopUpWindow)
  20. 2020-09-27程序设计基础知识

热门文章

  1. 雷军做程序员时写的博客,太牛了。。
  2. Java中的ThreadLocal详解
  3. python图像编程:实现弹球游戏
  4. matlab gui打开fig文件,求助gui打开word文件及打开fig格式图片
  5. decimal函数python_decimal数据类型
  6. vsc系统是什么意思_电脑蓝屏是什么意思?蓝屏就一定要重装系统吗?你可不要弄错了...
  7. linux误删视频恢复吗,linux 误删文件恢复
  8. linux开发板蓝牙连接,开发板蓝牙通信问题,有这方面经验的请进
  9. 中达变频器参数_台达变频器:满足未来驱动需求
  10. 一份好的简历应该是这样的(This Is What A GOOD Resume Should Look Like)