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

Posted 疯子加天才

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了arcgis api for javascipt 加载天地图百度地图相关的知识,希望对你有一定的参考价值。

写在前面的话:

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

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

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

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

 

 

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

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

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
define(["dojo/_base/declare",
    "esri/layers/tiled"],
    function (declare) {
        return declare(esri.layers.TiledMapServiceLayer, {
            constructor: function () {
                this.spatialReference = new esri.SpatialReference({ wkid: 4326 });
                this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-180.0, -90.0, 180.0, 90.0, this.spatialReference));
                this.tileInfo = new esri.layers.TileInfo({
                    "rows": 256,
                    "cols": 256,
                    "compressionQuality": 0,
                    "origin": {
                        "x": -180,
                        "y": 90
                    },
                    "spatialReference": {
                        "wkid": 4326
                    },
                    "lods": [
                        { "level": 2, "resolution": 0.3515625, "scale": 147748796.52937502 },
                        { "level": 3, "resolution": 0.17578125, "scale": 73874398.264687508 },
                        { "level": 4, "resolution": 0.087890625, "scale": 36937199.132343754 },
                        { "level": 5, "resolution": 0.0439453125, "scale": 18468599.566171877 },
                        { "level": 6, "resolution": 0.02197265625, "scale": 9234299.7830859385 },
                        { "level": 7, "resolution": 0.010986328125, "scale": 4617149.8915429693 },
                        { "level": 8, "resolution": 0.0054931640625, "scale": 2308574.9457714846 },
                        { "level": 9, "resolution": 0.00274658203125, "scale": 1154287.4728857423 },
                        { "level": 10, "resolution": 0.001373291015625, "scale": 577143.73644287116 },
                        { "level": 11, "resolution": 0.0006866455078125, "scale": 288571.86822143558 },
                        { "level": 12, "resolution": 0.00034332275390625, "scale": 144285.93411071779 },
                        { "level": 13, "resolution": 0.000171661376953125, "scale": 72142.967055358895 },
                        { "level": 14, "resolution": 8.58306884765625e-005, "scale": 36071.483527679447 },
                        { "level": 15, "resolution": 4.291534423828125e-005, "scale": 18035.741763839724 },
                        { "level": 16, "resolution": 2.1457672119140625e-005, "scale": 9017.8708819198619 },
                        { "level": 17, "resolution": 1.0728836059570313e-005, "scale": 4508.9354409599309 },
                        { "level": 18, "resolution": 5.3644180297851563e-006, "scale": 2254.4677204799655 }
                    ]
                });
                this.loaded = true;
                this.onLoad(this);
            },
            getTileUrl: function (level, row, col) {
                return "http://t" + col % 8 + ".tianditu.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";
            }
        });
    });


2、切片标注——TDTAnnoLayer.js

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
define(["dojo/_base/declare",
    "esri/layers/tiled"],
    function (declare) {
        return declare(esri.layers.TiledMapServiceLayer, {
            constructor: function () {
                this.spatialReference = new esri.SpatialReference({ wkid: 4326 });
                this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-180.0, -90.0, 180.0, 90.0, this.spatialReference));
                this.tileInfo = new esri.layers.TileInfo({
                    "rows": 256,
                    "cols": 256,
                    "compressionQuality": 0,
                    "origin": {
                        "x": -180,
                        "y": 90
                    },
                    "spatialReference": {
                        "wkid": 4326
                    },
                    "lods": [
                        { "level": 2, "resolution": 0.3515625, "scale": 147748796.52937502 },
                        { "level": 3, "resolution": 0.17578125, "scale": 73874398.264687508 },
                        { "level": 4, "resolution": 0.087890625, "scale": 36937199.132343754 },
                        { "level": 5, "resolution": 0.0439453125, "scale": 18468599.566171877 },
                        { "level": 6, "resolution": 0.02197265625, "scale": 9234299.7830859385 },
                        { "level": 7, "resolution": 0.010986328125, "scale": 4617149.8915429693 },
                        { "level": 8, "resolution": 0.0054931640625, "scale": 2308574.9457714846 },
                        { "level": 9, "resolution": 0.00274658203125, "scale": 1154287.4728857423 },
                        { "level": 10, "resolution": 0.001373291015625, "scale": 577143.73644287116 },
                        { "level": 11, "resolution": 0.0006866455078125, "scale": 288571.86822143558 },
                        { "level": 12, "resolution": 0.00034332275390625, "scale": 144285.93411071779 },
                        { "level": 13, "resolution": 0.000171661376953125, "scale": 72142.967055358895 },
                        { "level": 14, "resolution": 8.58306884765625e-005, "scale": 36071.483527679447 },
                        { "level": 15, "resolution": 4.291534423828125e-005, "scale": 18035.741763839724 },
                        { "level": 16, "resolution": 2.1457672119140625e-005, "scale": 9017.8708819198619 },
                        { "level": 17, "resolution": 1.0728836059570313e-005, "scale": 4508.9354409599309 },
                        { "level": 18, "resolution": 5.3644180297851563e-006, "scale": 2254.4677204799655 }
                    ]
                });
                this.loaded = true;
                this.onLoad(this);
            },
            getTileUrl: function (level, row, col) {
                return "http://t" + row % 8 + ".tianditu.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";
            }
        });
    });


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

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
    dojoConfig = {
        parseOnLoad: true,
        packages: [{
            name: \'tdlib\',
            location: this.location.pathname.replace(/\\/[^/]+$/, "")+"/js/tdlib"
        }]
    };
</script>
<script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
<script>
    require(["tdlib/TDTLayer",
        "tdlib/TDTAnnoLayer"],
    function (TDTLayer,
         TDTAnnoLayer
    ){
        var basemap = new TDTLayer();
        map.addLayer(basemap);
        var annolayer = new TDTAnnoLayer();
        map.addLayer(annolayer);
    });
</script><br><br><span style="color: rgb(128, 0, 0);">完整调用代码:<br></span>
1
<strong>[javascript]</strong> <a title="view plain" class="ViewSource" href="http://blog.csdn.net/gisshixisheng/article/details/44853709#">view plain</a><span data-mod="popu_168"> <a title="copy" class="CopyToClipboard" href="http://blog.csdn.net/gisshixisheng/article/details/44853709#">copy</a><span data-mod="popu_169"> <a title="print" class="PrintSource" href="http://blog.csdn.net/gisshixisheng/article/details/44853709#">print</a><a title="?" class="About" href="http://blog.csdn.net/gisshixisheng/article/details/44853709#">?</a><span class="tracking-ad" data-mod="popu_167"><a title="在CODE上查看代码片" style="text-indent: 0px;" href="https://code.csdn.net/snippets/635113" target="_blank"><img width="12" height="12" style="left: 2px; top: 1px; position: relative;" alt="在CODE上查看代码片" src="https://code.csdn.net/assets/CODE_ico.png"></a><span class="tracking-ad" data-mod="popu_170"><a title="派生到我的代码片" style="text-indent: 0px;" href="https://code.csdn.net/snippets/635113/fork" target="_blank"><img width="12" height="12" style="left: 2px; top: 2px; position: relative;" alt="派生到我的代码片" src="https://code.csdn.net/assets/ico_fork.svg"></a></span></span></span></span>
1
<span style="color: rgb(128, 0, 0);"><br><br><br><!DOCTYPE html><br><html><br><head><br>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br>    <title>Baidu Map</title><br>   <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css"><br>    <style><br>        html, body, #map {<br>            height: 100%;<br>            margin: 0;<br>            padding: 0;<br>        }<br>        .base-map-ano{<br>            position: absolute;<br>            right: 0pt;<br>            top:18pt;<br>            background: #e6edf1;<br>            border: #96aed1 1px solid;<br>            padding: 4px 5px;<br>            padding-left: 0px;<br>            padding-top: 0px;<br>            display: none;<br>            font-weight: normal;<br>        }<br>        .base-map{<br>            position: absolute;<br>            right: 15pt;<br>            top:15pt;<br>            background: #f0f0f0;<br>            border: #96aed1 1px solid;<br>            width: auto;<br>            height: auto;<br>            z-index: 99;<br>            font:normal 11px "宋体",Arial;<br>            color:#868686;<br>        }<br>        .base-map-switch{<br>            padding: 4px 8px;<br>            float: left;<br>        }<br>        .base-map-switch-active{<br>            background:#e6edf1;<br>            font-weight: bold;<br>            color: #4d4d4d;<br>        }<br>        .base-map-switch:hover{<br>            cursor: pointer;<br>        }<br>        .base-map-switch-center{<br>            border: 1px #96aed1 solid;<br>            border-top:none;<br>            border-bottom:none;<br>        }<br>    </style><br>    <script type="text/javascript"><br>        dojoConfig = {<br>            parseO

以上是关于arcgis api for javascipt 加载天地图百度地图的主要内容,如果未能解决你的问题,请参考以下文章

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

在arcgis api for js中能修改百度地图的样式吗

ArcGIS API for JavaScript经典例子

无法从 ArcGIS API for Python 检索 ArcGIS 角色

arcgis api for javascript 4.10版本的本地部署

arcgis api for javascript怎么加载天地图的影像图

(c)2006-2024 SYSTEM All Rights Reserved IT常识