OpenLayer載入百度座標偏移問題解決（方案二）
阿新 • • 發佈：2019-01-05
前言：上一篇文章介紹了百度座標載入在，天地圖，OSM像這類的非百度地圖的第三方地圖，本文主要講述的用載入百度地圖作為底圖這樣我們不再需要座標轉你，但是在使用WGS-84座標的時候，我們需要把他們轉到BD-9座標系上才能載入到地圖上的正確位置。上一篇文章中，我們只需要轉換百度座標到WGS-84。我們在網上找到的載入百度的程式碼，大多程式碼是切片是由偏移的，我們雖然能夠載入百度和顯示，然後因為偏移，所以我們在載入百度座標的時候無法顯示正確的位置。
先來張圖：
一、全部原始碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>獲取邊界線</title> <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css"> <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="></script> <!--<script src="../script/custom/translate.js"></script>--> <script src="../script/baidu/baiduLayer.js"></script> <script src="../script/index.js"></script> <style> #map { width: 100%; height: 100%; } </style> </head> <body> <!--地圖容器--> <div id="map"></div> <br /> <!--提示文字、搜尋框--> 輸入省、市或縣名稱：<input type="text" id="districtName" style="width:80px" value=""> <!--查詢按鈕--> <input type="button" onclick="getBoundary()" value="獲取輪廓線"> <script type="text/javascript"> var baiduMapSat = new ol.layer.Tile({ title: "百度地圖", source: new ol.source.BaiduMap({ mapType: "" }) }); //瓦片圖層 function getTdtLayer(lyr) { var url = "http://t{0-7}.tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}"; var layer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: url }) }); return layer; } //切片圖層 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: 10, projection: "EPSG:4326" }); var map = new ol.Map({ layers: [baiduMapSat,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]); 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); }); } </script> </body> </html>
二、總結
關於這個百度圖層是我，自己結合網上一些糾偏演算法，自己擴充套件的一個圖層，還有一些小問題沒有解決，解決以後我會共享到github上面，今天廢了半天的時間寫了關於載入百度api的規劃，事實證明，想法雖好，規劃路線真叫一個垃圾，無力吐槽。