ArcGIS API for JS uses d3.js callout graphic instead of Textsymbol mode

First look at the effect

JS Code:

Define (' Keepsoft/gis/extlayers/d3annolayer ', [' dojo/_base/declare ', ' Dojo/_base/lang ', ' d3/d3 ', ' dojo/on ', ' esri/' Evented ', ' Esri/geometry/screenutils '],function (declare, lang, d3js, on, evented,  Screenutils) {Var d = declare ([evented], {declaredclass: ' Keepsoft.gis.extlayers.D3AnnoLayer ', _eventmap:{},option:{labelfields:[' Stcd ', ' stnm '],labelprifixes:[' Code: ', ' Name: '],labelsuffixes:[', '], Rectradius:5,rectwidth:120,rectoffsetx:0,rectoffsety:16,rectfillcolor: ' Rgba (20,20,20,0.4) ', RectStrokeColor: ' RGBA (255,255,255,1) ', Rectstrokewidth:2,labelheigth:23,labelverticalalign:4,labelspaddingtop:2, Labelspaddingbottom:2,labelspaddingleft:2,labelspaddingright:2,fontsize:24,fontcolor: ' Rgba (220,20,20,1) ', Labeldx:20},constructor:function (map, graphicslayer, opt) {//1. Global parameters this.map = map; THIS.GRAPHICSLAYER&NBSP;=&NBSP;GRAPHICSLAYER;//2. Merging parameters Lang.mixin (this.option, opt);//3. Creating svg  Groupthis.domid = this.graphicslayer.id+ '-d3anno ';d 3js.Select (' # ' +this.map.id+ ' _gc '). Append (' G '). attr ({' id ': This.domid});},init:function () {var map =  This.map;on (map,  ' Pan ',  lang.hitch (This, this._pan)); On (map,  ' Zoom-start ',  lang.hitch (This, this._zoomstart)); O N (map,  ' Zoom-end ',  lang.hitch (this, this._zoomend)); This._initialize ();},_initialize:function () {This._removeallchildren (); This._draw ();},_removeallchildren:function () {dojo.empty (this.domid);},_draw: function () {if  (!this.option.labelfields) {return;} for  (var i =0; i < this.graphicslayer.graphics.length; i++) {var g  = this.graphicslayer.graphics[i];this._drawbgshape (g); This._drawtext (g);}},_drawBgShape:function ( Graphic) {Var geometry = graphic.geometry;var o = this.option;var labelnum  = o.labelFields.length;var shapeHeight = o.labelsPaddingTop +  (o.fontsize+ O.labelverticalalign) *labelnum + o.labeLspaddingbottom;var shapewidth = o.rectwidth;var x = 0, y=0;var map  = this.map;var mapextent = map.extent;var mapwidth = map.width;var  mapheight = map.height;var xy = screenutils.toscreenpoint (mapExtent,  Mapwidth, mapheight, geometry); var _mvr = map.__visiblerect;x = xy.x -  _mvr.x - shapewidth/2 + o.rectoffsetx;y = xy.y - _mvr.y +  o.rectoffsety;/*console.log (XY); Console.log (_MVR); Console.log (shapeheight); */d3js.select (' # ' +this.domid) . Append (' rect '). attr ({' X ': x, ' y ': y, ' width ': shapewidth, ' height ': shapeheight, ' Fill ': o.rectfillcolor, ' stroke ': O. Rectstrokecolor, ' stroke-width ': o.rectstrokewidth, ' rx ': O.rectradius, ' ry ': O.rectradius})},_drawtext:function ( Graphic) {Var geometry = graphic.geometry;var o = this.option;var labelnum  = o.labelfields.length;var shapeheight = o.labelspaddingtop +  (o.fontsize+o.labelverticalalign) *labelNum  - o.labelalign + o.labelspaddingbottom;var shapewidth = o.rectwidth;var  x = 0, y=0;var map = this.map;var mapExtent = map.extent; var mapwidth = map.width;var mapheight = map.height;var xy =  Screenutils.toscreenpoint (mapextent, mapwidth, mapheight, geometry);var _mvr =  map.__visiblerect;x = xy.x - _mvr.x -shapewidth/2 + o.rectoffsetx;y =  xy.y - _mvr.y + o.rectoffsety;var node = d3js.select (' # ' +this.domId); var labelnum = o.labelfields.length;for  (var i=0; i < labelnum;  i++) {var labelx = x + o.labelspaddingleft | |  0;var labely = y + o.labElspaddingtop+o.fontsize+ (o.fontsize+o.labelverticalalign) *i | |  0;var fstring = graphic.attributes[o.labelfields[i]] | |   '; var prefix = o.labelprifixes[i] | |   '; var suffix = o.labelsuffixes[i] | |   '; var text = prefix + fstring + suffix;node.append (' text '). attr ({' x ') : LabelX, ' y ': labely, ' Fill ': O.fontcolor, ' font-size ': o.fontsize, ' DX ': O.LABELDX}). text (text);}},_pan:function (e) {/ /console.log (e);var dx = e.delta.x;var dy = e.delta.y;var _dx =  This.map.__visiblerect.x+dx;var _dy = this.map.__visiblerect.y+dy;d3.select (' # ' +this.domId). attr ({' Transform ': ' Matrix (1,0,0,1, ' +_dx+ ', ' +_dy+ ') '})},_zoomstart:function () {This._removeallchildren ();},_ Zoomend:function () {d3.select (' # ' +this.domid). attr ({' Transform ': ' Matrix (1,0,0,1,0,0) '}) This._draw ();}); Return d;})

Page

<body>    <div id= "Mapdiv" >    </div></body ><script src= "Http://localhost:3000/content/public/webgit/jslib/esri/api/init.js" ></script ><script type= "Text/javascript" >require ([     ' Esri/map ',      ' Esri/layers/graphicslayer ',     ' esri/geometry/point ',     ' esri/ Symbols/textsymbol ',     ' esri/graphic ',     ' esri/symbols/ Simplefillsymbol ',     ' esri/color ',     ' esri/symbols/ Simplemarkersymbol ',     ' dojo/on ',     ' esri/SpatialReference ',      ' Keepsoft/gis/extlayers/d3annolayer ',     ' dojo/domready! '],  function (Map, graphicslayer, point, textsymbol, graphic, simplefillsymbol, color ,  simplemarkersymbol, on, spatialreferenCe, annolayer) {    var map = new map (' MapDiv ',         { basemap:  "Topo",  center: [120,30], zoom: 4,  sliderStyle:  "small" &NBSP;});    var lyr = new  Graphicslayer ({        id: ' Textgraphicslayer '     } );     map.addlayer (LYR);     on (map,  ' Load ',  function () {         var point = new point (120, 30,  New spatialreference (4326));        var symbol =  New simplemarkersymbol (' Circle ');        var g =  New graphic (point, symbol, {            &NBSP;STCD: ' AAA ', &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;STNM: ' BBB '          });         lyr.add (g);         Var d3annolayer = new annolayer (map, lyr, {             rectWidth:160,             labeldx:10        });         d3annolayer.init ();     })         }) </script>

Use D3 to create SVG, listen for map events, and enable labeling of graphic attributes.

Hope to be useful.

CSDN has been audited hehe.

ArcGIS API for JS uses d3.js callout graphic instead of Textsymbol mode