Arcgis for Javascript之統計圖的實現

原創 GIS講堂 2018-10-23 15:53

首先，截個圖給大家看看效果：

初始化狀態

放大後的狀態

點擊選中後的狀態

如上圖所示，一般的涉及到的地圖的統計涉及到上述所展示的三個狀態：1、初始化狀態；2、縮放後的狀態；3、點擊選中顯示詳情狀態。第一種狀態下，加載統計圖，一般來說，在地圖上顯示的統計圖只是一個趨勢或者示意，詳細的還得去點擊顯示；第二種狀態，隨着地圖的縮放，地圖統計圖隨着地圖的大小變化；第三種狀態，點擊選中，在信息框顯示詳細的統計圖的信息。

首先，跟大家談談地圖統計圖幾種實現方式。目前情況下，在Arcgis for Javascript下面，實現統計圖有三種方式。

1、示意圖方式

示意圖方式是最簡單的一種方式，什麼意思呢，就是用一個靜態的png圖片的方式，示意圖的數據不代表真實的數據，示意在該狀態時是地圖統計圖，詳細的統計信息在點擊示意圖的時候纔會出現。

2、後臺生成圖片方式

後臺生成圖片的方式也是有很多人採取的一種解決方案，在這種方式下，地圖上的統計圖的數據代表真實的數據信息，地圖上的統計圖是在後臺用java或者c#生成的，並在地圖上展示出來，並通過點擊獲取詳細統計信息，這種處理方式就是將壓力交給服務器，減小客戶端壓力，但是顯示的效果不好。

3、前臺直接展示方式

前臺直接展示是將統計數據傳給前臺，前臺生成統計圖的方式。這種方式對客戶端的壓力比較大，而且從技術上來說，也是最難的。

瞭解了上述三種統計圖的生成方式，接下來了解一下統計圖在地圖中的展示方式。不論是上述那種方式，統計圖在地圖中的顯示都是通過graphic和graphiclayer來展示的，只是前兩種展示的是柵格圖，後一種方式展示的是矢量圖，每一個統計圖是一個graphic對象，統計圖在graphiclayer中顯示。

下文將詳細的講述上述三種狀態下的實現思路與方式。

第一，加載統計圖。

在此，數據是json格式的，統計圖的顯示是通過X與Y去定位的，JSON的數據如下：

        var CITY_DATA={
            "total":34,
            "items":[{"id":1,"name":"烏魯木齊","X":87.575829,"Y":43.782212},
                {"id":2,"name":"拉薩","X":91.162998,"Y":29.71042},
                {"id":3,"name":"西寧","X":101.797303,"Y":36.593642},
                {"id":4,"name":"蘭州","X":103.584297,"Y":36.119086},
                {"id":5,"name":"成都","X":104.035508,"Y":30.714179},
                {"id":6,"name":"重慶","X":106.519115,"Y":29.478925},
                {"id":7,"name":"貴陽","X":106.668071,"Y":26.457312},
                {"id":8,"name":"昆明","X":102.726775,"Y":24.969385},
                {"id":9,"name":"銀川","X":106.167225,"Y":38.598524},
                {"id":10,"name":"西安","X":108.967128,"Y":34.276112},
                {"id":11,"name":"南寧","X":108.233931,"Y":22.748296},
                {"id":12,"name":"海口","X":110.346181,"Y":19.96992},
                {"id":13,"name":"廣州","X":113.226683,"Y":23.18307},
                {"id":14,"name":"長沙","X":112.947928,"Y":28.169916},
                {"id":15,"name":"南昌","X":115.893715,"Y":28.652363},
                {"id":16,"name":"福州","X":119.246768,"Y":26.070765},
                {"id":17,"name":"臺北","X":121.503567,"Y":25.008274},
                {"id":18,"name":"杭州","X":120.183046,"Y":30.330584},
                {"id":19,"name":"上海","X":121.449707,"Y":31.253361},
                {"id":20,"name":"武漢","X":114.216597,"Y":30.579253},
                {"id":21,"name":"合肥","X":117.262302,"Y":31.838353},
                {"id":22,"name":"南京","X":118.805692,"Y":32.085022},
                {"id":23,"name":"鄭州","X":113.6511,"Y":34.746308},
                {"id":24,"name":"濟南","X":117.048331,"Y":36.60841},
                {"id":25,"name":"石家","X":114.478215,"Y":38.033276},
                {"id":26,"name":"太原","X":112.483066,"Y":37.798404},
                {"id":27,"name":"呼和浩特","X":111.842806,"Y":40.895751},
                {"id":28,"name":"天津","X":117.351094,"Y":38.925719},
                {"id":29,"name":"瀋陽","X":123.296299,"Y":41.801604},
                {"id":30,"name":"長春","X":125.26142,"Y":43.981984},
                {"id":31,"name":"哈爾","X":126.567138,"Y":45.69381},
                {"id":32,"name":"北京","X":116.068276,"Y":39.892225},
                {"id":33,"name":"香港","X":114.093117,"Y":22.427852},
                {"id":34,"name":"澳門","X":113.552482,"Y":22.184495}
            ]
        };

緊接着，就是顯示統計圖，代碼如下： 

            var chartLayer = new GraphicsLayer({"id":"chartLayer"});
            map.addLayer(chartLayer,1);
            chartLayer.on("click",showDetailChart);
            addReadPopup(CITY_DATA);

            function addReadPopup(data){
                var items= data.items;
                for(var i=0;i<data.total;i++){
                    var symbol = new PictureMarkerSymbol("bar.png",20,30);
                    symbol.setOffset(-10,18);
                    var pt=new Point(items[i].X,items[i].Y,map.spatialReference);
                    var graphic = new esri.Graphic(pt,symbol,items[i]);
                    chartLayer.add(graphic);
                }
            };

通過X與Y，將每一個統計圖通過graphic的方式添加到graphiclayer裏。

第二，縮放時統計圖大小的變化。

地圖縮放時，統計圖的大小也得隨着地圖的縮放發生相對應的變化，如下：

                map.on("zoom-end",function(zoom){
                    var level=zoom.level;
                    var symbol = new PictureMarkerSymbol("bar.png",20*(level-3),30*(level-3));
                    symbol.setOffset(-10*(level-3),18*(level-3));
                    var graphics = chartLayer.graphics;
                    for(var i=0;i<graphics.length;i++){
                        graphics[i].symbol = symbol;
                        chartLayer.redraw();
                    }
                });

這裏，主要通過監聽map的zoom-end事件，去重新繪製統計圖。

第三，點擊顯示詳細圖。

點擊是監聽的graphiclayer的click事件，點擊圖通過infowindow的方式顯示詳細統計圖信息，這裏面就好做多了，如下：

            function showDetailChart(evt){
                var graphic = evt.graphic;
                graphic.symbol.url="bar_select.png";
                chartLayer.redraw();
                map.infoWindow.setTitle("<b>"+graphic.attributes.name+"</b>");
                var content="<div style='text-align: center;'><img src='bar_detail.png'/></div>";
                map.infoWindow.setContent(content);
                map.infoWindow.show(graphic.geometry);
                $(".maximize").hide();
                $(".close").click(function(){
                    restoreChart(evt);
                });
            };
            function restoreChart(evt){
                var graphic = evt.graphic;
                graphic.symbol.url="bar.png";
                chartLayer.redraw();
            };

通過以上幾步，就基本上實現了地圖統計圖部分的功能。完整代碼如下： 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">
    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #FFF;
            overflow: hidden;
            font-family: "Trebuchet MS";
        }
    </style>
    <script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
    <script src="jquery-1.8.3.js"></script>
    <script>
        var CITY_DATA={
            "total":34,
            "items":[{"id":1,"name":"烏魯木齊","X":87.575829,"Y":43.782212},
                {"id":2,"name":"拉薩","X":91.162998,"Y":29.71042},
                {"id":3,"name":"西寧","X":101.797303,"Y":36.593642},
                {"id":4,"name":"蘭州","X":103.584297,"Y":36.119086},
                {"id":5,"name":"成都","X":104.035508,"Y":30.714179},
                {"id":6,"name":"重慶","X":106.519115,"Y":29.478925},
                {"id":7,"name":"貴陽","X":106.668071,"Y":26.457312},
                {"id":8,"name":"昆明","X":102.726775,"Y":24.969385},
                {"id":9,"name":"銀川","X":106.167225,"Y":38.598524},
                {"id":10,"name":"西安","X":108.967128,"Y":34.276112},
                {"id":11,"name":"南寧","X":108.233931,"Y":22.748296},
                {"id":12,"name":"海口","X":110.346181,"Y":19.96992},
                {"id":13,"name":"廣州","X":113.226683,"Y":23.18307},
                {"id":14,"name":"長沙","X":112.947928,"Y":28.169916},
                {"id":15,"name":"南昌","X":115.893715,"Y":28.652363},
                {"id":16,"name":"福州","X":119.246768,"Y":26.070765},
                {"id":17,"name":"臺北","X":121.503567,"Y":25.008274},
                {"id":18,"name":"杭州","X":120.183046,"Y":30.330584},
                {"id":19,"name":"上海","X":121.449707,"Y":31.253361},
                {"id":20,"name":"武漢","X":114.216597,"Y":30.579253},
                {"id":21,"name":"合肥","X":117.262302,"Y":31.838353},
                {"id":22,"name":"南京","X":118.805692,"Y":32.085022},
                {"id":23,"name":"鄭州","X":113.6511,"Y":34.746308},
                {"id":24,"name":"濟南","X":117.048331,"Y":36.60841},
                {"id":25,"name":"石家","X":114.478215,"Y":38.033276},
                {"id":26,"name":"太原","X":112.483066,"Y":37.798404},
                {"id":27,"name":"呼和浩特","X":111.842806,"Y":40.895751},
                {"id":28,"name":"天津","X":117.351094,"Y":38.925719},
                {"id":29,"name":"瀋陽","X":123.296299,"Y":41.801604},
                {"id":30,"name":"長春","X":125.26142,"Y":43.981984},
                {"id":31,"name":"哈爾","X":126.567138,"Y":45.69381},
                {"id":32,"name":"北京","X":116.068276,"Y":39.892225},
                {"id":33,"name":"香港","X":114.093117,"Y":22.427852},
                {"id":34,"name":"澳門","X":113.552482,"Y":22.184495}
            ]
        };
        var map, mapCenter;
        require([
            "esri/map",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/layers/FeatureLayer",
            "esri/layers/GraphicsLayer",
            "esri/geometry/Point",
            "esri/symbols/PictureMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/renderers/SimpleRenderer",
            "dojo/_base/Color",
            "dojo/domReady!"],
        function(Map,
             Tiled,
             FeatureLayer,
             GraphicsLayer,
             Point,
             PictureMarkerSymbol,
             SimpleLineSymbol,
             SimpleRenderer,
             Color)
        {
            map = new Map("map", {logo:false,slider: true});
            var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/chinamap/MapServer");
            map.addLayer(tiled,0);
            mapCenter = new Point(103.847, 36.0473, map.spatialReference);
            map.centerAndZoom(mapCenter,4);
            var chartLayer = new GraphicsLayer({"id":"chartLayer"});
            map.addLayer(chartLayer,1);
            chartLayer.on("click",showDetailChart);
            addReadPopup(CITY_DATA);

            function addReadPopup(data){
                var items= data.items;
                for(var i=0;i<data.total;i++){
                    var symbol = new PictureMarkerSymbol("bar.png",20,30);
                    symbol.setOffset(-10,18);
                    var pt=new Point(items[i].X,items[i].Y,map.spatialReference);
                    var graphic = new esri.Graphic(pt,symbol,items[i]);
                    chartLayer.add(graphic);
                }

                map.on("zoom-end",function(zoom){
                    var level=zoom.level;
                    var symbol = new PictureMarkerSymbol("bar.png",20*(level-3),30*(level-3));
                    symbol.setOffset(-10*(level-3),18*(level-3));
                    var graphics = chartLayer.graphics;
                    for(var i=0;i<graphics.length;i++){
                        graphics[i].symbol = symbol;
                        chartLayer.redraw();
                    }
                });
            };
            function showDetailChart(evt){
                var graphic = evt.graphic;
                graphic.symbol.url="bar_select.png";
                chartLayer.redraw();
                map.infoWindow.setTitle("<b>"+graphic.attributes.name+"</b>");
                var content="<div style='text-align: center;'><img src='bar_detail.png'/></div>";
                map.infoWindow.setContent(content);
                map.infoWindow.show(graphic.geometry);
                $(".maximize").hide();
                $(".close").click(function(){
                    restoreChart(evt);
                });
            };
            function restoreChart(evt){
                var graphic = evt.graphic;
                graphic.symbol.url="bar.png";
                chartLayer.redraw();
            };
        });
    </script>
</head>

<body>
<div id="map">
</div>
</body>
</html>

最後，第三種方式的實現目前本人正在努力實現，實現後會第一時間與大家分享，如有不對，還望指正！

如有疑問，請聯繫QQ：1004740957或者e-mail：[email protected]，聯繫請說明來意，謝謝！

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Filter

矮油不錯哦_ab60 2019-02-24 14:12:49

Spring中你可能不知道的事（二）

CoderBear 2019-02-24 14:10:43

Spring中你可能不知道的事（一）

CoderBear 2019-02-24 14:10:42

三種方式實現觀察者模式 及 Spring中的事件編程模型

CoderBear 2019-02-24 14:10:42

C#中爲什麼會出現空靜態構造方法的寫法

CoderBear 2019-02-24 14:10:42

劍指Spring源碼（一）

CoderBear 2019-02-24 14:10:42

劍指Spring源碼（二）

CoderBear 2019-02-24 14:10:42

有點深度的聊聊JDK動態代理

CoderBear 2019-02-24 14:10:42

簡單的單例模式其實也不簡單

CoderBear 2019-02-24 14:10:42

Volatile的那些事

CoderBear 2019-02-24 14:10:42

產品監控指標

Real_man 2019-02-24 13:58:13

【蛻變之路】第6天 面向對象 （2019年2月24號）

仵寧飛 2019-02-24 13:54:39

最新阿里Java技術面試題，看這一文就夠了！

_年少無爲 2019-02-24 13:27:21

Java面試學問多，看看高級程序員面試題是什麼樣的

_年少無爲 2019-02-24 13:27:21

最新Java高級開發工程師面試考綱

_年少無爲 2019-02-24 13:27:20