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

最新推荐文章于 2022-07-10 11:43:58 发布
最新推荐文章于 2022-07-10 11:43:58 发布
阅读量336 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/gison/p/5765490.html
版权

写在前面的话：

1.百度地图是自己定义的坐标系统，wkid=102100.百度地图数据是加密的产物。下文将附上百度坐标与WGS84，谷歌等坐标系统转换方法（地理-地理），此方法并未亲测，据说准

2.百度地图可以直接加载经纬度坐标

3.百度地图如果加载的arcgis api中会出现坐标偏移，1.中已经解决了地理坐标转换，那么找到百度投影-地理坐标的转换方式，则arcgis就可以直接无偏加载了，网上很多方法，但是亲测不行。

4.天地图不是涉密数据，根据本文提供的类库,arcgis api for js可以直接加载。但是数据有略微的偏移

 

 

天地图的切片地图可以通过esri.layers.TiledMapServiceLayer来加载，在此将之进行了一定的封装，如下：

1、切片线划图——TDTLayer.js

 

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

 

 

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";
            }
        });
    });


封装好之后就可以在页面调用了，调用的时候需要导入这些自定义的图层，导入方式为：

 

 

    <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>

完整调用代码：
[javascript] view plain copy print?



<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Baidu Map</title>
   <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .base-map-ano{
            position: absolute;
            right: 0pt;
            top:18pt;
            background: #e6edf1;
            border: #96aed1 1px solid;
            padding: 4px 5px;
            padding-left: 0px;
            padding-top: 0px;
            display: none;
            font-weight: normal;
        }
        .base-map{
            position: absolute;
            right: 15pt;
            top:15pt;
            background: #f0f0f0;
            border: #96aed1 1px solid;
            width: auto;
            height: auto;
            z-index: 99;
            font:normal 11px "宋体",Arial;
            color:#868686;
        }
        .base-map-switch{
            padding: 4px 8px;
            float: left;
        }
        .base-map-switch-active{
            background:#e6edf1;
            font-weight: bold;
            color: #4d4d4d;
        }
        .base-map-switch:hover{
            cursor: pointer;
        }
        .base-map-switch-center{
            border: 1px #96aed1 solid;
            border-top:none;
            border-bottom:none;
        }
    </style>
    <script type="text/javascript">
        dojoConfig = {
            parseOnLoad: true,
            packages: [{
                name: 'bdlib',
                location: this.location.pathname.replace(/\/[^/]+$/, "")+"/js/bdlib"
            }]
        };
    </script>
    <script type="text/javascript" src="js/transformspatial.js"></script>
    <script src="https://js.arcgis.com/3.17/"></script>
    <script type="text/javascript" src="js/plugins/jquery-1.11.1.min.js"></script>
    <script>
       var test=GPS.mercator_encrypt(39.115698,117.264604);
       console.log(test);
        var map,showMap,anoCtrl;
        require(["esri/map",
            "bdlib/BDVecLayer",
            "bdlib/BDImgLayer",
            "bdlib/BDAnoLayer",
            "esri/layers/FeatureLayer",
            "esri/geometry/Point",
            "esri/SpatialReference",
            "dojo/domReady!"],
                function (Map,
                          BDVecLayer,
                          BDImgLayer,
                          BDAnoLayer,
                          FeatureLayer,
                          Point,
                          SpatialReference
                        ){
                    map = new Map("map", {
                        logo: false
                    });
                    var vecMap = new BDVecLayer();
                    var imgMap = new BDImgLayer();
                    var anoMap = new BDAnoLayer();
                    map.addLayer(vecMap);
                    map.addLayers([imgMap,anoMap]);
                    imgMap.hide(),anoMap.hide();
map.on("mouse-down",function(item){
                        mousedownlocation=item;
                        console.log(item.mapPoint.x+"||"+item.mapPoint.y);
                        //console.log(mousedownlocation.pageX+"down||down"+mousedownlocation.pageY);
                    })
                    var pt = new Point(7795368.13681627, 2813270.0795953586, new SpatialReference({ wkid: 102100 }));
                    map.centerAndZoom(pt, 19);
                    map.on("mouse-move",function(evt){
                      // console.log(evt);
                    })
                    showMap = function(layer){
                        //设置按钮样式
                        var baseMap = ["vec","img"];
                        for(var i= 0, dl=baseMap.length;i<dl;i++){
                            $("#"+baseMap[i]).removeClass("base-map-switch-active");
                        }
                        $("#"+layer).addClass("base-map-switch-active");
                        //设置显示地图
                        switch(layer){
                            case "img":{//影像
                                vecMap.hide();
                                imgMap.show();
                                $("#ano").show();
                                break;
                            }
                            default :{//地图
                                vecMap.show();
                                imgMap.hide(),anoMap.hide();
                                $("#ano").hide();
                                $("#chkAno").attr("checked",false);
                                break;
                            }
                        }
                    };
                    anoCtrl = function(){
                        if($("#chkAno").is(":checked")){
                            anoMap.show();
                        }
                        else{
                            anoMap.hide();
                        }
                    }
                });
    </script>
</head>
<body>
<div id="map">
    <div class="base-map">
        <div id="vec" class="base-map-switch base-map-switch-active" οnclick="showMap('vec')">地图</div>
        <div id="img" class="base-map-switch base-map-switch-center"  οnclick="showMap('img')">影像
            <div id="ano" class="base-map-ano">
                <input id="chkAno" type="checkbox" name="chkAno" value="chkAno" οnchange="anoCtrl()"/>标注
            </div>
        </div>
    </div>
</div>
</body>
</html>


百度地图可调用的有地图切片，影像切片，以及道路等POI切片，我将之用TiledMapServiceLayer做了扩展，成了BDAnoLayer，BDVecLayer，BDimgLayer三个图层，其代码如下：

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.     });  

[javascript] view plain copy print?
    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>  
 

 

转载于:https://www.cnblogs.com/gison/p/5765490.html

weixin_30512043
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
arcgis for javascript API3.13 加载天地图卫星影像
GISlv的专栏
05-30 5079
采用arcgis for javascript  API 3.13， 用其中的esri.layers.TiledMapServiceLayer，这个类可以完成对切片地图的加载，ArcOnline本身自带一个影像地图的，但是缩放后效果不好，所以本人在一个系统中不得不采用天地图的底图。可以看到最后的效果中，有一个天地图的水印。直接上代码了            declare("my.Portlan
ArcGIS API for JavaScript3加载百度地图和影像
12-20
ArcGIS API for Javascript加载百度地图和影像源码，3版本均可使用，小编已亲测最新版3.23可用。
Arcgis for js加载百度地图
wk2133的博客
01-10 2740
http://www.bkjia.com/webzh/978634.html define(["dojo/_base/declare", "esri/layers/tiled"], function (declare) { return declare(esri.layers.TiledMapServiceLayer, { co
ArcGIS API 4.10之加载百度地图
01-18
基于ArcGIS API 4.10，通过自定义BaseTileLayer类来实现在三维球体加载显示百度地图和影像地图
ArcGIS api for JavaScript - 3.xx 版本加载天地图
技术共享，共同进步！
12-17 1130
ArcGIS api for JavaScript - 3.xx 版本加载天地图
基于ArcGIS API for JavaScript加载百度各种类型切片地图
03-24
基于ArcGIS API for JavaScript加载百度各种类型切片地图，资源包括封装的BaiduLayer模块，示例页面。
9.（arcgis api for js篇）arcgis api for js接入百度地图（有偏移）.zip
03-08
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/m0_60387551/article/details/123356335
arcgis for js加载百度地图高德地图天地图
05-09
arcgis for js加载百度地图高德地图天地图
arcgis api for javascipt 加载天地图、百度地图
01-19 406
写在前面的话： 1.百度地图是自己定义的坐标系统，wkid=102100.百度地图数据是加密的产物。下文将附上百度坐标与WGS84，谷歌等坐标系统转换方法（地理-地理），此方法并未亲测，据说准 2.百度地图可以直接加载经纬度坐标 3.百度地图如果加载的arcgis api中会出现坐标偏移，1.中已经解决了地理坐标转换，那么找到百度投影-地理坐标的转换方式，则arcgis就可以直...
ArcGIS API for JavaScript 加载百度地图
idomyway的博客
03-27 8141
前言 &nbsp;&nbsp;&nbsp;&nbsp;有时我们在面对需要使用百度地图作为地图的场景，我们可以通过对百度地图，百度卫星图，百度标注图层进行加载通过在网上查阅，得到了比较合适的坐标转换 加载百度地图 &nbsp;&nbsp;BDVecLayer.js define(["dojo/_base/declare", "esri/layers/TiledMapS...
Openlayers3 加载百度地图，天地图
weixin_34405557的博客
07-19 397
2019独角兽企业重金招聘Python工程师标准>>> ...
Arcgis Server api for javascript加载天地图
weixin_30435261的博客
10-15 87
原理 　　在API中，使用ArcGISTileMapServiceLayer来加载瓦片地图，除了天地图之外，GOOGLE和BING的地图也采用这种方法进行加载。使用该地图类型加载，需要对几个地方进行修改： 1、空间坐标系（this.spatialReference） 2、地图范围（this.initialExtent） 3、瓦片地图信息（this.tileInfo），这里需要对esri...
如何用ArcGIS API for JavaScript 抓取切片的百度地图和高德地图
weixin_40425232的博客
07-30 549
首先需要建立抓取不同图层并切片的js文件，并通过 js文件返回url //有需要的话可以通过访问以下github链接进行获取 //https://github.com/WaitouHo/Designing-And-Developing-for-GIS //首先给出baidu地图的js define(["dojo/_base/declare", "esri/layers/TiledMapServiceLayer", "esri/geometry/Extent", "esri/SpatialReferen
arcgis api for js 加载百度地图
HPUGIS的博客
05-12 3671
最近在研究加载第三方的地图，由于作者是小白昨天整花了一天的事件无法把网上给的东西加载出来，这里首先要了解Dojo前端框架，这款js框架是模块化编程，可以有点类似C#的类库，本文从https://blog.csdn.net/gisshixisheng/article/details/44494715学习很多，但是一直无法调试成功，最终调试成功进行过程详细的剖析。一、首先了解Dojo模块的定义（这里定...
ArcGIS API for JS 加载高德、天地图、百度地图
weixin_45024732的博客
09-16 1553
封装三种地图的js文件，用的时候直接引用，new一下即可 高德地图------gaodeLayer.js define(["dojo/_base/declare", "esri/geometry/Extent", "esri/SpatialReference", "esri/geometry/Point", "esri/layers/TileInfo", "esri/layers/TiledMapServiceLayer"], function (declar.
cesium 加载天地图、谷歌影像、arcGis
热门推荐
fk129
07-27 1万+
//初始化 earth.viewer = new Cesium.Viewer(‘cesiumEarth’, { //需要进行可视化的数据源的集合 animation: false, //是否显示动画控件 shouldAnimate : true, homeButton: fal...
Arcgis js api二次开发——加载国家天地图
niuge8905的博客
07-10 794
Arcgis js api二次开发——加载国家天地图
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、付费专栏及课程。

余额充值