匯出向量式圖磚

匯出向量式圖磚

純影像輸出雖具較小的回傳量，但無法附加統計值屬性資訊，且有圖形失真的問題；

而向量形式輸 出，可直接將統計值屬性資料帶入，但在傳輸數量大時，瀏覽的品質會

因此降低。 

向量式圖磚可兼顧兩者之優點，圖磚方式可有效減少回傳數量，同時具有向量形式輸

出之良好的 瀏覽效果，且進行動態縮放瀏覽時不會有圖形失真問題。 

在本範例中，我們將示範如何將以向量式圖磚輸出之面量圖，於互動式圖台上展示之

方法，並提 供圖層顯示動態調整配色之設定方式，有關面量圖繪製詳細設定說明請參

照繪製統計地圖-面量圖。
其做法依序為： 

1.    在繪製面量圖，欲加入動態配色調整功能，須於面量圖參數設定中增建一

     dynamicColor物件，並可自訂預設顏色模組。 

    var pChoropleth = { 

            dynamicColor:{                               //帶入自訂配色可隨時切換 

            color1: ['#8CC157', '#4DBD1E', '#268307', '#1D6205', '#134103'], 

            color2: ['#EF676D', '#78EF78', '#FEB74C', '#E0B8F0', '#0078D7'], 

            color3: ['#FF9999', '#FCE38A', '#AED09E', '#95E1D3', '#C576AC'] 

            } 

            }; 

2.    開啟地圖匯出設定，在設定面量圖與圖表參數時，其加入向量式圖磚匯出

     設定，該設定預設為false，故 欲匯出向量式圖磚檔需開啟此設定。 

     var option = { 

            exportVectorTile: true,                                         //開啟向量磚輸出設定 

     }; 

3.    在面量圖上建立滑鼠互動式效果，當滑鼠移動至圖徵上時，可顯示該圖徵

     詳細的統計資料， 詳細的滑鼠互動式效果設定請參照互動式網頁介面。 

    option.infoOpts = { 

            activateMode: EventMode.MOUSEOVER,                               //設定滑鼠觸發效果 

            infoColor: "#DCF869", 

            opacity: 0.8, 

    }; 

4.   繪製統計地圖，且其Function callback (result)包含繪製結果，並建立一div放置影像 

             var containerObj = document.getElementById("MapView");      //指定互動式介面的DIV ID 

                    Map = new StatMap(containerObj, data, MapKind.CHOROPLETH, option); 

                    Map.drawMap(function (result) { }                                                      //繪製統計地圖        

        };

5.      利用setColor(string/array )來設定向量式圖磚動態配色資訊，用以輸入dynamicColor物件中設定 之顏色模組或是陣列。 

        function changeColor(num) { 

                switch (num) { 

                      case 1: 

                           Map.setColor('origin');                              //origin為原始配色 

                            break; 

                      case 2: 

                           Map.setColor('color1');                              //切換當時配色支色系名稱 

                            break; 

                      case 3: 

                           Map.setColor('color2');                              //切換當時配色支色系名稱 

                            break; 

                      case 4: 

                           Map.setColor('color3');                              //切換當時配色支色系名稱 

                            break; 

                } 

        } 

        function Color() { 

                var colors = document.getElementById('colors').value; 

                colors = colors.split(','); 

                Map.setColor(colors);                              //可直接傳入色系陣列改變顏色

        }