本篇文章給大家談?wù)刧is地圖渲染優(yōu)化，以及GIS渲染對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。
目錄一覽：
- 1、SuperMap GIS服務(wù)加速解決方案
- 2、從零打造一個(gè)Web地圖引擎
- 3、三維GIS平臺(tái)標(biāo)繪新玩法，再不了解你就out了！
- 4、三維GIS建模和可視化用什么軟件好
- 5、怎樣用GIS做地圖
SuperMap GIS服務(wù)加速解決方案
###1.簡(jiǎn)介
SuperMap GIS服務(wù)加速方案采用服務(wù) *** 與緩存，實(shí)現(xiàn)服務(wù)加速。服務(wù) *** 是采用GIS分發(fā)服務(wù)器SuperMap iExpress將GIS應(yīng)用服務(wù)器SuperMap iServer中的服務(wù)再發(fā)布，提供給客戶端。服務(wù)內(nèi)容可自動(dòng)同步，并且SuperMap iExpress提供了多種服務(wù)接口實(shí)現(xiàn)服務(wù)分發(fā)，可滿足更多客戶端需求。
除了對(duì)用戶請(qǐng)求過(guò)的內(nèi)容生成緩存以外，也可通過(guò)智能緩存分發(fā)將iServer中生產(chǎn)的地圖緩存推送至iExpress，因此，客戶端的服務(wù)請(qǐng)求可直接由iExpress做出響應(yīng)，從而提升服務(wù)效率。
####1.1 組成
添加微信好友, 獲取更多信息
復(fù)制微信號(hào)
SuperMap加速方案由GIS服務(wù)中心、服務(wù) *** 層、客戶端組成。GIS服務(wù)中心提供了整個(gè)應(yīng)用系統(tǒng)中所需的服務(wù)。服務(wù) *** 層位于客戶端和GIS服務(wù)中心之間，通過(guò)對(duì)GIS服務(wù)中心發(fā)布的服務(wù)進(jìn)行 *** 與緩存，快速向客戶端提供服務(wù)。客戶端是訪問(wèn)服務(wù)的入口，可基于服務(wù)輪詢機(jī)制向服務(wù)器發(fā)送請(qǐng)求。
###2 部署模式
####2.1 前置機(jī)部署模式
前置機(jī)部署模式是將iExpress部署在靠近客戶端的位置，以就近提供服務(wù)。
對(duì)于客戶端在企業(yè)內(nèi)部 *** 環(huán)境的情況，將iExpress與用戶主機(jī)部署在同一個(gè) *** 環(huán)境中。在iClient中將服務(wù)請(qǐng)求的目標(biāo)地址設(shè)定為iExpress的地址，用戶在訪問(wèn)服務(wù)時(shí)，直接由相應(yīng)的iExpress進(jìn)行響應(yīng)。
此外，iExpress提供了緩存生產(chǎn)、瓦片發(fā)布能力，在內(nèi)部 *** 環(huán)境下，可看作小型的前置服務(wù)中心，能夠滿足內(nèi)部環(huán)境的服務(wù)需求，可保證企業(yè)內(nèi)部 *** 的安全性。
對(duì)于外部 *** 環(huán)境的情況，通過(guò)搭建區(qū)域的GIS服務(wù)中心，為客戶端就近提供服務(wù)。例如將iExpress部署在靠近用戶的省會(huì)城市，作為省級(jí)服務(wù)中心，用于為該省的用戶快速提供GIS服務(wù)。如果用戶量大且分散，可繼續(xù)搭建市級(jí)、縣級(jí)等GIS服務(wù)中心。
可以在iClient中將服務(wù)請(qǐng)求的目標(biāo)地址設(shè)定為iExpress的地址，也可以先向iServer獲取可用的iExpress的地址列表，再向這些iExpress發(fā)送服務(wù)請(qǐng)求。如果采用后者，需要先在iServer中預(yù)先為各網(wǎng)段的iClient分配iExpress。
前置機(jī)部署模式可用于用戶量大、分散、與GIS服務(wù)中心相距較遠(yuǎn)的應(yīng)用系統(tǒng)中。通過(guò)在用戶附近加入服務(wù) *** 層，基于就近訪問(wèn)原則，實(shí)現(xiàn)對(duì)GIS服務(wù)的加速。
####2.2 反向 *** 部署模式
采用反向 *** 模式，是將iExpress部署在GIS服務(wù)中心內(nèi)部，同GIS應(yīng)用服務(wù)器iServer部署在同一 *** 環(huán)境中。在iServer中為不同網(wǎng)段的用戶分配提供服務(wù)的iExpress，然后在iClient中進(jìn)行配置，使先獲取iServer為其分配的iExpress地址列表，再向iExpress發(fā)送服務(wù)請(qǐng)求。
在反向 *** 部署模式中，客戶端與iServer的交互僅為一次，而服務(wù)內(nèi)容是由多臺(tái)iExpress提供，因而可緩解iServer壓力。
###3 方案特點(diǎn)
從零打造一個(gè)Web地圖引擎
說(shuō)到地圖，大家一定很熟悉，平時(shí)應(yīng)該都使用過(guò)百度地圖、高德地圖、騰訊地圖等，如果涉及到地圖相關(guān)的開發(fā)需求，也有很多選擇，比如前面的幾個(gè)地圖都會(huì)提供一套 js API ，此外也有一些開源地圖框架可以使用，比如 OpenLayers 、 Leaflet 等。
那么大家有沒(méi)有想過(guò)這些地圖是怎么渲染出來(lái)的呢，為什么根據(jù)一個(gè)經(jīng)緯度就能顯示對(duì)應(yīng)的地圖呢，不知道沒(méi)關(guān)系，本文會(huì)帶各位從零實(shí)現(xiàn)一個(gè)簡(jiǎn)單的地圖引擎，來(lái)幫助大家了解 GIS 基礎(chǔ)知識(shí)及 Web 地圖的實(shí)現(xiàn)原理。
首先我們?nèi)ジ叩碌貓D上選個(gè)經(jīng)緯度，作為我們后期的地圖中心點(diǎn)，打開 高德坐標(biāo)拾取 工具，隨便選擇一個(gè)點(diǎn)：
筆者選擇了杭州的雷峰塔，經(jīng)緯度為： [120.148732,30.231006] 。
地圖瓦片我們使用高德的在線瓦片，地址如下：
目前各大地圖廠商的瓦片服務(wù)遵循的規(guī)則是有不同的：
谷歌和 TMS 的瓦片區(qū)別可以通過(guò)該地址可視化的查看： 地圖瓦片 。
雖然規(guī)范不同，但原理基本是一致的，都是把地球投影成一個(gè)巨大的正方形世界平面圖，然后按照四叉樹進(jìn)行分層切割，比如之一層，只有一張瓦片，顯示整個(gè)世界的信息，所以基本只能看到洲和海的名稱和邊界線，第二層，切割成四張瓦片，顯示信息稍微多了一點(diǎn)，以此類推，就像一個(gè)金字塔一樣，底層分辨率更高，顯示的細(xì)節(jié)最多，瓦片數(shù)也最多，頂層分辨率更低，顯示的信息很少，瓦片數(shù)量相對(duì)也最少：
每一層的瓦片數(shù)量計(jì)算公式：
十八層就需要 68719476736 張瓦片，所以一套地圖瓦片整體數(shù)量是非常龐大的。
瓦片切好以后，通過(guò)行列號(hào)和縮放層級(jí)來(lái)保存，所以可以看到瓦片地址中有三個(gè)變量： x 、 y 、 z
通過(guò)這三個(gè)變量就可以定位到一張瓦片，比如下面這個(gè)地址，行號(hào)為 109280 ，列號(hào)為 53979 ，縮放層級(jí)為 17 ：
對(duì)應(yīng)的瓦片為：
關(guān)于瓦片的更多信息可以閱讀 瓦片地圖原理 。
高德地圖使用的是 GCJ-02坐標(biāo)系 ，也稱火星坐標(biāo)系，由中國(guó)國(guó)家測(cè)繪局在02年發(fā)布，是在GPS坐標(biāo)（ WGS-84 坐標(biāo)系）基礎(chǔ)上經(jīng)加密后而來(lái)，也就是增加了非線性的偏移，讓你摸不準(zhǔn)真實(shí)位置，為了國(guó)家安全，國(guó)內(nèi)地圖服務(wù)商都需要使用 GCJ-02坐標(biāo)系 。
WGS-84 坐標(biāo)系是國(guó)際通用的標(biāo)準(zhǔn)， EPSG 編號(hào)為 EPSG:4326 ，通常GPS設(shè)備獲取到的原始經(jīng)緯度和國(guó)外的地圖廠商使用的都是 WGS-84 坐標(biāo)系。
這兩種坐標(biāo)系都是地理坐標(biāo)系，球面坐標(biāo)，單位為 度 ，這種坐標(biāo)方便在地球上定位，但是不方便展示和進(jìn)行面積距離計(jì)算，我們印象中的地圖都是平面的，所以就有了另外一種平面坐標(biāo)系，平面坐標(biāo)系是通過(guò)投影的方式從地理坐標(biāo)系中轉(zhuǎn)換過(guò)來(lái)，所以也稱為投影坐標(biāo)系，通常單位為 米 ，投影坐標(biāo)系根據(jù)投影方式的不同存在多種，在 Web 開發(fā)的場(chǎng)景里通常使用的是 Web墨卡托投影 ，編號(hào)為 EPSG:3857 ，它基于 墨卡托投影 ，把 WGS-84 坐標(biāo)系投影成正方形：
這是通過(guò)舍棄了南北 85.051129緯度 以上的地區(qū)實(shí)現(xiàn)的，因?yàn)樗钦叫危砸粋€(gè)大的正方形可以很方便的被分割為更小的正方形。
坐標(biāo)系更詳細(xì)的信息可參考 GIS之坐標(biāo)系統(tǒng) ， EPSG:3857 的詳細(xì)信息可參考 EPSG:3857 。
上一節(jié)里我們簡(jiǎn)單介紹了一下坐標(biāo)系，按照 Web 地圖的標(biāo)準(zhǔn)，我們的地圖引擎也選擇支持 EPSG:3857 投影，但是我們通過(guò)高德工具獲取到的是火星坐標(biāo)系的經(jīng)緯度坐標(biāo)，所以之一步要把經(jīng)緯度坐標(biāo)轉(zhuǎn)換為 Web墨卡托 投影坐標(biāo)，這里為了簡(jiǎn)單，先直接把火星坐標(biāo)當(dāng)做 WGS-84 坐標(biāo)，后面再來(lái)看這個(gè)問(wèn)題。
轉(zhuǎn)換 *** 網(wǎng)上一搜就有：
3857 坐標(biāo)有了，它的單位是 米 ，那么怎么轉(zhuǎn)換成瓦片的行列號(hào)呢，這就涉及到 分辨率 的概念了，即地圖上一像素代表實(shí)際多少米，分辨率如果能從地圖廠商的文檔里獲取是更好的，如果找不到，也可以簡(jiǎn)單計(jì)算一下（如果使用計(jì)算出來(lái)的也不行，那就只能求助搜索引擎了），我們知道地球半徑是 6378137 米， 3857 坐標(biāo)系把地球當(dāng)做正圓球體來(lái)處理，所以可以算出地球周長(zhǎng)，投影是貼著地球赤道的：
所以投影成正方形的世界平面圖后的邊長(zhǎng)代表的就是地球的周長(zhǎng)，前面我們也知道了每一層級(jí)的瓦片數(shù)量的計(jì)算方式，而一張瓦片的大小一般是 256*256 像素，所以用地球周長(zhǎng)除以展開后的世界平面圖的邊長(zhǎng)就知道了地圖上每像素代表實(shí)際多少米：
地球周長(zhǎng)算出來(lái)是 40075016.68557849 ，可以看到 OpenLayers 就是這么計(jì)算的：
3857 坐標(biāo)的單位是 米 ，那么把坐標(biāo)除以分辨率就可以得到對(duì)應(yīng)的像素坐標(biāo)，再除以 256 ，就可以得到瓦片的行列號(hào)：
函數(shù)如下：
接下來(lái)我們把層級(jí)固定為 17 ，那么分辨率 resolution 就是 1.194328566955879 ，雷峰塔的經(jīng)緯度轉(zhuǎn)成 3857 的坐標(biāo)為： [13374895.665697495, 3533278.205310311] ，使用上面的函數(shù)計(jì)算出來(lái)行列號(hào)為： [43744, 11556] ，我們把這幾個(gè)數(shù)據(jù)代入瓦片的地址里進(jìn)行訪問(wèn)：
一片空白，這是為啥呢，其實(shí)是因?yàn)樵c(diǎn)不一樣， 4326 和 3857 坐標(biāo)系的原點(diǎn)在赤道和本初子午線相交點(diǎn)，非洲邊上的海里，而瓦片的原點(diǎn)在左上角：
再來(lái)看下圖會(huì)更容易理解：
3857 坐標(biāo)系的原點(diǎn)相當(dāng)于在世界平面圖的中間，向右為 x 軸正方向，向上為 y 軸正方向，而瓦片地圖的原點(diǎn)在左上角，所以我們需要根據(jù)圖上【綠色虛線】的距離計(jì)算出【橙色實(shí)線】的距離，這也很簡(jiǎn)單，水平坐標(biāo)就是水平綠色虛線的長(zhǎng)度加上世界平面圖的一半，垂直坐標(biāo)就是世界平面圖的一半減去垂直綠色虛線的長(zhǎng)度，世界平面圖的一半也就是地球周長(zhǎng)的一半，修改 getTileRowAndCol 函數(shù)：
這次計(jì)算出來(lái)的瓦片行列號(hào)為 [109280, 53979] ，代入瓦片地址：
結(jié)果如下：
可以看到雷峰塔出來(lái)了。
我們現(xiàn)在能根據(jù)一個(gè)經(jīng)緯度找到對(duì)應(yīng)的瓦片，但是這還不夠，我們的目標(biāo)是要能在瀏覽器上顯示出來(lái)，這就需要解決兩個(gè)問(wèn)題，一個(gè)是加載多少塊瓦片，二是計(jì)算每一塊瓦片的顯示位置。
渲染瓦片我們使用 canvas 畫布，模板如下：
地圖畫布容器 map 的大小我們很容易獲取：
地圖中心點(diǎn)我們?cè)O(shè)在畫布中間，另外中心點(diǎn)的經(jīng)緯度 center 和縮放層級(jí) zoom 因?yàn)槎际俏覀冏约涸O(shè)定的，所以也是已知的，那么我們可以計(jì)算出中心坐標(biāo)對(duì)應(yīng)的瓦片：
縮放層級(jí)還是設(shè)為 17 ，中心點(diǎn)還是使用雷峰塔的經(jīng)緯度，那么對(duì)應(yīng)的瓦片行列號(hào)前面我們已經(jīng)計(jì)算過(guò)了，為 [109280, 53979] 。
中心坐標(biāo)對(duì)應(yīng)的瓦片行列號(hào)知道了，那么該瓦片左上角在世界平面圖中的像素位置我們也就知道了：
計(jì)算出來(lái)為 [27975680, 13818624] 。這個(gè)坐標(biāo)怎么轉(zhuǎn)換到屏幕上呢，請(qǐng)看下圖：
中心經(jīng)緯度的瓦片我們計(jì)算出來(lái)了，瓦片左上角的像素坐標(biāo)也知道了，然后我們?cè)儆?jì)算出中心經(jīng)緯度本身對(duì)應(yīng)的像素坐標(biāo)，那么和瓦片左上角的差值就可以計(jì)算出來(lái)，最后我們把畫布的原點(diǎn)移動(dòng)到畫布中間（畫布默認(rèn)原點(diǎn)為左上角，x軸正方向向右，y軸正方向向下），也就是把中心經(jīng)緯度作為坐標(biāo)原點(diǎn)，那么中心瓦片的顯示位置就是這個(gè)差值。
補(bǔ)充一下將經(jīng)緯度轉(zhuǎn)換成像素的 *** ：
計(jì)算中心經(jīng)緯度對(duì)應(yīng)的像素坐標(biāo)：
計(jì)算差值：
最后通過(guò) canvas 來(lái)把中心瓦片渲染出來(lái)：
這里先來(lái)看看 getTileUrl *** 的實(shí)現(xiàn)：
這里隨機(jī)了四個(gè)子域： webrd01 、 webrd02 、 webrd03 、 webrd04 ，這是因?yàn)闉g覽器對(duì)于同一域名同時(shí)請(qǐng)求的資源是有數(shù)量限制的，而當(dāng)?shù)貓D層級(jí)變大后需要加載的瓦片數(shù)量會(huì)比較多，那么均勻分散到各個(gè)子域下去請(qǐng)求可以更快的渲染出所有瓦片，減少排隊(duì)等待時(shí)間，基本所有地圖廠商的瓦片服務(wù)地址都支持多個(gè)子域。
為了方便看到中心點(diǎn)的位置，我們?cè)兕~外渲染兩條中心輔助線，效果如下：
可以看到中心點(diǎn)確實(shí)是雷峰塔，當(dāng)然這只是渲染了中心瓦片，我們要的是瓦片鋪滿整個(gè)畫布，對(duì)于其他瓦片我們都可以根據(jù)中心瓦片計(jì)算出來(lái)，比如中心瓦片左邊的一塊，它的計(jì)算如下：
所以我們只要計(jì)算出中心瓦片四個(gè)方向各需要幾塊瓦片，然后用一個(gè)雙重循環(huán)即可計(jì)算出畫布需要的所有瓦片，計(jì)算需要的瓦片數(shù)量很簡(jiǎn)單，請(qǐng)看下圖：
畫布寬高的一半減去中心瓦片占據(jù)的空間即可得到該方向剩余的空間，然后除以瓦片的尺寸就知道需要幾塊瓦片了：
我們把中心瓦片作為原點(diǎn)，坐標(biāo)為 [0, 0] ，來(lái)個(gè)雙重循環(huán)掃描一遍即可渲染出所有瓦片：
效果如下：
很完美。
拖動(dòng)可以這么考慮，前面已經(jīng)實(shí)現(xiàn)了渲染指定經(jīng)緯度的瓦片，當(dāng)我們按住進(jìn)行拖動(dòng)時(shí)，可以知道鼠標(biāo)滑動(dòng)的距離，然后把該距離，也就是像素轉(zhuǎn)換成經(jīng)緯度的數(shù)值，最后我們?cè)俑庐?dāng)前中心點(diǎn)的經(jīng)緯度，并清空畫布，調(diào)用之前的 *** 重新渲染，不停重繪造成是在移動(dòng)的視覺(jué)假象。
監(jiān)聽鼠標(biāo)相關(guān)事件：
在 onMousemove *** 里計(jì)算拖動(dòng)后的中心經(jīng)緯度及重新渲染畫布：
movementX 和 movementY 屬性能獲取本次和上一次鼠標(biāo)事件中的移動(dòng)值，兼容性不是很好，不過(guò)自己計(jì)算該值也很簡(jiǎn)單，詳細(xì)請(qǐng)移步 MDN 。乘以當(dāng)前分辨率把 像素 換算成 米 ，然后把當(dāng)前中心點(diǎn)經(jīng)緯度也轉(zhuǎn)成 3857 的 米 坐標(biāo)，偏移本次移動(dòng)的距離，最后再轉(zhuǎn)回 4326 的經(jīng)緯度坐標(biāo)作為更新后的中心點(diǎn)即可。
為什么 x 是減， y 是加呢，很簡(jiǎn)單，我們鼠標(biāo)向右和向下移動(dòng)時(shí)距離是正的，相應(yīng)的地圖會(huì)向右或向下移動(dòng)， 4326 坐標(biāo)系向右和向上為正方向，那么地圖向右移動(dòng)時(shí)，中心點(diǎn)顯然是相對(duì)來(lái)說(shuō)是向左移了，因?yàn)橄蛴覟檎较颍灾行狞c(diǎn)經(jīng)度方向就是減少了，所以是減去移動(dòng)的距離，而地圖向下移動(dòng)，中心點(diǎn)相對(duì)來(lái)說(shuō)是向上移了，因?yàn)橄蛏蠟檎较颍灾行狞c(diǎn)緯度方向就是增加了，所以加上移動(dòng)的距離。
更新完中心經(jīng)緯度，然后清空畫布重新繪制：
效果如下：
可以看到已經(jīng)凌亂了，這是為啥呢，其實(shí)是因?yàn)閳D片加載是一個(gè)異步的過(guò)程，我們鼠標(biāo)移動(dòng)過(guò)程中，會(huì)不斷的計(jì)算出要加載的瓦片進(jìn)行加載，但是可能上一批瓦片還沒(méi)加載完成，鼠標(biāo)已經(jīng)移動(dòng)到新的位置了，又計(jì)算出一批新的瓦片進(jìn)行加載，此時(shí)上一批瓦片可能加載完成并渲染出來(lái)了，但是這些瓦片有些可能已經(jīng)被移除畫布，不需要顯示，有些可能還在畫布內(nèi)，但是使用的還是之前的位置，渲染出來(lái)也是不對(duì)的，同時(shí)新的一批瓦片可能也加載完成并渲染出來(lái)，自然導(dǎo)致了最終顯示的錯(cuò)亂。
知道原因就簡(jiǎn)單了，首先我們加個(gè)緩存對(duì)象，因?yàn)樵谕蟿?dòng)過(guò)程中，很多瓦片只是位置變了，不需要重新加載，同一個(gè)瓦片加載一次，后續(xù)只更新它的位置即可；另外再設(shè)置一個(gè)對(duì)象來(lái)記錄當(dāng)前畫布上應(yīng)該顯示的瓦片，防止不應(yīng)該出現(xiàn)的瓦片渲染出來(lái)：
因?yàn)樾枰涗浲咂奈恢谩⒓虞d狀態(tài)等信息，我們創(chuàng)建一個(gè)瓦片類：
然后修改之前的雙重循環(huán)渲染瓦片的邏輯：
效果如下：
可以看到，拖動(dòng)已經(jīng)正常了，當(dāng)然，上述實(shí)現(xiàn)還是很粗糙的，需要優(yōu)化的地方很多，比如：
1.一般會(huì)先排個(gè)序，優(yōu)先加載中心瓦片
2.緩存的瓦片越來(lái)越多肯定也會(huì)影響性能，所以還需要一些清除策略
這些問(wèn)題有興趣的可以自行思考。
拖動(dòng)是實(shí)時(shí)更新中心點(diǎn)經(jīng)緯度，那么縮放自然更新縮放層級(jí)就行了：
效果如下：
功能是有了，不過(guò)效果很一般，因?yàn)槲覀兤匠Ｊ褂玫牡貓D縮放都是有一個(gè)放大或縮小的過(guò)渡動(dòng)畫，而這個(gè)是直接空白然后重新渲染，不仔細(xì)看都不知道是放大還是縮小。
所以我們不妨加個(gè)過(guò)渡效果，當(dāng)我們鼠標(biāo)滾動(dòng)后，先將畫布放大或縮小，動(dòng)畫結(jié)束后再根據(jù)最終的縮放值來(lái)渲染需要的瓦片。
畫布默認(rèn)縮放值為 1 ，放大則在此基礎(chǔ)上乘以 2 倍，縮小則除以 2 ，然后動(dòng)畫到目標(biāo)值，動(dòng)畫期間設(shè)置畫布的縮放值及清空畫布，重新繪制畫布上的已有瓦片，達(dá)到放大或縮小的視覺(jué)效果，動(dòng)畫結(jié)束后再調(diào)用 renderTiles 重新渲染最終縮放值需要的瓦片。
效果如下：
雖然效果還是一般，不過(guò)至少能看出來(lái)是在放大還是縮小。
前面還遺留了一個(gè)小問(wèn)題，即我們把高德工具上選出的經(jīng)緯度直接當(dāng)做 4326 經(jīng)緯度，前面也講過(guò)，它們之間是存在偏移的，比如手機(jī) GPS 獲取到的經(jīng)緯度一般都是 84 坐標(biāo)，直接在高德地圖顯示，會(huì)發(fā)現(xiàn)和你實(shí)際位置不一樣，所以就需要進(jìn)行一個(gè)轉(zhuǎn)換，有一些工具可以幫你做些事情，比如 Gcoord 、 coordtransform 等。
上述效果看著比較一般，其實(shí)只要在上面的基礎(chǔ)上稍微加一點(diǎn)瓦片的淡出動(dòng)畫，效果就會(huì)好很多，目前一般都是使用 canvas 來(lái)渲染 2D 地圖，如果自己實(shí)現(xiàn)動(dòng)畫不太方便，也有一些強(qiáng)大的 canvas 庫(kù)可以選擇，筆者最后使用 Konva.js 庫(kù)重做了一版，加入了瓦片淡出動(dòng)畫，最終效果如下：
另外只要搞清楚各個(gè)地圖的瓦片規(guī)則，就能稍加修改支持更多的地圖瓦片：
具體實(shí)現(xiàn)限于篇幅不再展開，有興趣的可以閱讀本文源碼。
本文詳細(xì)的介紹了一個(gè)簡(jiǎn)單的 web 地圖開發(fā)過(guò)程，上述實(shí)現(xiàn)原理僅是筆者的個(gè)人思路，不代表 openlayers 等框架的原理，因?yàn)楣P者也是 GIS 的初學(xué)者，所以難免會(huì)有問(wèn)題，或更好的實(shí)現(xiàn)，歡迎指出。
在線 demo ：
完整源碼：
三維GIS平臺(tái)標(biāo)繪新玩法，再不了解你就out了！
地圖標(biāo)繪指在地圖背景上標(biāo)繪各種具有空間特征的事、物的分布狀態(tài)或行動(dòng)部署。標(biāo)繪功能廣泛應(yīng)用于電力、通信和應(yīng)急等多個(gè)行業(yè)和領(lǐng)域，它可以用來(lái)表達(dá)各種信息，描述各種對(duì)象，表示各種資源，還可以渲染業(yè)務(wù)進(jìn)度和流程，以便于三維可視化分析。
1.三維地球上的標(biāo)繪
標(biāo)繪技術(shù)是三維GIS的一個(gè)重要技術(shù)手段，在幾何表達(dá)上主要分為點(diǎn)標(biāo)繪、線標(biāo)繪、面標(biāo)繪、體標(biāo)繪，常用的為點(diǎn)、線、面的形式。
01 點(diǎn)標(biāo)繪
點(diǎn)標(biāo)繪用以表示大小可以忽略不計(jì)的小面積地物或點(diǎn)狀地物，一般點(diǎn)標(biāo)繪只有位置信息和屬性信息，分別表征其定位含義和屬性含義。
02 線標(biāo)繪
線標(biāo)繪通常采用折線法實(shí)現(xiàn)，在特定的場(chǎng)景中線標(biāo)繪有兩種表現(xiàn)形式：一種是沒(méi)有寬度的線即單線，用于表達(dá)邊界線；另一種是從中心向兩邊擴(kuò)展為面的線，即帶狀標(biāo)繪，如用于表達(dá)道路、河流等。
03 面標(biāo)繪
面標(biāo)繪一般用于表達(dá)一個(gè)特定的區(qū)域，如受災(zāi)區(qū)域、滑坡范圍、規(guī)劃區(qū)等。
04 體標(biāo)繪
體標(biāo)繪采用簡(jiǎn)單體或?qū)嶓w模型來(lái)表示三維場(chǎng)景中的具體地物。
2.標(biāo)繪功能的應(yīng)用場(chǎng)景
標(biāo)繪功能廣泛應(yīng)用于電力、通信和應(yīng)急、地籍調(diào)查、規(guī)劃設(shè)計(jì)等多個(gè)行業(yè)和領(lǐng)域。
以下以地震場(chǎng)景應(yīng)急救援為例 ：
在地震災(zāi)害場(chǎng)景中，“標(biāo)繪”功能模塊的任務(wù)主要有三，即初步展示階段、交互分析階段和輔助決策與預(yù)演模擬階段。
在之一階段，通常利用批量點(diǎn)標(biāo)繪加實(shí)體模型和文字標(biāo)注展示災(zāi)區(qū)學(xué)校、 *** 機(jī)構(gòu)、醫(yī)院等的分布情況，并分析災(zāi)區(qū)居民的主要聚集地，給分析人員提供整體的初步認(rèn)識(shí)；
在第二階段，綜合使用各類標(biāo)注 *** 及空間表現(xiàn)手段對(duì)災(zāi)區(qū)進(jìn)一步分析，為救援方案的制定提供輔助信息；
在第三階段，分析人員借助前兩個(gè)階段的綜合展示與分析成果，制定初步的備選救援方案，并以標(biāo)繪形式進(jìn)行動(dòng)態(tài)預(yù)演和模擬，判斷不同方案的優(yōu)劣性并實(shí)時(shí)改進(jìn)救援方案，為救援指揮順利開展提供保障。
3.一種便捷的標(biāo)繪 ***
在最新發(fā)布的EasyEarth版本中，著重優(yōu)化了點(diǎn)、線、面標(biāo)繪功能的顯示問(wèn)題。 可以做到根據(jù)用戶在三維球上捕捉的對(duì)象類型進(jìn)行貼對(duì)象顯示，影像、地形、傾斜、傳統(tǒng)模型等數(shù)據(jù)均可做到完美貼合。
點(diǎn)標(biāo)繪效果
線標(biāo)繪效果
面標(biāo)繪效果
傾斜數(shù)據(jù)面標(biāo)繪
地形數(shù)據(jù)面標(biāo)繪
傳統(tǒng)模型面標(biāo)繪
以上場(chǎng)景及功能均可免費(fèi)體驗(yàn)！
三維GIS建模和可視化用什么軟件好
將可視化功能和 GIS 相結(jié)合，讓用戶可以將已有的地理信息數(shù)據(jù)進(jìn)行展示和查詢，以豐富的可視化形式將地理信息系統(tǒng)（Geographic Information System，GIS）數(shù)據(jù)進(jìn)行展示和疊加，實(shí)現(xiàn)如站點(diǎn)分布、物流線路軌跡、區(qū)域信息查看等。有效提升物流運(yùn)輸效率，降低物流管理成本，優(yōu)化物流各個(gè)環(huán)節(jié)，促進(jìn)智慧物流行業(yè)的建設(shè)和發(fā)展。
實(shí)現(xiàn)從物流運(yùn)輸 *** 物分揀再到站點(diǎn)配送，數(shù)據(jù)可視化技術(shù)涵蓋物流業(yè)務(wù)全部鏈條，滿足物流行業(yè)各環(huán)節(jié)的可視化需求。智慧物流可視化大屏結(jié)合 GIS 地圖展現(xiàn)出物流所在區(qū)域的相關(guān)內(nèi)容，圍繞全球范圍內(nèi)各區(qū)域的交通運(yùn)輸、類型指標(biāo)、集裝箱倉(cāng)庫(kù)調(diào)配等多方面上千萬(wàn)條數(shù)據(jù)指標(biāo)展開宏觀的監(jiān)控分析。
基于物流產(chǎn)業(yè)已有大量的站點(diǎn)、設(shè)施、倉(cāng)庫(kù)等各項(xiàng)指標(biāo)對(duì)應(yīng)的地理位置信息，結(jié)合 HT for Web GIS 以地圖為背景，單個(gè)地理坐標(biāo)顯示為定點(diǎn)，體現(xiàn)地圖上千萬(wàn)條數(shù)據(jù)點(diǎn)的標(biāo)注，用點(diǎn)的大小、顏色深淺等元素顯示密集度和分布情況。讓數(shù)據(jù)淺顯易懂且盡收眼底，做到一眼望穿，心中有數(shù)。
可提供分析各區(qū)域物流的點(diǎn)、線、面基本圖形間關(guān)系：查詢區(qū)間內(nèi)配送站點(diǎn)的路況；某區(qū)域同周邊的地理分布情況；倉(cāng)儲(chǔ)中心周圍幾個(gè)公里囊括的全部站點(diǎn)情況等。
可運(yùn)用引擎強(qiáng)大的渲染功能，實(shí)時(shí)動(dòng)畫形式真實(shí)還原船舶停靠各港口的行駛路線，且提供實(shí)時(shí)信息交互功能與歷史信息回溯對(duì)比，用戶僅需點(diǎn)擊【航線查看】，即可追蹤船舶動(dòng)態(tài)信息。以“任務(wù)推進(jìn)”形式實(shí)現(xiàn)智慧港口的“扁平化管理”，促進(jìn)信息共享，強(qiáng)化貨運(yùn)航線管理水平。
可支持加載不同地圖底圖，加載 3D Tiles，可以根據(jù)經(jīng)緯度繪制點(diǎn)、線、面元素信息，將可視化與地理信息有力結(jié)合。以此搭建的智慧物流平臺(tái)，目的以實(shí)現(xiàn)物流業(yè)務(wù)的可視、可感、可知為基本準(zhǔn)則，實(shí)施監(jiān)管信息預(yù)處理、運(yùn)行狀態(tài)可視化、應(yīng)急決策支撐，徹底擺脫物流業(yè)務(wù)邏輯的復(fù)雜性，消除數(shù)據(jù)孤島現(xiàn)象，致力讓物流行業(yè)持續(xù)向著智能化、數(shù)字化、綠色化的方向發(fā)展。
還可以實(shí)現(xiàn)防汛救災(zāi)工作的及時(shí)安排，及時(shí)布置，及時(shí)搶險(xiǎn)，及時(shí)救援。在 GIS 系統(tǒng)中對(duì)海量的 POI 數(shù)據(jù)、交通流量數(shù)據(jù)、規(guī)劃數(shù)據(jù)，現(xiàn)狀數(shù)據(jù)等進(jìn)行多樣化的可視化展示。根據(jù)收集的降雨量信息，推演洪水的到達(dá)時(shí)間，對(duì)小區(qū)百姓和水庫(kù)工作人員等做好提醒。
地理信息系統(tǒng)（Geographic Information System，GIS）在計(jì)算機(jī)硬、軟件系統(tǒng)支持下，對(duì)整個(gè)或部分地球表層（包括大氣層）空間中的有關(guān)地理分布數(shù)據(jù)進(jìn)行采集、儲(chǔ)存、管理、運(yùn)算、分析、顯示和描述的技術(shù)系統(tǒng)。一個(gè)單純的經(jīng)緯度坐標(biāo)只有置于特定的地理信息中，代表為某個(gè)地點(diǎn)、標(biāo)志、方位后，才會(huì)被用戶認(rèn)識(shí)和理解。GIS 能使應(yīng)急計(jì)劃者在自然災(zāi)害的情況下較易地計(jì)算出應(yīng)急反應(yīng)時(shí)間。
臺(tái)風(fēng)過(guò)境時(shí)降水量級(jí)大，河道湖庫(kù)連續(xù)長(zhǎng)時(shí)間高水位運(yùn)行，各級(jí)水利部門承受著較大壓力。需要時(shí)刻進(jìn)行監(jiān)測(cè)，有效進(jìn)行工程調(diào)度，密切關(guān)注天氣變化，及時(shí)做好洪水預(yù)報(bào)和信息發(fā)布，為各級(jí)決策提供信息支撐。
河道 3D 場(chǎng)景采用輕量化建模方案，通過(guò) Hightopo 自研引擎結(jié)合 GIS 實(shí)現(xiàn)了河道位置的精確還原。GIS 引擎，能夠與 3D 場(chǎng)景準(zhǔn)確同步，既保留了 GIS 引擎的效果和功能，同時(shí)又不去限制設(shè)計(jì)師在 3D 場(chǎng)景中的發(fā)揮；對(duì)應(yīng)的 2D 圖紙，適應(yīng)各種比例的屏幕，解決了不同屏幕比例下的展示問(wèn)題。
HT for Web GIS 在于運(yùn)用產(chǎn)品強(qiáng)大的可視化技術(shù)，將地理信息系統(tǒng)（Geographic Information System，GIS）的數(shù)據(jù)進(jìn)行豐富的可視化展示。以城市為基礎(chǔ)，對(duì)城市各類基礎(chǔ)設(shè)施數(shù)據(jù)以更加多樣化形式進(jìn)行可視化展示；將 GIS 數(shù)據(jù)和云計(jì)算、大數(shù)據(jù)、物聯(lián)網(wǎng)等技術(shù)相結(jié)合，構(gòu)建真正的數(shù)字經(jīng)濟(jì)，數(shù)字城市，數(shù)字中國(guó)；以時(shí)空為基礎(chǔ)，通過(guò)可視化分析技術(shù)，對(duì)城市的規(guī)劃、布局、分析和決策提供技術(shù)支撐，推進(jìn)城市數(shù)字化轉(zhuǎn)換和建設(shè)。
怎樣用GIS做地圖
如果已經(jīng)有了經(jīng)緯度，在ArcGIS軟件當(dāng)中可以利用菜單Tool-Add XY Data命令將這些數(shù)據(jù)導(dǎo)入到ArcGIS中。首先把數(shù)據(jù)在Excel中按照緯度、經(jīng)度、速度、方向等整理好并保存。接著在ArcGIS中單擊Tool-Add XY Data命令，選擇保存的Excel數(shù)據(jù)（需要2003格式的），X Field選擇緯度，Y Field選擇經(jīng)度，坐標(biāo)系統(tǒng)點(diǎn)擊Edit-Select-Geographic Coordinate Systems-World-WGS 1984.prj就可以得到一個(gè)點(diǎn)狀地圖了。
關(guān)于gis地圖渲染優(yōu)化和GIS渲染的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。
