第11章-百度地圖開發(fā)

WebGIS原理與應用朱進蘇州科技大學環(huán)境學院2024年5月30日第11章百度地圖開發(fā)2024/5/30slide2內容11.1百度地圖開發(fā)概述11.2百度地圖JSAPI11.3LBS云11.4Web服務API11.5鷹眼軌跡11.6靜態(tài)圖API11.7URIAPI2024/5/30slide3目標掌握百度地圖JSAPI的HelloWorld示例及主要架構熟悉百度地圖JS開源庫的主要功能熟悉百度地圖的LBS云、Web服務API熟悉百度地圖的鷹眼軌跡、靜態(tài)圖API、URIAPI2024/5/30slide411.1百度地圖開發(fā)概述2024/5/30slide5百度地圖開發(fā)概述2024/5/30slide6百度地圖開發(fā)概述http:///2024/5/30slide7百度地圖開發(fā)概述2024/5/30slide8解決方案O2O與LBSO2O:OnlineToOffline，線上線下電子商務，比如團購，外賣等2024/5/30slide9解決方案O2O與LBS各個功能對應到地圖開放平臺的服務2024/5/30slide10解決方案O2O與LBS各個功能對應到地圖開放平臺的服務2024/5/30slide11解決方案O2O與LBS各個功能對應到地圖開放平臺的服務2024/5/30slide12百度地圖開發(fā)概述2024/5/30slide13百度地圖開發(fā)概述房地產網站百度認為用戶通過房地產網站或APP獲取信息的簡單體驗流程為：搜索—選定目標—詳情—實地參觀。2024/5/30slide14百度地圖開發(fā)概述房地產網站-場景2024/5/30slide15百度地圖開發(fā)概述房地產網站-場景2024/5/30slide16百度地圖開發(fā)概述房地產網站-場景2024/5/30slide17百度地圖開發(fā)概述房地產網站-場景2024/5/30slide18百度地圖開發(fā)概述房地產網站-場景2024/5/30slide1911.2百度地圖JSAPI2024/5/30slide20百度地圖JSAPIJSAPI大眾版http:///index.php?title=jspopular免費提供，可在網站中構建功能豐富、交互性強的地圖應用同時支持支持PC端和移動端支持HTML5特性的地圖開發(fā)2024/5/30slide21百度地圖JSAPIJSAPI極速版http:///map/jsmobile.htm專為手機瀏覽器提供的API較JavaScriptAPI大眾版而言，該版更適配移動設備，體積更小，加載地圖速度更快，更省流量較移動端常采用的靜態(tài)圖API，該版本可加載動態(tài)地圖，進行地圖操作，如拖拽、縮放、檢索、線路規(guī)劃等，更好滿足用戶對地圖的豐富需求。2024/5/30slide22百度地圖JSAPI大眾版獲取密鑰前提：注冊百度賬號2024/5/30slide23百度地圖JSAPI大眾版獲取密鑰http:///apiconsole/key?application=key2024/5/30slide24百度地圖JSAPI大眾版獲取密鑰2024/5/30slide25百度地圖JSAPI大眾版獲取密鑰2024/5/30slide26百度地圖JSAPI大眾版使用密鑰2024/5/30slide27百度地圖JSAPI大眾版功能2024/5/30slide28百度地圖JSAPI大眾版功能2024/5/30slide29百度地圖JSAPI大眾版功能2024/5/30slide30百度地圖JSAPI大眾版百度地圖的“Hello,World”2024/5/30slide31百度地圖JSAPI大眾版百度地圖的“Hello,World”準備頁面-使用最新的符合HTML5規(guī)范的文檔聲明也可以根據需要選擇其他類型的文檔聲明，這樣瀏覽器會以標準的方式對頁面進行渲染，保證頁面最大的兼容性2024/5/30slide32百度地圖JSAPI大眾版百度地圖的“Hello,World”添加一個meta標簽，以便使頁面更好的在移動平臺上展示設置樣式，使地圖充滿整個瀏覽器窗口2024/5/30slide33百度地圖JSAPI大眾版百度地圖的“Hello,World”引用百度地圖API文件創(chuàng)建地圖容器元素，創(chuàng)建一個div元素API使用BMap作為命名空間，所有類均在該命名空間之下，比如：BMap.Map、BMap.Control、BMap.Overlay。2024/5/30slide34百度地圖JSAPI大眾版百度地圖的“Hello,World”創(chuàng)建地圖實例其參數可以是元素id也可以是元素對象創(chuàng)建點坐標Point類描述了一個地理坐標點，其中116.404表示經度，39.915表示緯度。2024/5/30slide35百度地圖JSAPI大眾版百度地圖的“Hello,World”地圖初始化在創(chuàng)建地圖實例后，需要對其進行初始化，BMap.Map.centerAndZoom()方法要求設置中心點坐標和地圖級別。地圖必須經過初始化才可以執(zhí)行其他操作。2024/5/30slide36百度地圖JSAPI大眾版百度地圖的“Hello,World”地圖配置與操作可以修改配置來改變地圖操作功能，比如，默認情況下地圖不支持鼠標滾輪縮放操作，因為這樣可能會影響整個頁面的用戶體驗如果希望在地圖中使用鼠標滾輪控制縮放，則可以調用map.enableScrollWheelZoom方法來開啟2024/5/30slide37百度地圖JSAPI大眾版百度地圖的“Hello,World”示例顯示一個地圖，等待兩秒鐘后，它會移動到新中心點2024/5/30slide38百度地圖JSAPI大眾版控件百度地圖上負責與地圖交互的UI元素稱為控件Control：控件的抽象基類，所有控件均繼承此類的方法、屬性。通過此類您可實現(xiàn)自定義控件。NavigationControl：地圖平移縮放控件，PC端默認位于地圖左上方，它包含控制地圖的平移和縮放的功能。OverviewMapControl：縮略地圖控件2024/5/30slide39百度地圖JSAPI大眾版控件ScaleControl：比例尺控件，顯示地圖的比例關系。MapTypeControl：地圖類型控件，默認位于地圖右上方。CopyrightControl：版權控件，默認位于地圖左下方。GeolocationControl：定位控件，針對移動端開發(fā),默認位于地圖左下方。2024/5/30slide40百度地圖JSAPI大眾版控件使用Map.addControl()方法向地圖添加控件,在此之前地圖需要進行初始化向地圖添加多個控件2024/5/30slide41百度地圖JSAPI大眾版覆蓋物所有疊加或覆蓋到地圖的內容，統(tǒng)稱為地圖覆蓋物(Overlay)如標注、矢量圖形元素(包括：折線和多邊形和圓)、信息窗口等。覆蓋物擁有自己的地理坐標，當拖動或縮放地圖時，它們會相應的移動2024/5/30slide42百度地圖JSAPI大眾版覆蓋物Overlay：覆蓋物的抽象基類，所有的覆蓋物均繼承此類的方法。Label：表示地圖上的文本標注，您可以自定義標注的文本內容。Marker：標注表示地圖上的點，可自定義標注的圖標。Polyline：表示地圖上的折線。Polygon：表示地圖上的多邊形，類似于閉合的折線，也可為其添加填充顏色。2024/5/30slide43百度地圖JSAPI大眾版覆蓋物Circle:表示地圖上的圓。InfoWindow：可以展示更為豐富的文字和多媒體信息。注意：同一時刻只能有一個信息窗口在地圖上打開。使用map.addOverlay方法向地圖添加覆蓋物，使用map.removeOverlay方法移除覆蓋物，注意此方法不適用于InfoWindow。2024/5/30slide44百度地圖JSAPI大眾版覆蓋物以下示例向地圖中心點添加了一個標注，并使用默認的標注樣式2024/5/30slide45百度地圖JSAPI大眾版覆蓋物可使用InfoWindow來創(chuàng)建一個信息窗實例2024/5/30slide46百度地圖JSAPI大眾版事件大部分對象都含有addEventListener方法，您可以通過該方法來監(jiān)聽對象事件BMap.Map包含click、dblclick等事件。在特定環(huán)境下這些事件會被觸發(fā)，同時監(jiān)聽函數會得到相應的事件參數e，比如當用戶點擊地圖時，e參數會包含鼠標所對應的地理位置point。2024/5/30slide47百度地圖JSAPI大眾版事件addEventListener方法有兩個參數：監(jiān)聽的事件名稱和事件觸發(fā)時調用的函數2024/5/30slide48百度地圖JSAPI大眾版地圖圖層目前百度地圖提供的圖層有TrafficLayer(交通流量圖層)通過map.addTileLayer方法可向地圖添加圖層2024/5/30slide49百度地圖JSAPI大眾版地圖服務地圖服務指提供數據信息的接口，比如本地搜索、路線規(guī)劃等LocalSearch：本地搜索，提供某一特定地區(qū)的位置搜索服務，比如在北京市搜索“公園”。TransitRoute：公交導航，提供某一特定地區(qū)的公交出行方案的搜索服務。DrivingRoute：駕車導航，提供駕車出行方案的搜索服務。2024/5/30slide50百度地圖JSAPI大眾版地圖服務WalkingRoute：步行導航，提供步行出行方案的搜索服務。Geocoder：地址解析，提供將地址信息轉換為坐標點信息的服務。LocalCity：本地城市，提供自動判斷您所在城市的服務。TrafficControl：實時路況控件，提供實時和歷史路況信息服務。2024/5/30slide51百度地圖JSAPI大眾版地圖服務BMap.LocalSearch提供本地搜索服務，在使用本地搜索時需要為其設置一個檢索區(qū)域，檢索區(qū)域可以是BMap.Map對象、BMap.Point對象或者是省市名稱（比如："北京市"）的字符串。2024/5/30slide52百度地圖JSAPI大眾版地圖服務地理編碼將地址信息轉換為地理坐標點信息提供Geocoder類進行地址解析，通過Geocoder.getPoint()方法來將一段地址描述轉換為一個坐標。2024/5/30slide53百度地圖JSAPI大眾版地圖服務示例獲得地址“北京市海淀區(qū)上地10街10號”的地理坐標位置，并在這個位置上添加一個標注。注意在調用Geocoder.getPoint()方法時需要提供地址解析所在的城市（本例為“北京市”）。2024/5/30slide54百度地圖JSAPI大眾版全景圖百度全景地圖提供沿著全景覆蓋城市指定道路、指定位置點360度的全景視圖，相比二維地圖全景圖更加真實、直觀2024/5/30slide55百度地圖JSAPI大眾版全景圖通過全景控件可以從普通地圖進入全景地圖，添加全景控件的方式同添加工具條等控件類似2024/5/30slide56百度地圖JSAPI大眾版示例Demo2024/5/30slide57百度地圖JSAPI大眾版JavaScript開源庫百度地圖JavaScript開源庫，是一套基于百度地圖API二次開發(fā)的開源的代碼庫。目前提供多個lib庫，幫助開發(fā)者快速實現(xiàn)在地圖上添加Marker、自定義信息窗口、標注相關開發(fā)、快速加載城市列表、拉框放大、拉框搜索、區(qū)域限制設置、幾何運算、實時交通、檢索與公交駕車查詢、鼠標繪制工具等功能。2024/5/30slide58百度地圖JSAPI大眾版JavaScript開源庫-大數據可視化庫Mapv是一組基于百度地圖的大數據可視化庫，可以用來展示大量的點、線、面數據，每種數據也有不同的展示類型，如直接打點、熱力圖、網格、聚合等方式展示數據。2024/5/30slide59百度地圖JSAPI大眾版JavaScript開源庫-熱力圖提供熱力圖可視化展現(xiàn)功能，注:支持chrome,safari,IE9及以上的瀏覽器.核心的代碼主要來自于第三方heatmap.js,主入口類是HeatmapOverlay，基于BaiduMapAPI2.0。2024/5/30slide60百度地圖JSAPI大眾版JavaScript開源庫-鼠標繪制工具條庫提供鼠標繪制點、線、面、多邊形（矩形、圓）的編輯工具條的開源代碼庫。且用戶可使用JavaScriptAPI對應覆蓋物（點、線、面等）類接口對其進行屬性（如顏色、線寬等）設置、編輯（如開啟線頂點編輯等）等功能。2024/5/30slide6111.3LBS云2024/5/30slide62LBS云概述LBS.云是百度地圖針對LBS開發(fā)者推出的平臺級服務，結合已有的地圖API和SDK服務，通過開放服務端存儲和計算能力，提供海量位置數據的實時存儲、檢索、展示一體化解決方案。2024/5/30slide63LBS云功能-云端存儲無須部署服務器，通過云存儲API或LBS云數據管理平臺即可完成海量數據云端存儲。免費開放千萬級數據存儲空間支持單個數據表百G存儲空間支持每秒萬級并發(fā)讀寫。2024/5/30slide64LBS云功能-地理檢索基于云端健壯的地理計算能力，實現(xiàn)海量數據的實時云檢索支持周邊、區(qū)域等多種檢索方式開放高性能大數據計算集群，實現(xiàn)云端數據實時檢索2024/5/30slide65LBS云功能-地圖展示通過云麻點服務，快速實現(xiàn)海量位置數據地圖展示開放云端渲染引擎的計算能力，實現(xiàn)億萬級數據渲染支持Web、Android、iOS的多端同步展示2024/5/30slide66CustomLayer是用戶自定義底圖層，現(xiàn)階段主要為LBS云麻點功能展現(xiàn)服務。11.4Web服務API2024/5/30slide67Web服務API概述百度地圖Web服務API為開發(fā)者提供http接口，即開發(fā)者通過http形式發(fā)起檢索請求，獲取返回json或xml格式的檢索數據。用戶可以基于此開發(fā)JavaScript、C#、C++、Java等語言的地圖應用。2024/5/30slide68Web服務API功能2024/5/30slide69Web服務API功能2024/5/30slide70Web服務APIPlaceAPIPlaceAPI是一類簡單的HTTP接口，用于返回查詢某個區(qū)域的某類POI數據，且提供單個POI的詳情查詢服務，用戶可以使用C#、C++、Java等開發(fā)語言發(fā)送HTTP請求且接收json、xml的數據。2024/5/30slide71Web服務APIPlaceAPI-Hello,World示例以下是一個關于placeAPI的簡單示例，設置檢索城市為北京，檢索關鍵字為“飯店”，檢索后返回10條數據。URL：http:///place/v2/search?q=飯店®ion=北京&output=json&ak={您的密鑰}2024/5/30slide72Web服務APIGeocodingAPIGeocodingAPI是一類簡單的HTTP接口，用于提供從地址到經緯度坐標或者從經緯度坐標到地址的轉換服務，用戶可以使用C#、C++、Java等開發(fā)語言發(fā)送HTTP請求且接收JSON、XML的返回數據。2024/5/30slide73Web服務APIGeocodingAPI發(fā)送一個地址是“百度大廈”的請求，返回該地址對應的地理坐標。URL：/geocoder/v2/?address=北京市海淀區(qū)上地十街10號&output=json&ak=E4805d16520de693a3fe707cdc962045&callback=showLocation2024/5/30slide7411.5鷹眼軌跡2024/5/30slide75鷹眼軌跡概述一套高性能軌跡存儲和查詢服務，開發(fā)者可迅速的開發(fā)一套軌跡追蹤系統(tǒng)。在軌跡采集時，鷹眼支持手機、可穿戴設備和車載OBD設備這三種方式進行軌跡采集并上傳；對于開發(fā)者通過其他方式采集的軌跡，可通過鷹眼Web服務API上傳軌跡至鷹眼云端進行存儲應用案例:物流行業(yè),O2O上門服務,車聯(lián)網，生活服務(兒童手表)等。2024/5/30slide76鷹眼軌跡鷹眼軌跡服務結構示意圖2024/5/30slide77鷹眼軌跡功能軌跡追蹤：借助GPS、基站、Wi-Fi和傳感器信息，實現(xiàn)室內、外高精度的連續(xù)軌跡追蹤軌跡回傳：采用TCP長連接、數據打包壓縮、加密回傳等策略，保障數據安全，實現(xiàn)超低流量損耗。2024/5/30slide78鷹眼軌跡功能軌跡糾偏：實時進行軌跡糾偏，解決定位漂移問題，還原真實軌跡。軌跡查詢：實時查詢被追蹤者軌跡地理圍欄報警：當被追蹤者進入、離開該區(qū)域時，監(jiān)控者可以接收到自動報警通知。2024/5/30slide7911.6靜態(tài)圖API2024/5