Arcgis for JsÖ®GraphiclayerÀ©Õ¹Ïê½â

Arcgis for JsÖGraphiclayerÀÕ¹Ïê½â

ÔÚÇ°Á½½Ú£¬½²µ½ÁËÁ½ÖÖ²»Í¬·½Ê½µÄ¾ÛÀ࣬һÖÖÊÇ»ùÓÚ¾àÀëµÄ£¬Ò»ÖÖÊÇ»ùÓÚÇøÓò·¶Î§µÄ£¬Á½ÖÖ²»Í¬µÄ¾ÛÀ඼ÊÇͨ¹ýÀÕ¹esri/layers/GraphicsLayer·½·¨À´ÊµÏֵġ£ÔÚ±¾½Ú£¬¾ÍÏêϸµÄ½²½²esri/layers/GraphicsLayer·½·¨µÄÀÕ¹¡£

Ê×ÏÈ£¬ÔÚ½²½âÀÕ¹ÖÇ°£¬ÏÈ¿´¿´APIÖÐesri/layers/GraphicsLayerµÄһвÎÊýºÍ·½·¨µÈ¡£

1¡¢´´½¨Ò»¸öGraphicLayer

ÔÚESRI¹Ù·½µÄAPIÖУ¬´´½¨GraphicLayerÓÐÁ½ÖÖ·½Ê½£º

ÀýÈ磺<†·Ÿ"http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+PGltZyBzcmM9"http://www.2cto.com/uploadfile/Collfiles/20141118/20141118082241184.png" alt="\">

»òÕߣº

ÔÚµÚ¶þÖÖ·½Ê½µÄoptionsµÄ²ÎÊý°üÀ¨£º

2¡¢GraphicLayerµÄÊôÐÔ

GraphicLayerµÄÊôÐÔ°üÀ¨£º

ÆäÖУ¬Óм¸¸ö±È½Ï³£¼ûºÍÖØÒªµÄÊôÐÔΪ£º

a¡¢graphics£ºÊý×飬·µ»ØµÄ²ÎÊýÊÇÒ»¸öÊý×飬ΪGraphicLayerÖаüº¬µÄGraphic¶ÔÏó¡£

b¡¢visiable£º²¼¶ûÐÍ£¬GraphiclayerÊÇ·ñ¿É¼û¡£

c¡¢visiableAtMapScale£º²¼¶ûÐÍ£¬ÔÚÌض¨±ÈÀý³ßϵĿɼûÐÔ¡£

3¡¢GraphiclayerµÄ·½·¨

ͼÖУ¬ºì¿ò±ê³öµÄÊÇGraphiclayer×î³£Óõķ½·¨£¬ÏêϸµÄ½éÉܺÜÇå³þ£¬Ôڴ˲»ÔÙ×ö׸ÊöÁË¡£

½ÓÏÂÀ´£¬ÀÕ¹Graphiclayer¡£

GraphicLayer²ØµÃºÜÉλÓÚlibrary\3.9\3.9\js\esri\layers\GraphicsLayer.js£¬ËäÈ»¶Ô²ÎÊý±äÁ¿´úÂë×öÁË»ìÏý£¬µ«ÊÇÓÐж«Î÷»¹ÊÇû×ö±ä»¯¡£ÔÚ×öGraphicLayerÀչʱ£¬Óм¸¸öÊDZȽϳ£Óõģº

a¡¢_setMap

        // Öع¹esri/layers/GraphicsLayer·½·¨        _setMap: function(map, surface) {            // GraphicsLayer will add its own listener here            var div = this.inherited(arguments);            return div;        }

b¡¢_unsetMap

        _unsetMap: function() {            this.inherited(arguments);        }

c¡¢_draw

        _draw:function(graphic, redrawFlag, zoomFlag){            if (!this._map) {                return;            }        }

´ËÍ⣬»¹ÓÐһеØͼ¿ØÖƵģ¬È磺_onPanStartHandler£¬_onZoomStartHandler£¬_onExtentChangeHandlerµÈ¡£ÀÕ¹GraphicLayerµÄ´ó¸Å¿ò¼Ü´úÂëÈçÏ£º

define([    "dojo/_base/declare",    "esri/layers/GraphicsLayer"], function (    declare,    GraphicsLayer    ) {    return declare([GraphicsLayer], {        constructor: function(options) {    //²ÎÊýÉèÖà            this._id = options.id || "";            this._divId = options.chartDiv || "chart";        },        // Öع¹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);        },        //ÍÏק        _onPanStartHandler: function() {            //        },        //Ëõ·Å        _onZoomStartHandler:function(){            //        },        _onExtentChangeHandler: function(delta, extent, levelChange, lod) {            //        },        _draw:function(graphic){            if (!this._map) {                return;            }            //        }    });});

Àý×Ó£ºÌí¼Óͳ¼Æͼ

ͳ¼Æͼͨ¹ýdojo chartʵÏÖ£¬´úÂëÈçÏ£º

define([    "dojo/_base/declare",    "esri/layers/GraphicsLayer",    "esri/geometry/Point",    "esri/graphic",    "dojox/charting/Chart2D",    "dojox/charting/themes/PlotKit/blue",    "dojox/charting/action2d/Highlight",    "dojox/charting/action2d/Tooltip"], function (    declare,    GraphicsLayer,    Point,    Graphic,    Chart2D,    theme,    Highlight,    Tooltip    ) {    return declare([GraphicsLayer], {        constructor: function(options) {            this._id = options.id || "";            this._divId = options.chartDiv || "chart";            this._charttype = options.chartType || "Pie";            this._chartSize = options.size || 50;        },        // Öع¹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() {            dojo.style(dojo.byId(this._divId),{                "display": "none"            });        },        show: function() {            dojo.style(dojo.byId(this._divId),{                "display": ""            });        },        //ÍÏק        _onPanStartHandler: function() {            this.hide();        },        //Ëõ·Å        _onZoomStartHandler:function(){            this.hide();        },        _onExtentChangeHandler: function() {            this._refresh(true);        },        _refresh: function(redraw) {            var that=this;            var gs = this.graphics,                _draw = this._draw;            for (i = 0; i < gs.length; i++) {                _draw(gs[i], redraw);            }            this.show();        },        _draw:function(graphic, redraw){            if (!this._map) {                return;            }            if(graphic instanceof Graphic)//ÅжÏgraphicÊÇ·ñΪMapChartGraphicÀàÐÍ            {                this._drawChart(graphic,redraw);            }        },        _drawChart:function(graphic,redraw){            var showMapPt = graphic.geometry,                attribute = graphic.attributes;            var showPt = map.toScreen(showMapPt);            var id=attribute.code,                series = [attribute.male, attribute.female];            if(redraw){                dojo.byId(this._divId).removeChild(dojo.byId("div"+id));            }            if(attribute){                var _chartDiv = dojo.doc.createElement("div");                _chartDiv.id ="div"+id;                dojo.style(_chartDiv, {                    "left": (showPt.x-this._chartSize/4) + "px",                    "top": (showPt.y-this._chartSize/2) + "px",                    "position": "absolute",                    "width": this._chartSize + "px",                    "height": this._chartSize + "px"                });                dojo.byId(this._divId).appendChild(_chartDiv);                                var _chart = new Chart2D(_chartDiv);                var _themes = dojox.charting.themes.PlotKit.blue;                _themes.chart.fill = "transparent";                _themes.chart.stroke = "transparent";                _themes.plotarea.fill = "transparent";                _chart.setTheme(_themes);                switch(this._charttype){                    case "Pie":{//±ý״ͼ                        _chart.addPlot("default", {                            type: this._charttype,                            labels:false                        });                        break;                    }                    case "StackedColumns":{//Öù×´¶Ñ»ýͼ                        _chart.addPlot("default", {                            type: this._charttype,                            labels:false,                            markers: true,                            gap: 2                        });                        break;                    }                    case "Lines":{//Öù×´¶Ñ»ýͼ                        _chart.addPlot("default", {                            type: this._charttype,                            labels:false,                            markers: true,                            radius: 1,                            tension:"X"                        });                        break;                    }                    default:{//Öù״ͼ                        _chart.addPlot("default", {                            type: this._charttype,                            labels:false,                            gap: 3                        });                        chart.addAxis("y", { vertical:true, fixLower: "major", fixUpper: "major" });                        break;                    }                }                _chart.addSeries(id, series,{stroke: {width:1}});                //Ч¹û                new Highlight(_chart, "default", {highlight: "lightskyblue"});                new Tooltip(_chart, "default");                _chart.render();            }        }    });});

ʵÏÖºóµÄЧ¹ûÈçÏ£º

ÈçÓÐÒÉÎÊ£¬ÇëÁªÏµ£º

QQ£º1004740957

E-Mail£ºniujp08@qq.com