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