1. 程式人生 > >Cesium應用篇:3控制元件(4)Geocoder

Cesium應用篇:3控制元件(4)Geocoder

Geocoder是一個非常簡單的控制元件,但也是非常常用且實用的控制元件,顧名思義,Geocoder就是地理編碼的意思,而平常我們經常會查詢一些地物,也就是常用的POI搜尋,就是Geocoder的功勞。

clip_image001

首先,該控制元件支援經緯度定位,比如如下,是北京京洲世家小區的經緯度,輸入後可以定位至該點,如上圖所示。但是在天朝,有一種座標叫做火星座標。換句話說,如果你是在高德,百度等國內資料中獲取的POI經緯度,該經緯度是經過偏移的,而我們的三維球通常都是用Bing,天地圖等沒有偏移的影像,這樣就會導致地物的不匹配,還要,我們只需要糾偏POI就可以。範例裡面有驚喜,自己看geocoder範例吧。

另外,Cesium採用的是Bing的地理編碼和POI檢索,需要Key,而且國內的資料,畢竟是中文檢索,Bing在這點上有些水土不服的,所以,下面我們試著用SuperMap的POI服務來替代(當然,你也可以用其他的,比如高德,百度等,但需要申請Key,我申請了也不知道為何說我的plat不支援,想到範例的簡單性,發現只有SuperMap的最簡單易用,也算一個無奈之舉吧。)

一個很不幸的事實是,Cesium沒想到使用者想要更換Geocoder的服務,所以並沒有提供對應的介面來方便我們的擴充套件,不過,畢竟是JavaScript嗎,只要深挖掘,什麼都能替換之。

clip_image003

如上圖,我們需要改寫的就是searchCommand函式,儘管geocoder只提供了get介面。這裡有兩個邏輯,第一個就是geocode,就是POI的查詢,另一個是正在查詢的狀態下,則會中斷正在進行的查詢操作。我們直接把GeocoderViewModel中的cancelGeocode函式拿來重用即可。而geocode則是需要重寫的重點函式。

直接輸入經緯度定位是很不錯的功能,所以要保留,這段程式碼就留著。下面,就要開始替換Bing的POI檢索了。先看看超圖的POI檢索服務

clip_image005

輸入京洲世家,為什麼總要輸入這個?總比輸一個故宮博物院好吧。點選查詢,我們就可以獲取其對應的url和json結果。

知道了url的規範後,通過Cesium構造一個Promise來發送請求:

clip_image007

返回的結果如下:

clip_image008

有了返回值,我們就需要解析裡面的內容,並講這些POI資訊構造成Entity,儲存到Viewer中。同樣,這裡的經緯度是偏移後的,我們需要做一個糾偏處理。

這裡還有一個小技巧,我們每次查詢時,都需要清除上一次查詢的物件,所以我們需要在Geocoder中儲存一份當前查詢POI的Entity物件,方便下次查詢後的刪除,而刪除是通過id的,所以需要付給一個唯一的ID值,我覺得通過Clock獲取當前時間是一個不錯的方式。

另外,為了能夠讓Entity在點選時獲取其描述資訊,我們也需要指定Entity的description,在geocoder.html範例中,採用了最簡單的ConstantProperty,如果對這一塊不清楚的,可以參考InfoBox控制元件篇,裡面對Property有一個較為詳細的介紹。具體程式碼如下:

clip_image010

至此,我們對Geocoder有了一個較為詳細的認識,同時也擴充套件Geocoder控制元件,能夠指定其他的POI服務來滿足自己的需要,並實現了對查詢後的POI構造並管理Entity的功能,更好的展現查詢後的結果。另外,由於火星座標的原因,會有匹配不準確的情況,這裡通過糾偏也解決了這一實際應用的問題。奉上一個範例的效果圖,Geocoder的介紹就到這裡。

相關推薦

Cesium應用3控制元件4Geocoder

Geocoder是一個非常簡單的控制元件,但也是非常常用且實用的控制元件,顧名思義,Geocoder就是地理編碼的意思,而平常我們經常會查詢一些地物,也就是常用的POI搜尋,就是Geocoder的功勞。 首先,該控制元件支援經緯度定位,比如如下,是北京京洲世家小

自定義控制元件4---PorterDuffColorFilter混合過濾器

PorterDuffColorFilter跟LightingColorFilter一樣,只有一個構造方法 PorterDuffColorFilter(int color, PorterDuff.Mode mode) 這個構造方法也接受兩個值,一個是16進製表示的顏色值這

如何使用JavaScript UI控制元件WijmoJS構建Electron應用程式

概述 What is Electron? Electron是一個使用JavaScript、HTML和CSS構建跨平臺桌面應用程式的框架。 您可以將Electron與純JavaScript或您選擇的JavaScript框架一起使用: React Angular Vue 構建

Cesium應用快速搭建

       範例中所有範例可以在Github中搜索:ExamplesforCesium        Cesium ['siːzɪəm]是一款開源的JavaScript開源庫,開發者通過Cesium,實現無外掛的建立三維球和二維地圖。Cesium通過WebGL技術實現圖形

VS2013/MFC程式設計入門之二十六常用控制元件圖片控制元件Picture Control

本節主要講一種簡單實用的控制元件,圖片控制元件Picture Control。通過使用圖片控制元件我們可以在介面某個位置顯示圖片以美化介面。        圖片控制元件簡介        圖片控制元件和前面講到的靜態文字框都是靜態文字控制元件,因此兩者的使用方法有很多

Cesium應用1快速搭建

       範例中所有範例可以在Github中搜索:ExamplesforCesium        Cesium ['siːzɪəm]是一款開源的JavaScript開源庫,開發者通過Cesium,實現無外掛的建立三維球和二維地圖。Cesium通過WebGL技術實現圖形的硬體加速,並且跨平臺,跨瀏覽

OpenStack部署應用第四網路服務Neutron

1、網路服務介紹   OpenStack Networking(neutron),允許建立、插入介面裝置,這些裝置由其他的OpenStack服務管理。外掛式的實現可以容納不同的網路裝置和軟體,為OpenStack架構與部署提供了靈活性。它包含下列元件:neutron-server  接收和路由API請求到合適

OpenStack部署應用第二映象服務glance

1、映象服務Glance介紹   映象服務 (glance) 允許使用者發現、註冊和獲取虛擬機器映象。它提供了一個 REST API,允許您查詢虛擬機器映象的 metadata 並獲取一個現存的映象。您可以將虛擬機器映象儲存到各種位置,從簡單的檔案系統到物件儲存系統—-例如 OpenStack 物件儲存, 並

OpenStack部署應用第三計算服務Nova

1、計算服務介紹   OpenStack計算元件請求OpenStack Identity服務進行認證;請求OpenStack Image服務提供磁碟映象;為OpenStack dashboard提供使用者與管理員介面。磁碟映象訪問限制在專案與使用者上;配額以每個專案進行設定(例如,每個專案下可以建立多少例項)

OpenStack部署應用第五建立一個例項

  這部分建立必須的虛擬網路來支援建立多個例項。網路選項1包含一個使用公共虛擬網路(外部網路)的例項。網路選項2包含一個使用公共虛擬網路的例項、一個使用私有虛擬網路(私有網路)的例項。 1、建立虛擬網路 根據你在網路選項中的選擇來建立虛擬網路。如果你選擇選項1,只需建立一個公有網路。如果你選擇選項2,同時建

ASP.NET AJAX入門系列5使用UpdatePanel控制元件

{            if (String.IsNullOrEmpty(FirstNameTextBox.Text) ||               String.IsNullOrEmpty(LastNameTextBox.Text)) { return; }             int emplo

VS2013/MFC程式設計入門之三十一常用控制元件標籤控制元件Tab Control

前面兩節講了樹形控制元件Tree Control,本節開始講解標籤控制元件Tab Control,也可以稱為選項卡控制元件。        標籤控制元件簡介        標籤控制元件也比較常見。它可以把多個頁面整合到一個視窗中,每個頁面對應一個標籤,使用者點選某個標

自定義控制元件6---PorterDuffXfermode圖形過濾器之橡皮擦應用

activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schema

R實戰 第三數據處理基礎

計算 edi 字符數 定義函數 空間 數值 sqrt 字符類 ceil 數據結構用於存儲數據,不同的數據結構對應不同的操作方法,對應不同的分析目的,應選擇合適的數據結構。在處理數據時,為了便於檢查數據對象,可以通過函數attributes(x)來查看數據對象的屬性,str(

數據分析 第四聚類分析劃分

think trace stat pid 函數返回 around 構建 之前 得出 聚類是把一個數據集劃分成多個子集的過程,每一個子集稱作一個簇(Cluster),聚類使得簇內的對象具有很高的相似性,但與其他簇中的對象很不相似,由聚類分析產生的簇的集合稱作一個聚類。在相同的

Angular6學習筆記16核心知識-元件component

元件 簡介 元件控制螢幕上被稱為檢視的一小片區域。將檢視等同於一個小汽車,那麼元件就是組成汽車的每一個零件。在類中定義元件的應用邏輯,為檢視提供支援。元件通過一些由屬性和方法組成的API與檢視互動。當用戶在整個應用中操作的時候,Angular就會建立,更新,銷燬一些元件。應用可以通過一些可以

Android自定義View--翻書控制元件

0.前言 最近重看了一遍封神演義,感覺QQ閱讀那個翻書的效果挺好的,準備做一個。上週五下午用了兩個小時只寫了一部分功能,以後有時間再完善 1.分析 先看效果圖 這個空間,說簡單也簡單,說難也難,簡單就在於這個效果主要就是依賴canvas的clippath才見到部分canvas,難就難在裁

第十一一點一滴學ibatis

一、常見ORM框架1、原生的JDBC。自己寫的JDBC,基本上就只夠程式跑起來,缺陷和漏洞一堆堆。回顧下jdbc的幾個操作,載入驅動,建立連線,預處理語句,執行,結果集遍歷。這個過程中,因為連線Connection要不斷關閉和開啟,頻繁操作,於是有了連線池ConnectionPool。預處理語句的sql要重複

WPF自定義控制元件控制元件分類

原文: WPF自定義控制元件(一)の控制元件分類 一、什麼是控制元件(Controls)         控制元件是指對資料和方法的封裝。控制元件可以有自己的屬性和方法,其中屬性是控制元件資料的簡單訪問者,方法則是控制元件的一些簡單而可見的功能、控制元件建

WPF 曲線圖表控制元件自制

原文: WPF 曲線圖表控制元件(自制)(一) 由於公司需要所以自寫了一個簡單的曲線圖表控制元件,在此分享。 先上一張效果圖 1.介面xaml X軸和Y軸用 2個line物件寫死在xaml上 外部用一個Grid包裹起來,然後X軸的寬度,和Y