使用高德地圖根據經緯度畫出路線、計算收錄路線的總距離、使用第三方工具獲取座標資訊
阿新 • • 發佈:2018-12-27
寫在前面:
最近手裡有一個專案 專案面向的使用群體是公路管理方 大概的主要功能簡概如下
- 收錄正在修建 / 剛剛修建完畢 / 未被第三方地圖收錄的路線(使用者可以手機記錄新的路線 收錄在自己的平臺裡 但手機記錄弊端過大 還是建議web端手動捕獲 這裡演示的是web捕獲資料)
- 將收錄到的公路資訊作為內部參照 在後期公路狀況監察、維護、路況查詢等方面使用
上結果圖
圖一、使用第三方網站採集自己需要採集的線路 我在這裡使用了已有的線路描繪了一下 方便演示
圖二、下載採集到的經緯度資訊
圖三、將採集到的資訊上傳到自己的後臺 然後將資料處理之後 以供後期使用調起
到這裡圖片演示完畢 上程式碼
html程式碼
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <style> html, body, #container { width: 100%; height: 100%; } </style> <title></title> <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> <script src="https://webapi.amap.com/maps?v=1.4.11&放入自己申請的key!!!放入自己申請的key!!!放入自己申請的key!!!放入自己申請的key!!!放入自己申請的key!!!放入自己申請的key!!!放入自己申請的key!!!放入自己申請的key!!!放入自己申請的key!!!放入自己申請的key!!!&plugin=AMap.PolyEditor"></script> <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script> </head> <body> <div id="container"></div> <div class="input-card" style="width: 120px"> <button class="btn" onclick="polyEditor.open()" style="margin-bottom: 5px">開始編輯</button> <button class="btn" onclick="polyEditor.close()">結束編輯</button> </div> <script type="text/javascript"> var map = new AMap.Map("container", { center: [116.398597, 39.913257], zoom: 14 }); map.plugin(["AMap.ToolBar"], function() { map.addControl(new AMap.ToolBar()); }); var path = [{$lnglat}]; var polyline = new AMap.Polyline({ path: path, isOutline: true, outlineColor: '#ffeeff', borderWeight: 3, strokeColor: "#3366FF", strokeOpacity: 1, strokeWeight: 6, // 折線樣式還支援 'dashed' strokeStyle: "solid", // strokeStyle是dashed時有效 strokeDasharray: [10, 5], lineJoin: 'round', lineCap: 'round', zIndex: 50, }) polyline.setMap(map) // 縮放地圖到合適的視野級別 map.setFitView([ polyline ]) var polyEditor = new AMap.PolyEditor(map, polyline) polyEditor.on('addnode', function(event) { log.info('觸發事件:addnode') }) polyEditor.on('adjust', function(event) { log.info('觸發事件:adjust') }) polyEditor.on('removenode', function(event) { log.info('觸發事件:removenode') }) polyEditor.on('end', function(event) { log.info('觸發事件: end') // event.target 即為編輯後的折線物件 }) </script> </body> </html>
php程式碼(上傳直接上傳 檢視時處理檔案 每次檢視時讀檔案 處理出自己所需的格式資料 每次檢視去處理效率不高 後期再改 先放程式碼)
/** * 拼出路徑 查詢出上傳檔案 讀檔案 */ $file_path = substr(APP_PATH, 0, strrpos(APP_PATH, '..')).'uploads/'.$result['secret_img']; if(file_exists($file_path)){ $fp = fopen($file_path,"r"); $str = fread($fp,filesize($file_path));//指定讀取大小,這裡把整個檔案內容讀取出來 // echo $str = str_replace("\r\n","<br />",$str); $lnglat = substr($str, stripos($str, '[[')+1,stripos($str, '}}') - stripos($str, '[[')-2); fclose($fp); $this->assign('lnglat',$lnglat); return view();
----- 未完待續(未加線路距離計算)