百度地圖、高德地圖、Google地圖等座標提取與轉換

時間 2019-11-15

原文原文鏈接

一、地理座標系與投影座標系javascript

地理座標系也就是球面座標系，是將本不是橢球體的地球進行橢球體化，從而造成球面座標體系，國際標準的地理座標系就是WGS-84座標系；css

只不過各個國家爲了反映該國家所在區域地球的真實形狀，採用不一樣的數學模型對地球進行橢球體化，因此就有個Beijing5四、Xian80座標系。java

投影座標系是爲平面座標，是將地理座標根據必定的投影規則投影到平面，造成的平面直角座標系，好比高斯-克呂格投影，墨卡託投影等。web

二、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 度。api

三、GCJ－02座標系與百度 bd-09座標系dom

GCJ－02座標系又名「火星座標系」，是我國國測局首創的座標體系，由WGS－84加密而成，在國內，必須至少使用GCJ－02座標系，或者使用在GCJ－02加密後再進行加密的座標系，如百度座標系。高德和Google在國內都是使用GCJ－02座標系，能夠說，GCJ－02是國內最普遍使用的座標系。ide

百度座標系是在GCJ－02座標系的基礎上再次加密偏移後造成的座標系，只適用於百度地圖。（固然，百度地圖api接口提供了google座標轉百度座標、原始座標轉百度座標的接口，網上也有一些轉換算法，我的建議仍是用百度地圖api比較準確）工具

四、WGS84 Web Mercator 座標系測試

咱們在作開發的時候，尤爲是web地圖開發，兩種座標系相當重要 WGS84（WKID：4326）和 WGS84 Web Mercator （WKID：102113）。WGS84 Web Mercator 是目前在線地圖（平面）採用的通用座標系，屬於投影座標系。

五、測試

測試方法：

①使用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>