在博客中分享的关于Openlayer实现点动态扩散，今天分享一下关于ArcGIS API实现点动态扩散的效果，主要还用canvas写，这中间用一个rasterLayer的扩展图层。

先来看看效果：

 

一、完整demo代码：

二、关于扩展图层rasterlayer

define([    "dojo/_base/declare", "dojo/_base/connect", "dojo/_base/array",    "dojo/dom-construct", "dojo/dom-style", "dojo/number",    "esri/lang", "esri/domUtils",     "esri/SpatialReference", "esri/geometry/Point", "esri/layers/layer"  ], function(    declare, connect, arrayUtils,    domConstruct, domStyle, number,    esriLang, domUtils,     SpatialReference, Point, Layer  ) {    var RL = declare([Layer], {      // Doc: http://docs.dojocampus.org/dojo/declare#chaining      "-chains-": {        constructor: "manual"      },            constructor: function(data, options) {        // Manually call superclass constructor with required arguments        this.inherited(arguments, [ "http://some.server.com/path", options ]);          this.data = data;          this.loaded = true;        this.onLoad(this);      },            /********************       * Public Properties       *        * data       *        ********************/            /**********************       * Internal Properties       *        * _map       * _element       * _context       * _mapWidth       * _mapHeight       * _connects       *        **********************/            /******************************       * esri.layers.Layer Interface       ******************************/            _setMap: function(map, container) {        this._map = map;                var element = this._element = domConstruct.create("canvas", {          id: "canvas",          width: map.width + "px",          height: map.height + "px",          style: "position: absolute; left: 0px; top: 0px;"        }, container);                if (esriLang.isDefined(this.opacity)) {          domStyle.set(element, "opacity", this.opacity);        }                this._context = element.getContext("2d");        if (!this._context) {          console.error("This browser does not support 
    
      elements.");        }                this._mapWidth = map.width;        this._mapHeight = map.height;                // Event connections        this._connects = [];        this._connects.push(connect.connect(map, "onPan", this, this._panHandler));        this._connects.push(connect.connect(map, "onExtentChange", this, this._extentChangeHandler));        this._connects.push(connect.connect(map, "onZoomStart", this, this.clear));        this._connects.push(connect.connect(this, "onVisibilityChange", this, this._visibilityChangeHandler));                return element;      },            _unsetMap: function(map, container) {        arrayUtils.forEach(this._connects, connect.disconnect, this);        if (this._element) {          container.removeChild(this._element);        }        this._map = this._element = this._context = this.data = this._connects = null;      },            /*****************       * Public Methods       *****************/            refresh: function() {        if (!this._canDraw()) {          return;        }      },            clear: function() {        if (!this._canDraw()) {          return;        }          this._context.clearRect(0, 0, this._mapWidth, this._mapHeight);      },            /*******************       * Internal Methods       *******************/            _canDraw: function() {        return (this._map && this._element && this._context) ? true : false;       },            _panHandler: function(extent, delta) {        domStyle.set(this._element, { left: delta.x + "px", top: delta.y + "px" });      },            _extentChangeHandler: function(extent, delta, levelChange, lod) {        if (!levelChange) {          domStyle.set(this._element, { left: "0px", top: "0px" });          this.clear();        }      },            /****************       * Miscellaneous       ****************/            _visibilityChangeHandler: function(visible) {        if (visible) {          domUtils.show(this._element);        }        else {           domUtils.hide(this._element);        }      }          });      return RL;  });