GIS可視化——屬性圖

一、簡介

SuperMap iClient for JavaScript 提供了UTFGrid圖層（屬性圖），用於客戶端屬性信息的快速交互。 UTFGrid圖層從UTFGrid切片數據源讀取數據，其本質是基於JSON的ASCII 碼’字符畫’與屬性數據的結合。 UTFGrid圖層不能被可視化渲染，在地圖中使用這個圖層， 必須同時添加 SuperMap.Control.UTFGrid 控件類來控制觸發事件類型。

• 原理：通過請求瓦片數據（非圖片），將屬性信息保存到客服端UTFGrid圖層中，提高客戶端屬性信息的交互速度。
• 特點：根據屏幕像素位置在客戶端快速獲取圖層的屬性信息。
• 應用場景： UTFGrid圖層常用於客戶端需要快速響應屬性信息的場景。 當需要實時查詢地圖上某些地物屬性並且地物數量很大時，采用與服務器交互獲取屬性信息的方式需要頻繁的發起請求， 時間消耗較大， 而通過UTFGrid圖層，可以快速的獲取地物屬性信息，極大的提高用戶體驗。 例如：實現鼠標懸停或鼠標單擊某一地物時，快速獲取該地物某些屬性信息。

二、使用

下面展示屬性圖使用方式：

1、創建UTFGrid圖層

 

首先創建一個屬性圖對象。由於屬性圖從UTFGrid切片數據源讀取數據， 所以在創建屬性圖對象時可以根據需要指定utfTileSize 、pixcell、utfgridResolution等圖層屬性。

 

        var utfgrid = new SuperMap.Layer.UTFGrid("UTFGridLayer", url,
                {
                    layerName: "China_Province_R@China400",
                    utfTileSize: 256,
                    pixcell: 8,
                    isUseCache: true
                },
                {
                    utfgridResolution: 8
                }
        );
        

 

說明：pixcell與utfgridResolution兩個屬性有對應關系，在使用的時候要注意應用場景：

   1.其中pixcell為發送給服務端請求utfgrid瓦片的精度，數值越小，精度越高，相應的瓦片大小也就越大；

   2.utfgridResolution為客戶端解析瓦片使用的精度，應該與pixcell的值相等，否則會產生位置與屬性對應不上的問題；

   3.通常如果UTFGrid圖層為面圖層，對應的數據量會比較大，為了不影響頁面的正常瀏覽，可以將這兩個屬性設的大一些；

   4.isUseCache設置是否使用緩存，使用緩存能夠提高性能。

2、添加到地圖

 

然后將此圖層添加到map里面。

 

        //向map中添加圖層
        map.addLayers([utfgrid]);
        

 

3、創建UTFGrid控件

 

創建UTFGrid控件，通過layers屬性與先前創建的屬性圖utfgrid關聯，指定觸發事件類型為move。

 

         control = new SuperMap.Control.UTFGrid({
             layers: [utfgrid],
             callback: callback,
             handlerMode: "move"
         });
        

 

4、添加控件到地圖

 

將此控件添加到map里面。

 

        //向map中添加控件
        map.addControl(control);
        

 

5、處理事件

 

當鼠標事件觸發的位置恰好在UTFGrid圖層上有對應數據的時候調用回調函數callback。

回調函數callback的參數 infoLookup 是一個返回對象，該對象由一個或多個鍵值對組成， 其中鍵值為圖層索引，值為鼠標位置對應該圖層的數據（屬性信息），數據格式為JSON類型。 通過 infoLookup 對象，無需與服務器交互就可以快速獲取鼠標位置對應地物的屬性信息。

 

         var callback = function (infoLookup, loc, pixel) {
               closeInfoWin();
               if (infoLookup) {
                   var info;
                   for (var idx in infoLookup) {
                       info = infoLookup[idx];
                       if (info && info.data) {
                            //彈出框內容，info.data.NAME 就是當前鼠標位置對應要素的NAME屬性字段值
                           var dom = "<div style='font-size: 12px; color: #000000;border: 0.5px solid #000000'>"
                                + info.data.NAME + "< /div >";
                           //設置x與y的像素偏移量，不影響地圖瀏覽；
                           var xOff = (1 / map.getScale()) * 0.001;
                           var yOff = -(1 / map.getScale()) * 0.005;
                           var pos = new SuperMap.LonLat(loc.lon+xOff, loc.lat+yOff);
                           //新建一個彈出框對象
                           infowin = new SuperMap.Popup("chicken",
                                   pos,
                                   new SuperMap.Size(100, 20),
                                   dom,
                                   true, null);
                           infowin.autoSize=true;
                           map.addPopup(infowin);
                       }
                   }
               }
         };

         //關閉彈出窗
         function closeInfoWin() {
             if (infowin) {
                 try {
                     map.removePopup(infowin)
                 }
                 catch (e) {
                 }
             }
         }
        

 

這樣我們就可以獲得以下下效果：

當鼠標移動到中國的某個省份上時，彈出框顯示該省份的名稱。

完整范例請見 http://www.supermap.com.cn:8090/iserver/iClient/forJavaScript/examples/utfGridLayer.html

6、示例：UTFGrid國旗版

產品示例程序中提供了另一個屬性專題圖范例：UTFGrid國旗版。 該示例展示通過UTFGrid圖層快速的響應用戶的鼠標移動事件，顯示出當前鼠標對應國家的國旗和名稱。

完整范例請見 http://www.supermap.com.cn:8090/iserver/iClient/forJavaScript/examples/utfGridLayerFlags.html