写在前面的话：
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 | |
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 | |
封装好之后就可以在页面调用了，调用的时候需要导入这些自定义的图层，导入方式为：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | |
?
1 | |
1 | |
BDAnoLayer.js
[javascript] view plain copy print?
- define(["dojo/_base/declare",
- "esri/layers/tiled"],
- function (declare) {
- return declare(esri.layers.TiledMapServiceLayer, {
- constructor: function () {
- this.spatialReference = new esri.SpatialReference({ wkid: 102100 });
- this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892, this.spatialReference));
- this.scale = [591657527.591555,295828763.795777,147914381.897889,73957190.948944,36978595.474472,18489297.737236,9244648.868618,
- 4622324.434309,2311162.217155,1155581.108577,577790.554289,288895.277144,144447.638572,72223.819286,
- 36111.9096437,18055.9548224,9027.977411,4513.988705,2256.994353,1128.497176];
- this.resolution = [156543.033928,78271.5169639999,39135.7584820001,19567.8792409999,9783.93962049996,4891.96981024998,2445.98490512499,
- 1222.99245256249,611.49622628138,305.748113140558,152.874056570411,76.4370282850732,38.2185141425366,19.1092570712683,9.55462853563415,
- 4.77731426794937,2.38865713397468,1.19432856685505,0.597164283559817,0.298582141647617];
- this.tileInfo = new esri.layers.TileInfo({
- "rows": 256,
- "cols": 256,
- "compressionQuality": 90,
- "origin": {
- "x": -20037508.3427892,
- "y": 20037508.3427892
- },
- "spatialReference": this.spatialReference,
- "lods": [{ "level": 0, "resolution": this.resolution[0], "scale": this.scale[0] },
- { "level": 1, "resolution": this.resolution[1], "scale": this.scale[1] },
- { "level": 2, "resolution": this.resolution[2], "scale": this.scale[2] },
- { "level": 3, "resolution": this.resolution[3], "scale": this.scale[3] },
- { "level": 4, "resolution": this.resolution[4], "scale": this.scale[4] },
- { "level": 5, "resolution": this.resolution[5], "scale": this.scale[5] },
- { "level": 6, "resolution": this.resolution[6], "scale": this.scale[6] },
- { "level": 7, "resolution": this.resolution[7], "scale": this.scale[7] },
- { "level": 8, "resolution": this.resolution[8], "scale": this.scale[8] },
- { "level": 9, "resolution": this.resolution[9], "scale": this.scale[9] },
- { "level": 10, "resolution": this.resolution[10], "scale": this.scale[10] },
- { "level": 11, "resolution": this.resolution[11], "scale": this.scale[11] },
- { "level": 12, "resolution": this.resolution[12], "scale": this.scale[12] },
- { "level": 13, "resolution": this.resolution[13], "scale": this.scale[13] },
- { "level": 14, "resolution": this.resolution[14], "scale": this.scale[14] },
- { "level": 15, "resolution": this.resolution[15], "scale": this.scale[15] },
- { "level": 16, "resolution": this.resolution[16], "scale": this.scale[16] },
- { "level": 17, "resolution": this.resolution[17], "scale": this.scale[17] },
- { "level": 18, "resolution": this.resolution[18], "scale": this.scale[18] },
- { "level": 19, "resolution": this.resolution[19], "scale": this.scale[19] }
- ]
- });
- this.loaded = true;
- this.onLoad(this);
- },
- getTileUrl: function (level, row, col) {
- var zoom = level - 1;
- var offsetX = parseInt(Math.pow(2, zoom));
- var offsetY = offsetX - 1;
- var numX = col - offsetX, numY = (-row) + offsetY ;
- var num = (col + row) % 8 + 1;
- return "http://online" + num + ".map.bdimg.com/tile/?qt=tile&x="+numX+"&y="+numY+"&z="+level+"&styles=sl&udt=20141015";
- }
- });
- });
BDVecLayer.js
[javascript] view plain copy print
- define(["dojo/_base/declare",
- "esri/layers/tiled"],
- function (declare) {
- return declare(esri.layers.TiledMapServiceLayer, {
- constructor: function () {
- this.spatialReference = new esri.SpatialReference({ wkid: 102100 });
- this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892, this.spatialReference));
- this.scale = [591657527.591555,295828763.795777,147914381.897889,73957190.948944,36978595.474472,18489297.737236,9244648.868618,
- 4622324.434309,2311162.217155,1155581.108577,577790.554289,288895.277144,144447.638572,72223.819286,
- 36111.9096437,18055.9548224,9027.977411,4513.988705,2256.994353,1128.497176];
- this.resolution = [156543.033928,78271.5169639999,39135.7584820001,19567.8792409999,9783.93962049996,4891.96981024998,2445.98490512499,
- 1222.99245256249,611.49622628138,305.748113140558,152.874056570411,76.4370282850732,38.2185141425366,19.1092570712683,9.55462853563415,
- 4.77731426794937,2.38865713397468,1.19432856685505,0.597164283559817,0.298582141647617];
- this.tileInfo = new esri.layers.TileInfo({
- "rows": 256,
- "cols": 256,
- "compressionQuality": 90,
- "origin": {
- "x": -20037508.3427892,
- "y": 20037508.3427892
- },
- "spatialReference": this.spatialReference,
- "lods": [{ "level": 0, "resolution": this.resolution[0], "scale": this.scale[0] },
- { "level": 1, "resolution": this.resolution[1], "scale": this.scale[1] },
- { "level": 2, "resolution": this.resolution[2], "scale": this.scale[2] },
- { "level": 3, "resolution": this.resolution[3], "scale": this.scale[3] },
- { "level": 4, "resolution": this.resolution[4], "scale": this.scale[4] },
- { "level": 5, "resolution": this.resolution[5], "scale": this.scale[5] },
- { "level": 6, "resolution": this.resolution[6], "scale": this.scale[6] },
- { "level": 7, "resolution": this.resolution[7], "scale": this.scale[7] },
- { "level": 8, "resolution": this.resolution[8], "scale": this.scale[8] },
- { "level": 9, "resolution": this.resolution[9], "scale": this.scale[9] },
- { "level": 10, "resolution": this.resolution[10], "scale": this.scale[10] },
- { "level": 11, "resolution": this.resolution[11], "scale": this.scale[11] },
- { "level": 12, "resolution": this.resolution[12], "scale": this.scale[12] },
- { "level": 13, "resolution": this.resolution[13], "scale": this.scale[13] },
- { "level": 14, "resolution": this.resolution[14], "scale": this.scale[14] },
- { "level": 15, "resolution": this.resolution[15], "scale": this.scale[15] },
- { "level": 16, "resolution": this.resolution[16], "scale": this.scale[16] },
- { "level": 17, "resolution": this.resolution[17], "scale": this.scale[17] },
- { "level": 18, "resolution": this.resolution[18], "scale": this.scale[18] },
- { "level": 19, "resolution": this.resolution[19], "scale": this.scale[19] }
- ]
- });
- this.loaded = true;
- this.onLoad(this);
- },
- getTileUrl: function (level, row, col) {
- var zoom = level - 1;
- var offsetX = parseInt(Math.pow(2, zoom));
- var offsetY = offsetX - 1;
- var numX = col - offsetX, numY = (-row) + offsetY ;
- var num = (col + row) % 8 + 1;
- return "http://online" + num + ".map.bdimg.com/tile/?qt=tile&x="+numX+"&y="+numY+"&z="+level+"&styles=pl&scaler=1&udt=20141103";
- }
- });
- });
BDimgLayer.js
[javascript] view plain copy print?
- define(["dojo/_base/declare",
- "esri/layers/tiled"],
- function (declare) {
- return declare(esri.layers.TiledMapServiceLayer, {
- constructor: function () {
- this.spatialReference = new esri.SpatialReference({ wkid: 102100 });
- this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892, this.spatialReference));
- this.scale = [591657527.591555,295828763.795777,147914381.897889,73957190.948944,36978595.474472,18489297.737236,9244648.868618,
- 4622324.434309,2311162.217155,1155581.108577,577790.554289,288895.277144,144447.638572,72223.819286,
- 36111.9096437,18055.9548224,9027.977411,4513.988705,2256.994353,1128.497176];
- this.resolution = [156543.033928,78271.5169639999,39135.7584820001,19567.8792409999,9783.93962049996,4891.96981024998,2445.98490512499,
- 1222.99245256249,611.49622628138,305.748113140558,152.874056570411,76.4370282850732,38.2185141425366,19.1092570712683,9.55462853563415,
- 4.77731426794937,2.38865713397468,1.19432856685505,0.597164283559817,0.298582141647617];
- this.tileInfo = new esri.layers.TileInfo({
- "rows": 256,
- "cols": 256,
- "compressionQuality": 90,
- "origin": {
- "x": -20037508.3427892,
- "y": 20037508.3427892
- },
- "spatialReference": this.spatialReference,
- "lods": [{ "level": 0, "resolution": this.resolution[0], "scale": this.scale[0] },
- { "level": 1, "resolution": this.resolution[1], "scale": this.scale[1] },
- { "level": 2, "resolution": this.resolution[2], "scale": this.scale[2] },
- { "level": 3, "resolution": this.resolution[3], "scale": this.scale[3] },
- { "level": 4, "resolution": this.resolution[4], "scale": this.scale[4] },
- { "level": 5, "resolution": this.resolution[5], "scale": this.scale[5] },
- { "level": 6, "resolution": this.resolution[6], "scale": this.scale[6] },
- { "level": 7, "resolution": this.resolution[7], "scale": this.scale[7] },
- { "level": 8, "resolution": this.resolution[8], "scale": this.scale[8] },
- { "level": 9, "resolution": this.resolution[9], "scale": this.scale[9] },
- { "level": 10, "resolution": this.resolution[10], "scale": this.scale[10] },
- { "level": 11, "resolution": this.resolution[11], "scale": this.scale[11] },
- { "level": 12, "resolution": this.resolution[12], "scale": this.scale[12] },
- { "level": 13, "resolution": this.resolution[13], "scale": this.scale[13] },
- { "level": 14, "resolution": this.resolution[14], "scale": this.scale[14] },
- { "level": 15, "resolution": this.resolution[15], "scale": this.scale[15] },
- { "level": 16, "resolution": this.resolution[16], "scale": this.scale[16] },
- { "level": 17, "resolution": this.resolution[17], "scale": this.scale[17] },
- { "level": 18, "resolution": this.resolution[18], "scale": this.scale[18] },
- { "level": 19, "resolution": this.resolution[19], "scale": this.scale[19] }
- ]
- });
- this.loaded = true;
- this.onLoad(this);
- },
- getTileUrl: function (level, row, col) {
- var zoom = level - 1;
- var offsetX = parseInt(Math.pow(2, zoom));
- var offsetY = offsetX - 1;
- var numX = col - offsetX, numY = (-row) + offsetY ;
- var num = (col + row) % 8 + 1;
- return "http://shangetu" + num + ".map.bdimg.com/it/u=x="+numX+";y="+numY+";z="+level+";v=009;type=sate&fm=46&udt=20141015";
- }
- });
- });
1 2 | |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
- <style type="text/css">
- body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
- </style>
- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥"></script>
- <title>地图展示</title>
- </head>
- <body>
- <div id="allmap"></div>
- </body>
- </html>
- <script type="text/javascript">
- // 百度地图API功能
- var map = new BMap.Map("allmap"); // 创建Map实例
- map.centerAndZoom(new BMap.Point(116.404, 39.915), 5); // 初始化地图,设置中心点坐标和地图级别
- map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
- map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
- map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
- </script>
1 | |
