作者：小陽

1、序言

本文主要是利用了UTFGrid圖層快速互動獲取地物資訊的特點，以SuperMap iClient for JavaScript的開發作為示範。（注：要實現本文所講述的功能，同時需要SuperMap iServer和SuperMap iClient for JavaScript 7C系列及以上的版本才支援）。

在此之前，我先簡要的講一下什麼是UTFGrid：UTFGrid只包含地物的屬性資訊，可以根據地物的螢幕畫素位置在客戶端快速獲地物的屬性資訊， 如：實現滑鼠懸停或滑鼠單擊某一地物時，快速獲取該地物某些屬性資訊。UTFGrid可由iServer動態生成，也可以將其預先切成瓦片。詳細瞭解UTFGrid（

2、優化思路

1.使用分散式切圖切屬性瓦片快取

這裡要著重說一下UTFGrid單元格網大小的設定，這個值決定了UTFGrid的效率和精準度，設定的值越小精度越高，但是單元格也會越多，在一定程度上也會影響效能，怎樣設定這個引數取決於地物的畫素尺寸。首先，這個引數能被瓦片的大小整除，比如UTFGrid的瓦片大小為256x256，那麼這個值就應該要被256整除。其次，我們需要參考地物在最小比例尺下的畫素尺寸來設定（UTFGrid隱藏的情況下除外），如：在地圖的最小比例尺下點符號的畫素尺寸大概為8x8的大小，這裡可以設定pixcell的值為8x8，在精度允許的情況下，這種情況推薦設定為16x16，因為8x8的單元格比較小，在監聽滑鼠事件時不易成功。

2.iServer啟用屬性瓦片快取

預設釋出的地圖服務是沒有啟用 UTFGrid快取的，需要進入到服務管理頁面找到釋出的地圖服務，然後點選進入到快取一欄勾選是否啟用屬性瓦片快取。

iServer預設將UTFGrid瓦片放置在\webapps\iserver\output\sqlite路徑下。

如果不啟用屬性瓦片快取可以使用UTFGrid嗎？答案是肯定的，如果是在大資料量的前提下，建議將UTFGrid預先切成瓦片，下圖是各種方式使用UTFGrid的效能對比。

3.程式設計實現

初始化

var map,layer,vectorLayer,infowin,infowin1,highlightFea,popfeature,
                host = document.location.toString().match(/file:\/\//
 
)?"http://localhost:8090":'http://' + document.location.host,
                url="http://support.supermap.com.cn:8090/iserver/services/map-changchun/rest/maps/長春市區圖_Local";
        var controlmove,controlclick,utfgridPark,utfgridSchool;

        function init(){
            map = new SuperMap.Map("map", {controls: [
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.LayerSwitcher(),
                new SuperMap.Control.Navigation({
                    dragPanOptions: {
                        enableKinetic: true
                    }
                })],
                projection: "EPSG:0",
                //設定地圖的最大範圍，這行程式碼相當重要
                maxExtent:new SuperMap.Bounds(48.4 , -7668.25,8958.85 , -55.58 )
            });
            layer = new SuperMap.Layer.TiledDynamicRESTLayer("China", url, {transparent: false}, {useCanvas: true, maxResolution: "auto",
                scales:[1/2000,1/4000,1/8000,1/16000,1/32000]
            });
            vectorLayer=new SuperMap.Layer.Vector("Vector Layer");
//注意：pixcell與utfgridResolution兩個屬性有對應關係，在使用的時候也要注意場景；
//1.其中pixcell為傳送給服務端請求utfgrid瓦片的精度，數值越小，精度越高，相應的瓦片大小也就越大；
//2.utfgridResolution為客戶端解析瓦片使用的精度，應該與pixcell的值相等，否則會產生位置與屬性對應不上的問題；
//3.通常如果UTFGrid圖層為面圖層，對應的資料量會比較大，為了不影響頁面的正常瀏覽，可以將這兩個屬性設的大一些；
//4.isUseCache設定是否使用快取，使用快取能夠提高效能；

            utfgridSchool = new SuperMap.Layer.UTFGrid("UTFGridLayerSchool", url,
                    {
                        layerName: "[email protected]",
                        utfTileSize: 256,
                        pixcell: 16,
                        isUseCache: true
                    },
                    {
                        utfgridResolution: 16
                    });
            utfgridSchool.maxExtent=layer.maxExtent;
            utfgridPark = new SuperMap.Layer.UTFGrid("UTFGridLayerPark", url,
                    {
                        layerName: "[email protected]",
                        utfTileSize: 256,
                        pixcell: 16,
                        isUseCache: true
                    },
                    {
                        utfgridResolution: 16
                    });
            utfgridPark.maxExtent=layer.maxExtent;

            //監聽move事件控制元件
            controlmove = new SuperMap.Control.UTFGrid({
                layers: [utfgridPark,utfgridSchool],
                callback: callback,
                handlerMode: "move"
            });
            //監聽click事件控制元件
            controlclick = new SuperMap.Control.UTFGrid({
                layers: [utfgridPark,utfgridSchool],
                callback: callback2,
            });

            layer.events.on({"layerInitialized": addLayer});
            map.addControl(controlmove);
            map.addControl(controlclick);
            map.events.on({"zoomend":reviewUTFgrid});
        }
     function addLayer() {
            var center = new SuperMap.LonLat(4539.98 , -3835.29);
            map.addLayers([layer,vectorLayer,utfgridSchool,utfgridPark,]);
            map.setCenter(center, 0);
            reviewUTFgrid();
        }

高亮點：在這裡，我們利用了Control.UTFGrid監聽move事件的方式，獲取到點的座標，然後繪製一個feature疊加到該點上實現高亮。如果想實現類似於百度地圖每種型別的點都有不同的高亮圖示方式，可以在feature的源資料屬性表裡面加欄位來判斷。實現效果如下：

        //move事件回撥函式
        var callback = function (infoLookup) {
            if(infowin)
            map.removePopup(infowin);
            if(highlightFea)
            vectorLayer.removeFeatures(highlightFea);
            if (infoLookup) {
                var info;
                for (var idx in infoLookup) {
                    info = infoLookup[idx];
                    if (info && info.data) {
                        var dom = "<div style='padding: 5px;padding-left:5px;font-size:12px;font-family:Microsoft YaHei;line-height:8px;color: black;background:lightgoldenrodyellow'>" + info.data.name +"<br></br>"+"點選檢視更多..."+ "</div>";
                         //設定x與y的畫素偏移量，不影響地圖瀏覽；
                        var xOff = (1 / map.getScale()) * 0.003;
                        var yOff = -(1 / map.getScale()) * 0.003;
                        var pos = new SuperMap.LonLat(new Number(info.data.X)+xOff,new Number(info.data.Y)+yOff);
                        infowin = new SuperMap.Popup("chicken",
                                pos,
                                new SuperMap.Size(0, 0),
                                dom,
                                false, null);
                        //根據彈窗內容自動調整彈窗大小
                        infowin.autoSize=true;
                        //設定預設樣式不顯示
                        infowin.setBackgroundColor("none");
                        map.addPopup(infowin);
                        highlightFea = new SuperMap.Feature.Vector(new SuperMap.Geometry.Point(info.data.X,info.data.Y),
                                null,
                                {

                                    //繪製向量點方式
//                                    pointRadius:7,
//                                    fillColor:"#3399FF",
//                                    fillOpacity:0.5,
//                                    strokeColor:"#0033FF",
//                                    strokeWidth:3,
//                                    strokeOpacity:0.2
                                    //引用圖片方式
                                    externalGraphic:"image/h12.png",
                                    graphicWidth:15,
                                    graphicHeight:15

                                }
                        );
                        vectorLayer.addFeatures([highlightFea]);
                    }
                }
            }
        };

彈窗展示：利用Control.UTFGrid監聽click事件的方式，並結合Popup展示地物的資訊，這裡的Popup為自定義的CSS樣式，因為Popup本身為div，可以任意設計CSS樣式。實現效果如下：

 //點選彈窗回撥函式
        var callback2=function(infoLookup1)
        {
            if(infowin1)
                map.removePopup(infowin1);
            if(popfeature)
                vectorLayer.removeFeatures(popfeature);
            if (infoLookup1) {
                if (infoLookup1) {
                    var info1;
                    for (var idx1 in infoLookup1) {
                        info1 = infoLookup1[idx1];
                        if (info1 && info1.data) {
                            var dom1 = "<div class='pop' >" +
                                    "<div class='pop_header'><div class='pop_close' onclick='closeInfoWin1()'></div></div>" +
                                    "<img src='image/park.png' style='height: auto;width: auto;max-width: 100%;opacity: 1'>" +
                                    "<div class='pop_content'><p><span>地點：</span><span>" + info1.data.name + "</span></p><p><span>座標：</span><span>x:" + info1.data.X + "  y:" + info1.data.Y + "</span></p></div>" +
                                    "<div class='pop_arrow'></div>" +
                                    "</div>";
                            var xOff1 = -(1 / map.getScale()) * 0.018;
                            var yOff1 = (1 / map.getScale()) * 0.035;
                            var pos1 = new SuperMap.LonLat(new Number(info1.data.X) + xOff1, new Number(info1.data.Y) + yOff1);
                            infowin1 = new SuperMap.Popup("chicken",
                                    pos1,
                                    new SuperMap.Size(20, 20),
                                    dom1,
                                    false, null);
                            //根據彈窗內容自動調整彈窗大小
                            infowin1.autoSize = true;
                            //設定預設樣式不顯示
                            infowin1.backgroundColor = "none";
                            //移動地圖以確保彈窗顯示在視窗內
                            infowin1.panMapIfOutOfView=true;
                            map.addPopup(infowin1);
                            popfeature = new SuperMap.Feature.Vector(new SuperMap.Geometry.Point(info1.data.X, info1.data.Y),
                                    null,
                                    {
                                        externalGraphic: "image/radar.gif",
                                        graphicWidth: 64,
                                        graphicHeight: 64
                                    }
                            );
                            vectorLayer.addFeatures([popfeature]);
                        }
                    }
                }
            }
        };