百度地图、高德地图、Google地图等坐标提取与转换
1、地理坐标系与投影坐标系
地理坐标系也就是球面坐标系，是将本不是椭球体的地球进行椭球体化，从而形成球面坐标体系，国际标准的地理坐标系就是WGS-84坐标系；
只不过各个国家为了反映该国家所在区域地球的真实形状，采用不同的数学模型对地球进行椭球体化，所以就有个Beijing54、Xian80坐标系。
投影坐标系是为平面坐标，是将地理坐标根据一定的投影规则投影到平面，形成的平面直角坐标系，比如高斯-克吕格投影，墨卡托投影等。
2、WGS-84坐标系
WGS-84坐标是地理坐标系，也就是GPS坐标，一般用国际标准的GPS记录仪记录下来的坐标，都是GPS的坐标。但是在中国为了保密，任何一个地图产品都不允许使用GPS坐标。GPS坐标以度分秒形式表示经纬度，比如google earth上采集到的是39°31'20.51，那么应该这样换算，31分就是31/60度，20.51秒就是20.51/3600度，结果就是39+ 31/60 + 20.51/3600 度。
3、GCJ－02坐标系 与 百度 bd-09坐标系
GCJ－02坐标系又名“火星坐标系”，是我国国测局独创的坐标体系，由WGS－84加密而成，在国内，必须至少使用GCJ－02坐标系，或者使用在GCJ－02加密后再进行加密的坐标系，如百度坐标系。高德和Google在国内都是使用GCJ－02坐标系，可以说，GCJ－02是国内最广泛使用的坐标系。
百度坐标系是在GCJ－02坐标系的基础上再次加密偏移后形成的坐标系，只适用于百度地图。（当然，百度地图api接口提供了google坐标转百度坐标、原始坐标转百度坐标的接口，网上也有一些转换算法，个人建议还是用百度地图api比较准确）
4、WGS84 Web Mercator 坐标系
我们在做开发的时候，尤其是web地图开发，两种坐标系至关重要 WGS84（WKID：4326） 和 WGS84 Web Mercator （WKID：102113） 。WGS84 Web Mercator 是目前在线地图（平面）采用的通用坐标系，属于投影坐标系。
5、测试
测试方法：
①使用arcgis api for javascript 调用 Google卫星地图服务；
②在①的基础上调用arcgis api for javascript 绘制折现的工具，在卫星影像图中辨识并绘制一条道路，将其坐标点经纬度（这里输出的应该是GCJ－02火星坐标系吧？我不确定，有知道的望留言！）输出到控制台；
③使用高德地图API将②获取到的坐标点集绘制成折线，比较从Google地图中获取到的点集坐标在高德地图中是否有偏差？
④使用百度地图API将②获取到的坐标点集绘制成折线，比较从Google地图中获取到的点集坐标在百度地图中是否有偏差？
Google地图相关代码：
@using Drision.Framework.Mvc; @{ ViewBag.Title = "Google地图"; <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css" /> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css" /> <script type="text/javascript" src="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/init.js"></script> } <style> /*地图样式调整*/ .esriPopup .titlePane { padding-left: 0px; } .esriPopup .actionsPane .zoomTo { display: none; } .esriPopup .titleButton.maximize { display: none; } .esriPopup .titleButton.close { display: none; } </style> <style> @@media(min-width: 768px) { .container { max-width: 100%; } } @@media(min-width: 992px) { .container { max-width: 100%; } } @@media(min-width: 1200px) { .container { max-width: 100%; } } @@media(min-width: 1600px) { .container { max-width: 100%; } } </style> <style> /* ===========悬浮菜单栏===========*/ #controls { /*background: #fff;*/ /*border: 1px solid #9e9fa1;*/ /*box-shadow: 0 5px 4px rgba(0,0,0,.15);*/ color: #7c8196; font-family: sans-serif; height: 40px; top: 3.8em; position: absolute; width: auto; z-index: 40; border-radius: 4px; padding: 0.1em 0.3em 0 0.3em; right: 1em !important; } </style> <div style="padding: 1px;"> <div id="mapDiv" style="min-width: 1260px; min-height: 860px;"></div> <div id="controls"> <button class="btn btn-info" id="polyline">绘制折线</button> <button class="btn btn-danger" id="remove">清除</button> <button class="btn btn-danger" id="quxiao">取消绘制</button> </div> </div> <script> dojo.require("esri/map", "dojo/dom", "dojo/on", "dojo/colors", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/GraphicsLayer", "esri/geometry/Point", "esri/geometry/Polygon", "esri/SpatialReference", "esri/toolbars/draw", "esri/graphic", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/symbols/PictureMarkerSymbol", "dojo/parser", "dijit/registry", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"); function init(Map, dom, on, Color, ArcGISTiledMapServiceLayer, GraphicsLayer, Point, Polygon, SpatialReference, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, PictureMarkerSymbol, Draw, Graphic, parser, registry ) { loadGoogLyr(); var map = new esri.Map("mapDiv", { logo: false, //basemap: "streets", center: [120.6168, 31.42], slider: false, zoom: 9, showLabels: true, }); map.addLayer(new GoogleMapLayer()); map.addLayer(new GoogleMapAnooLayer()); //*************************** 以下为自定义图层 ********************************* //======== 地图中添加绘制层 ======= var gl = new esri.layers.GraphicsLayer({ id: "bound" }); map.addLayer(gl); //======== 添加道路线 ======= var line = new esri.geometry.Polyline({ "paths": [[ [120.50459959285944, 31.235715080384875], [120.51335432308402, 31.23696268129648], [120.517130873377, 31.2373296196055], [120.51961996334282, 31.237843330843624], [120.5306062914678, 31.238430425980763], [120.53300955074512, 31.23850381261634], [120.5356703020879, 31.23909090364859], [120.54219343441213, 31.24077877004094], [120.54511167782032, 31.24107230894344], [120.54725744503222, 31.242099687918223], [120.54923155086718, 31.24584218824886], [120.5501756884404, 31.24679613520138], [120.55172064083301, 31.24760331355749], [120.55618383663376, 31.248997514466723], [120.55953123348435, 31.250024807227433], [120.56287863033494, 31.25090533498366], [120.56399442928513, 31.25149234892578], [120.56759931820115, 31.255234477009502], [120.5724916674443, 31.25662856523398], [120.57540991085249, 31.2572155435902], [120.57892896908001, 31.259269939092558], [120.58304884212689, 31.26227808040296], [120.58708288448528, 31.263231861286453], [120.60639478939247, 31.26557958854718], [120.61523535030554, 31.26668006559397], [120.62845327633093, 31.267193617156938], [120.63540556209752, 31.267487073938], [120.63961126583287, 31.26763380198627], [120.64261533992953, 31.26763380198627], [120.64510442989535, 31.267927257398295], [120.64931013363069, 31.26844080217318], [120.65008260982698, 31.268587528738323], [120.65008260982698, 31.268587528738323] ]], "spatialReference": { "wkid": 4326 } //这里我将绘制道路提取出来的坐标点集又放入Google地图，但是用的是 wkid 4326（WGS-84坐标系） }); //有点混乱，照理讲这个坐标应该是 GCJ-02火星坐标系的，为什么用4326才能正常显示？如果我用GPS设备提取的坐标值呢？ var lineSymbol = new esri.symbol.CartographicLineSymbol( esri.symbol.CartographicLineSymbol.STYLE_SOLID, new dojo.Color("#0000FF"), 2, esri.symbol.CartographicLineSymbol.CAP_ROUND, esri.symbol.CartographicLineSymbol.JOIN_MITER, 5 ); var polyline = new esri.Graphic(line, lineSymbol); gl.add(polyline); ////============== 以下为绘制线操作 ====================== var draw = new esri.toolbars.Draw(map); //定义图形样式 draw.markerSymbol = new esri.symbol.SimpleMarkerSymbol(); draw.lineSymbol = new esri.symbol.SimpleLineSymbol( esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3 ); draw.fillSymbol = new esri.symbol.SimpleFillSymbol(); $("#controls button").click(function () { var tool = null; switch (this.id) { case "point": tool = "POINT"; break; case "polyline": tool = "POLYLINE"; break; case "polygon": tool = "POLYGON"; break; case "circle": tool = "CIRCLE"; break; case "rectangle": tool = "RECTANGLE"; break; case "quxiao": draw.deactivate(); break; case "remove": map.graphics.clear(); break; } if (tool !== null) { draw.activate(esri.toolbars.Draw[tool]); //激活对应的绘制工具 } }); draw.on("draw-complete", drawEndEvent); function drawEndEvent(evt) { //添加图形到地图 var symbol; if (evt.geometry.type === "point" || evt.geometry.type === "multipoint") { symbol = draw.markerSymbol; } else if (evt.geometry.type === "line" || evt.geometry.type === "polyline") { symbol = draw.lineSymbol; } else { symbol = draw.fillSymbol; } map.graphics.add(new esri.Graphic(evt.geometry, symbol)) //将经纬度坐标点集输出到控制台(这里输出的是火星坐标系的经纬度？) var output = ""; for (var i = 0; i < evt.geographicGeometry.paths[0].length; i++) { output += "[" + evt.geographicGeometry.paths[0][i][0] + "," + evt.geographicGeometry.paths[0][i][1] + "],\r\n"; } console.log(output); } } function loadGoogLyr() { //遥感影像图 dojo.declare("GoogleMapLayer", esri.layers.TiledMapServiceLayer, { // create WMTSLayer by extending esri.layers.TiledMapServiceLayer constructor: function () { this.spatialReference = new esri.SpatialReference({ wkid: 102113 }); this.initialExtent = new esri.geometry.Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, this.spatialReference); this.fullExtent = new esri.geometry.Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, this.spatialReference); // this.tileInfo = new esri.layers.TileInfo({ "dpi": "90.71428571427429", "format": "image/png", "compressionQuality": 0, "spatialReference": { "wkid": "3857" }, "rows": 256, "cols": 256, "origin": { "x": -20037508.342787, "y": 20037508.342787 }, // Scales in DPI 96 "lods": [{ "level": 0, "scale": 591657527.591555, "resolution": 156543.033928 }, { "level": 1, "scale": 295828763.795777, "resolution": 78271.5169639999 }, { "level": 2, "scale": 147914381.897889, "resolution": 39135.7584820001 }, { "level": 3, "scale": 73957190.948944, "resolution": 19567.8792409999 }, { "level": 4, "scale": 36978595.474472, "resolution": 9783.93962049996 }, { "level": 5, "scale": 18489297.737236, "resolution": 4891.96981024998 }, { "level": 6, "scale": 9244648.868618, "resolution": 2445.98490512499 }, { "level": 7, "scale": 4622324.434309, "resolution": 1222.99245256249 }, { "level": 8, "scale": 2311162.217155, "resolution": 611.49622628138 }, { "level": 9, "scale": 1155581.108577, "resolution": 305.748113140558 }, { "level": 10, "scale": 577790.554289, "resolution": 152.874056570411 }, { "level": 11, "scale": 288895.277144, "resolution": 76.4370282850732 }, { "level": 12, "scale": 144447.638572, "resolution": 38.2185141425366 }, { "level": 13, "scale": 72223.819286, "resolution": 19.1092570712683 }, { "level": 14, "scale": 36111.909643, "resolution": 9.55462853563415 }, { "level": 15, "scale": 18055.954822, "resolution": 4.77731426794937 }, { "level": 16, "scale": 9027.977411, "resolution": 2.38865713397468 }, { "level": 17, "scale": 4513.988705, "resolution": 1.19432856685505 }, { "level": 18, "scale": 2256.994353, "resolution": 0.597164283559817 }, { "level": 19, "scale": 1128.497176, "resolution": 0.298582141647617 }] }); this.loaded = true; this.onLoad(this); }, getTileUrl: function (level, row, col) { return "http://mt" + (col % 4) + ".google.cn/vt/lyrs=s@112&hl=zh-CN&gl=cn&" + "x=" + col + "&" + "y=" + row + "&" + "z=" + level + "&s="; } }); //标注矢量图 dojo.declare("GoogleMapAnooLayer", esri.layers.TiledMapServiceLayer, { // create WMTSLayer by extending esri.layers.TiledMapServiceLayer constructor: function () { this.spatialReference = new esri.SpatialReference({ wkid: 102113 }); this.initialExtent = new esri.geometry.Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, this.spatialReference); this.fullExtent = new esri.geometry.Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, this.spatialReference); // this.tileInfo = new esri.layers.TileInfo({ "dpi": "90.71428571427429", "format": "image/png", "compressionQuality": 0, "spatialReference": { "wkid": "3857" }, "rows": 256, "cols": 256, "origin": { "x": -20037508.342787, "y": 20037508.342787 }, // Scales in DPI 96 "lods": [{ "level": 0, "scale": 591657527.591555, "resolution": 156543.033928 }, { "level": 1, "scale": 295828763.795777, "resolution": 78271.5169639999 }, { "level": 2, "scale": 147914381.897889, "resolution": 39135.7584820001 }, { "level": 3, "scale": 73957190.948944, "resolution": 19567.8792409999 }, { "level": 4, "scale": 36978595.474472, "resolution": 9783.93962049996 }, { "level": 5, "scale": 18489297.737236, "resolution": 4891.96981024998 }, { "level": 6, "scale": 9244648.868618, "resolution": 2445.98490512499 }, { "level": 7, "scale": 4622324.434309, "resolution": 1222.99245256249 }, { "level": 8, "scale": 2311162.217155, "resolution": 611.49622628138 }, { "level": 9, "scale": 1155581.108577, "resolution": 305.748113140558 }, { "level": 10, "scale": 577790.554289, "resolution": 152.874056570411 }, { "level": 11, "scale": 288895.277144, "resolution": 76.4370282850732 }, { "level": 12, "scale": 144447.638572, "resolution": 38.2185141425366 }, { "level": 13, "scale": 72223.819286, "resolution": 19.1092570712683 }, { "level": 14, "scale": 36111.909643, "resolution": 9.55462853563415 }, { "level": 15, "scale": 18055.954822, "resolution": 4.77731426794937 }, { "level": 16, "scale": 9027.977411, "resolution": 2.38865713397468 }, { "level": 17, "scale": 4513.988705, "resolution": 1.19432856685505 }, { "level": 18, "scale": 2256.994353, "resolution": 0.597164283559817 }, { "level": 19, "scale": 1128.497176, "resolution": 0.298582141647617 }] }); this.loaded = true; this.onLoad(this); }, getTileUrl: function (level, row, col) { return "http://mt" + (col % 4) + ".google.cn/vt/lyrs=h@177000000&hl=zh-CN&gl=cn&" + "x=" + col + "&" + "y=" + row + "&" + "z=" + level + "&s="; } }); } dojo.ready(init); </script>
实现效果：
高德地图相关代码：
@{ ViewBag.Title = "高德地图"; <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.1&key= xxx（这里是key） &plugin=AMap.Geocoder,AMap.ToolBar"></script> } <style> /* ===========悬浮菜单栏===========*/ #controls { /*background: #fff;*/ /*border: 1px solid #9e9fa1;*/ /*box-shadow: 0 5px 4px rgba(0,0,0,.15);*/ color: #7c8196; font-family: sans-serif; height: 40px; top: 3.8em; position: absolute; width: auto; z-index: 40; border-radius: 4px; padding: 0.1em 0.3em 0 0.3em; right: 1em !important; } </style> <div style="padding: 1px; width: 100%; height: 100%;"> <div id="container" style="width:100%; height:100%;"></div> <div id="controls"> <button class="btn btn-info" id="RemotePhoto">卫星显示</button> <button class="btn btn-info" id="RoadGrid">路网显示</button> </div> </div> <script> var map = new AMap.Map('container', { resizeEnable: true, center: [120.6168, 31.42], //layers: [new AMap.TileLayer.Satellite()], //卫星图 zoom: 9 }); var roadNetLayer = new AMap.TileLayer.RoadNet({ zIndex: 12 }); //实例化路网图层 roadNetLayer.setMap(map); //在map中添加路网图层 var satellLayer = new AMap.TileLayer.Satellite({ zIndex: 11 }); //实例化卫星图 satellLayer.setMap(map); //在map中添加卫星图 var showRemote = true; var showRoad = true; $("#RemotePhoto").click(function () { if (showRemote == true) { $(this).removeClass("btn-info").addClass("btn-danger"); showRemote = false; satellLayer.hide(); } else { $(this).removeClass("btn-danger").addClass("btn-info"); showRemote = true; satellLayer.show(); } }); $("#RoadGrid").click(function () { if (showRoad == true) { $(this).removeClass("btn-info").addClass("btn-danger"); showRoad = false; roadNetLayer.hide(); } else { $(this).removeClass("btn-danger").addClass("btn-info"); showRoad = true; roadNetLayer.show(); } }); var lineArr = [ [120.50459959285944, 31.235715080384875], [120.51335432308402, 31.23696268129648], [120.517130873377, 31.2373296196055], [120.51961996334282, 31.237843330843624], [120.5306062914678, 31.238430425980763], [120.53300955074512, 31.23850381261634], [120.5356703020879, 31.23909090364859], [120.54219343441213, 31.24077877004094], [120.54511167782032, 31.24107230894344], [120.54725744503222, 31.242099687918223], [120.54923155086718, 31.24584218824886], [120.5501756884404, 31.24679613520138], [120.55172064083301, 31.24760331355749], [120.55618383663376, 31.248997514466723], [120.55953123348435, 31.250024807227433], [120.56287863033494, 31.25090533498366], [120.56399442928513, 31.25149234892578], [120.56759931820115, 31.255234477009502], [120.5724916674443, 31.25662856523398], [120.57540991085249, 31.2572155435902], [120.57892896908001, 31.259269939092558], [120.58304884212689, 31.26227808040296], [120.58708288448528, 31.263231861286453], [120.60639478939247, 31.26557958854718], [120.61523535030554, 31.26668006559397], [120.62845327633093, 31.267193617156938], [120.63540556209752, 31.267487073938], [120.63961126583287, 31.26763380198627], [120.64261533992953, 31.26763380198627], [120.64510442989535, 31.267927257398295], [120.64931013363069, 31.26844080217318], [120.65008260982698, 31.268587528738323], [120.65008260982698, 31.268587528738323] ]; var polyline = new AMap.Polyline({ path: lineArr, //设置线覆盖物路径 strokeColor: "#ff0000", //线颜色 strokeOpacity: 1, //线透明度 strokeWeight: 3, //线宽 strokeStyle: "dash", //线样式 实线：solid strokeDasharray: [10, 5] //补充线样式 }); polyline.setMap(map); </script>
实现效果（无偏差）：
使用百度地图api 的效果（有偏差），我只输入了部分坐标点集：
