思路：方案一的問題就是解決百度座標載入OSM地圖或者天地圖偏移的問題，我們通過百度api獲取的座標，用OL去載入的時候有座標偏移的問題，百度座標獲取的是BD-9經過二次加密的座標系，而OL是WGS-84要想不偏移我們應該將BD-9轉到WGS-84，在這裡我們用到了一個大牛編寫的轉換外掛。

座標不轉換疊加圖：

座標轉換之後疊加圖：

一、座標轉換js檔案引入

<script src="../script/index.js"></script>

二、程式碼部分

        //切片圖層
        var vec_c = getTdtLayer("vec_w");
        //註記圖層
        var cva_c = getTdtLayer("cva_w");
        var source = new ol.source.Vector();
        //向量圖層
        var vector = new ol.layer.Vector({
            source: source,
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.1)'
                }),
                stroke: new ol.style.Stroke({
                    color: 'red',
                    width: 2
                }),
                image: new ol.style.Circle({
                    radius: 10,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })
            })
        });
        var view = new ol.View({
            center: [116.46, 39.92],
            zoom: 4,
            projection: "EPSG:4326"
        });
        var map = new ol.Map({
            layers: [vec_c,cva_c,vector],

            view: view,
            target: "map"
        });
        var coordinatesPolygon = new Array();
        //定義查詢按鈕觸發的函式
        function getBoundary() {

            var coordinates = [];
            //bdary儲存行政區域邊界，name儲存查詢名稱
            var bdary = new BMap.Boundary();
            var name = document.getElementById("districtName").value;
 
            //get方法，獲取行政區域的邊界
            //rs是獲取到的結果
            bdary.get(name, function (rs) {              
                //儲存行政區域邊界的點數
                var count = rs.boundaries[0].toString().split(";").length;
                for (var i = 0; i < count ; i++) {
                    
                    var result = rs.boundaries[0].toString().split(";")[i].split(",");  
                    var arry = coordtransform.bd09togcj02(result[0], result[1]);
                    //var arry = [result[0], result[1]];
                    arry = coordtransform.gcj02towgs84(arry[0], arry[1]);
                   
                    //var arry = GPS.bd_decrypt();
                    //arry = GPS.gcj_decrypt_exact(arry[0],arry[1]);
                    coordinates.push(arry);
                }
                console.log(coordinates);
                //多邊形此處注意一定要是[座標陣列]
                var plygon = new ol.geom.Polygon([coordinates])
                //多邊形要素類
                var feature = new ol.Feature({
                    geometry: plygon,
                });
                console.log(feature);
                source.addFeature(feature);
                console.log(vector.getSource().getFeatures().length);
            });
        }
 

底圖載入的天地圖，也可以是OSM，這樣的轉換還是有一點差距，但是完全可以達到需要的結果，如果需要讓這個邊界更加完善貼合底圖，我們可以載入百度地圖作為底圖，但是在載入百度地圖的我們需要解決一個問題，那就是切片偏移的問題，這個是方案二，我在下一篇文章會介紹這個。