Cesium應用篇:3控件(3)SelectionIndicator InfoBox

假設這樣一個場景,用戶在Cesium球上加載了一個GeoJson文件(DataSource),里面是全美國所有州的Geometry信息(Entity),疊加到球面后,你自然會有一種沖動,點擊某一個州,了解這個州的基本信息。場景如下圖所示:

clip_image002

這個點擊行為,對應的是選擇控件(SelectionIndicator),而呈現信息的載體,就是信息框控件(InfoBox)。

clip_image004

如上是一個簡單的邏輯關系,可見Viewer.SelectEntity屬性起到了承上啟下的作用。首先,Viewer模塊負責UI的事件交互,比如鼠標點擊或者雙擊,則會觸發對應事件,判斷當前的鼠標事件是否選中了Entity,如果選中,則更新Viewer.SelectEntity屬性。

clip_image006

如上,可以看到在Cesium源碼中,目前綁定了兩個事件,一個是鼠標左鍵單擊,選中該Entity,一個是鼠標左鍵雙擊,則會追蹤到該位置。當然,如果你想要增加或者修改某個事件,則可以修改screenSpaceEventHandler的內容。可以參考 screenSpaceEventHandler,比如很多人希望取消雙擊效果,則可以調用:viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

而無論是單擊還是雙擊,內部都是通過pickEntity獲取選中的Entity,該方法內部通過ID作為唯一標識,判斷是否選中某一Entity,具體實現我們以后在詳細討論。而在單擊中,會調用Viewer.SelectEntity的Set方法,此時,當狀態發生變化時(選中或消失),都會觸發選擇控件的動畫效果:

clip_image008

如上就是一個Entity從鼠標選中,事件的觸發以及屬性信息的顯示的大致過程。

但Cesiu支持實時性的InfoBox狀態更新,也就是說,在每一幀,我們都可以更新選擇控件和信息框控件的狀態,而這,就要從Viewer.prototype._onTick說起。

首先,Viewer.prototype._onTick由Clock.onTick事件觸發,而時鐘本身在每一幀都會觸發onTick事件,因此Viewer也可以通過onTick來實現自身的更新。

clip_image010 機智的你一眼就看到了time參數,原來如此。這時,根據time時間,我們獲取對應的description,字符串類型,本身就是一個div,然后賦給infoBoxViewModel.description進而實現InfoBox控件的實時更新。

通常,每一個Entity的description都是固定內容,不需要根據時間等變換,而如果對實時性有一定要求,或者需要自定義效果,則需要匿名函數來實現回調方法。在這看不見的地方,主要是createPropertyDescriptor,Property兩者間錯綜復雜的關系…

clip_image011

如上是Entity中description的屬性定義,通過createPropertyDescriptor把Entity. description封裝成Property,提供了Set和Get方法,方便該屬性的調用。這里createPropertyDescriptor會根據屬性賦值來選擇具體的Property子類來滿足不同需求,稍后在介紹完Property在詳細解釋這一部分。

對于Property,則會調用getValueOrDefault方法,獲取該Entity的description,獲取每一個Entity對應的描述信息,這里,每一個Property都需要提供一個getValue的標準方法,這也是每一個Property子類必須要實現的方法:

clip_image013

而Property有很多子類,但在InfoBox中,主要涉及到CallbackProperty和ConstantProperty兩種類型,通過命名我們不難看出,前者是一種回調方式,而后者則是一個常量。

好了,對Property有了一個基本認識后,我們在看看createPropertyDescriptor的具體實現:

clip_image015

高亮處代碼,不難看出,在創建時優先考慮CallbackProperty的屬性,如果用戶沒有采用這種屬性,此時,value為String類型而不是Property,所以沒有實現value. getValue方法,則將value(String)封裝為ConstantProperty。所以,constant常量的方式非常簡單,直接賦值即可:

Entity.description = “<div> description</div>”;

可我偏要用回調的方式,如何破?我們看看GeoJsonDataSource中是如何實現的。

clip_image017

首先,你要實現一個匿名函數,如上,實現一個describe方法,其中,因為是匿名函數,所以可以隨時獲取到該Entity的所有屬性的Key-Value,可以根據自己的需要來創建對應的DIV,另外,該匿名函數也提供time參數,滿足對實時性的需求。

如果,萬事俱備,我們就可以開心的創建一個CallbackProperty了:

clip_image019

而CallbackProperty的getValue的實現如下,通過該方法,可以把Entity的description屬性,通過CallbackProperty,以RunTime的方式傳遞給InfoBox,如此,通過CallbackProperty可以實現動態顯示InfoBox信息的方式:

clip_image021

基本上,InfoBox的實現大致如此,可以看到,Cesium的InfoBox的還是很成熟的,盡可以的在無編碼的情況下顯示Entity的屬性,同時,也能滿足自定義的擴展,并能夠滿足實時性的要求,而且封裝的很優雅,也很簡單,真的不是隨便就能寫來的……

光說不練假把式,寫了這么多,相見ifoBox.html,,基于本文涉及到的知識點,實現了自定義InfoBox內容,并可以通過chart實現動態效果。具體代碼參考infobox.html范例

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/260973.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/260973.shtml
英文地址,請注明出處:http://en.pswp.cn/news/260973.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

北理工計算機學院新聞,北理工計算機學子勇奪CVPR 2021 AI安全國際頂級賽事季軍...

2021年4月19日&#xff0c;CVPR 2021挑戰者計劃第六期落下帷幕。由北理工計算機學院教師李元章、張全新及廣州大學李進教授指導的DemiguiseWoo戰隊&#xff0c;在挑戰賽賽道二“ImageNet無限制對抗攻擊”發起沖擊&#xff0c;最終以9303.6的總分取得決賽第三名的好成績&#xf…

字符串入門

暴力 字典樹總結&#xff1a;字典樹的功能就是map字符串得到編碼或者查詢前綴關系套模板的時候注意t,s,&#xff0d;‘a’,[26],sz0的初始化還有一個問題&#xff0c;到底字典樹開多少內存比較合適&#xff0c;反正至少是要開字符總長度*2hdu1251 http://acm.hdu.edu.cn/showpr…

C++ 的基礎概念(3)——多態詳解。

最近兩次面試都問到了多態&#xff0c;我也不得不重視起來了&#xff0c;最近最大的收獲就是&#xff1a;基礎知識很重要&#xff0c;就算你很會寫代碼&#xff0c;但是面試官問你基礎知識答不上來的話&#xff0c;也很難被人賞識和錄用&#xff0c;所以還是要多補補基礎概念&a…

美育在計算機教育中應用,在現代教育技術中綻放數學美育之花

21世紀是信息化的社會&#xff0c;計算機、網絡等現代技術的飛速發展&#xff0c;作為現代教育技術&#xff0c;計算機多媒體技術和網絡技術已經越來越多地走進小學數學課堂&#xff0c;為深化教學改革&#xff0c;培養學生能力&#xff0c;發展學生個性&#xff0c;提供了嶄新…

.NET Forms身份驗證

.NET表單身份驗證 ASP.NET Forms 身份驗證的簡單實現&#xff1a;1&#xff09;在Web.config文件中配置應用程序使用 Forms 身份驗證&#xff1b;2&#xff09;創建登陸頁面&#xff0c;將用戶身份驗證票證添加到Cookie集合。1.配置文件中設置為Forms驗證<authentication mo…

Oracle SQL篇(三)Oracle ROWNUM 與TOP N分析

首先我們來看一下ROWNUM&#xff1a;含義解釋&#xff1a;1、rownum是oracle為從查詢返回的行的編號&#xff0c;返回的第一行分配的是1&#xff0c;第二行是2&#xff0c;依此類推。這是一個偽列&#xff0c;可以用于限制查詢返回的總行數。2、rownum不能以任何基表的名稱作為…

C++ Primer 第10章 pair類型

//10.2.cpp //至少使用三種方法創建pair對象。 //編寫三個版本的程序&#xff0c;分別采用不同的方法來創建pair對象 //方法1&#xff1a;在定義pair對象時提供初始化式來創建pair對象#include<iostream> #include<vector> #include<utility> #include<st…

計算機對口升學可以報考的學校,對口升學可以報考的學校都在這里,趕快來收藏吧...

對口升學指對口高考&#xff0c;在平常又叫對口單招&#xff0c;對口升學&#xff0c;是從中等職業學校畢業生招生&#xff0c;強調中等職業學校畢業生對口升高職的專業技能考試&#xff0c;以專業技能成績為主要錄取依據的招生辦法。報名條件具有正式學籍的中等職業學校畢業生…

Visual Studio 常用快捷鍵 (二)

想不到上一篇 【Visual Studio 常用快捷鍵】 受這么多人的歡迎。看來大家對Visual Studio的用法非常感興趣。 接下來我準備寫一個 “Visual Studio使用技巧 ” 一個系列的博客。 希望對大家有所幫助 本篇繼續介紹幾個常用的快捷鍵 閱讀目錄 按兩下Tab鍵回退到光標的上一次位置…

js 兼容event.target

function getEventTarget(e){ewindow.event||e;return e.srcElement||e.target; }轉載于:https://www.cnblogs.com/manong13/archive/2012/02/23/2364443.html

企業郵箱收發信息服務器怎么設置,網易閃電郵企業郵箱收發設置教程(IMAP)...

網易閃電郵企業郵箱收發設置教程(IMAP)發表時間 2019-05-30人氣 73(1)啟動閃電郵后&#xff0c;點擊“郵箱---新建郵箱賬戶”菜單&#xff0c;如下圖&#xff1a;(2)輸入“郵箱地址和密碼”&#xff0c;點擊下拉箭頭繼續設置&#xff0c;設置完成后點擊下一步&#xff0c;如下圖…

訂餐系統之Excel批量導入

批量導入現在基本已經成為各類系統的標配了&#xff0c;當前&#xff0c;我們訂餐系統也不例外&#xff0c;什么商家呀、商品呀、優惠碼之類的&#xff0c;都少不了。畢竟嘛&#xff0c;對非開發人員來說&#xff0c;看到Excel肯定比看到很多管理系統還是要親切很多的。這里&am…

需要忽略的一些信號

程序往往會因為收到一些信號導致退出&#xff0c;但很多時候并不是我們想要的&#xff0c;比如往一個已經關閉的socket連接發送數據就會受到SIGPIPE,此信號默認會退出程序&#xff0c;但其實大部分時候我們并不想這么做&#xff0c;所以需要忽略一些信號。常見的有 SIGPIPE SIG…

獲取網頁中選中的文字

獲取頁面中選中的文字 //獲取頁面中選中的文字 function getSelectedText(){if(window.getSelection){ //FFreturn window.getSelection().toString();}else{ //IEreturn document.selection.createRange().text;} }設置或獲取輸入框的選中文字 //設置文字選中 function setSe…

云服務器和獨享虛擬主機的區別,獨享虛擬主機和云服務器的幾大區別

獨享虛擬主機和云服務器的幾大區別發布時間&#xff1a;2020-10-15 19:05:51來源&#xff1a;億速云閱讀&#xff1a;99作者&#xff1a;Leah欄目&#xff1a;云計算今天就跟大家聊聊有關獨享虛擬主機和云服務器的幾大區別&#xff0c;可能很多人都不太了解&#xff0c;為了讓大…

oracle數據庫之數據導入問題

2019獨角獸企業重金招聘Python工程師標準>>> 在oracle數據庫中建立好數據庫以后&#xff0c;需要使用PLSQL進行用戶創建&#xff0c;打開PLSQL&#xff0c;使用時需要使用最高權限進入PLSQL。如下圖&#xff1a; 不需要使用用戶名和密碼&#xff0c;進入數據庫操作。…

轉向ARC的說明

轉自hherima的博客原文&#xff1a;Transitioning to ARC Release Notes&#xff08;蘋果官方文檔&#xff09; ARC是一個編譯器特征&#xff0c;它提供了對OC對象自動管理內存。ARC讓開發者專注于感興趣的代碼和對象的關系&#xff0c;而不用考慮對象的retain和release。 概要…

ubuntu11.10 samba服務器配置

安裝samba可以實現linux下文件和window共享&#xff0c;這樣window下就可以操作linux的文件了。 1、關閉LINUX防火墻 sudo ufw disable 注&#xff1a;ufw是linux下的防火墻操作命令&#xff0c;相關的操作可以查看命令幫助 2、先卸載samba-common sudo ap…

win服務器創建文件夾命令,Win10系統如利用命令提示符或WSL創建任意大小空白文件...

要測試網盤或服務器的上傳&#xff0c;下載速度&#xff0c;需要指定大小的文件用來測試。創建的空白文件雖然沒有任何內容&#xff0c;但是有大小&#xff0c;可以用來測試實際傳輸速度、覆蓋已刪除數據等用途。這篇文章是本站教大家在Win10中用命令或WSL創建任意大小空白文件…

計算UILabel帶行間距的行高

為什么80%的碼農都做不了架構師&#xff1f;>>> //設置lab的行間距 NSMutableAttributedString *attributedString [[NSMutableAttributedString alloc] initWithString:_doubletStr]; NSMutableParagraphStyle *paragraphStyle [[NSMutableParagraphStyle alloc…