擴充graphiclayer實現多城市天氣情況的展示，graphi辰巳

擴充graphiclayer實現多城市天氣情況的展示，graphi辰巳

概述：

在上一節，實現了點擊展示城市天氣的效果，在本節，講述通過擴充graphiclayer實現同時顯示多個城市天氣的展示。

效果：

重慶市天地圖天氣展示效果

實現後的效果

詳細天氣資訊

實現：

1、實現思路

通過個城市的地圖位置，通過map.toScreen（）函數轉換為螢幕座標，在每個城市的位置建立一個div用來顯示概要天氣資訊。那麼，該如何控制每一個div的位置呢，可以通過div的屬性position，left，top值來控制，其中，position為絕對（absolute）位置，left為screenPoint.x，top為screenPoint.y。

2、實現代碼

a、封裝graphiclayer WeatherGraphicLayer.js

define([    "dojo/_base/declare",    "esri/layers/GraphicsLayer"], function (    declare,    GraphicsLayer    ) {    return declare([GraphicsLayer], {        constructor: function(options) {            this._id = options.id || "";            this._divId = options.divId || "chart";            this._bindGraphicLayer = options.bindGraphicLayer || null;        },        // 重構esri/layers/GraphicsLayer方法        _setMap: function(map, surface) {            // GraphicsLayer will add its own listener here            var div = this.inherited(arguments);            return div;        },        _unsetMap: function() {            this.inherited(arguments);        },        hide: function() {            var _graphics = this.graphics;            console.log(_graphics);            for(var i= 0,dl =_graphics.length;i<dl;i++){                var graphic = _graphics[i].graphic;                var py =graphic.attributes.pinyin;                $("#div_"+py).hide();                $("#div_"+py).remove();            }        },        show: function() {            var _graphics = this.graphics;            for(var i= 0,dl =_graphics.length;i<dl;i++){                var graphic = _graphics[i].graphic;                var py =graphic.attributes.pinyin;                $("#div_"+py).show();            }        },        //拖拽        _onPanStartHandler: function() {            this.hide();        },        //縮放        _onZoomStartHandler:function(){            this.hide();        },        _onExtentChangeHandler: function(delta, extent, levelChange, lod) {            this._refresh(true, true);        },        _refresh: function(redrawFlag, zoomFlag) {            var gs = this.graphics,                _draw = this._draw;            for (i = 0; i < gs.length; i++) {                _draw(gs[i], redrawFlag, zoomFlag);            }            this.show();        },        _draw:function(addGraphic, redrawFlag, zoomFlag){            if (!this._map) {                return;            }            var py = addGraphic.graphic.attributes.pinyin;            if (zoomFlag) {                $("#div_"+py).remove();            }            var mapPt = addGraphic.graphic.geometry;            var srcPt = map.toScreen(mapPt);            var url = "http://i.tianqi.com/index.php?c=code&id=30&color=%23FF0000&py="+py;            var showDiv = $("<div />").attr("id","div_"+py)                .css("position","absolute")                .css("top",(srcPt.y+15)+"px")                .css("left",(srcPt.x-45)+"px")                .addClass("weather-box")                .appendTo($("#map"));            var weatherIframe = $("<iframe />").attr("width","120")                .attr("id","ifm_"+py)                .attr("height","14")                .attr("frameborder","0")                .attr("scrolling","no")                .attr("margin","0px")                .attr("overflow","hidden")                .attr("src",url);            var upArrow = $("<div />").addClass("entry-trangle-top").appendTo(showDiv);            showDiv.append(weatherIframe);        }    });});

b、前端實現

建立一個WeatherGraphicLayer，並添加到map。

                    var weather = new WeatherGraphicLayer({"id":"weather",displayOnPan:false});                    map.addLayer(weather);

添加城市圖層的graphic-add事件

                    city.on("graphic-add",function(addGraphic){                        weather.add(addGraphic);                    });

這樣，多城市的天氣資訊展示已完成，點擊顯示詳細資料在上一節中已說明，代碼如下：

                    city.on("click",function(evt){                        var url = "http://i.tianqi.com/index.php?c=code&id=27&color=%23&bgc=%23&icon=2&py="+evt.graphic.attributes.pinyin+"&temp=1&num=1";                        var title = evt.graphic.attributes.name;                        var content = $("<div />");                        var weatherIframe = $("<iframe />").attr("width","400")                                .attr("height","270")                                .attr("frameborder","0")                                .attr("scrolling","no")                                .attr("src",url);                        content.append(weatherIframe);                        map.infoWindow.setTitle(title);                        map.infoWindow.setContent(content[0]);                        map.infoWindow.resize(420,275);                        map.infoWindow.show(evt.graphic.geometry);                    });