arcgis api for js中使用d3.js标注点的属性值代替textsymbol方式

来源：互联网发布：农村淘宝快递加盟编辑：程序博客网时间：2024/04/29 01:59

<img src="http://img.blog.csdn.net/20150511121805752?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvenhnYW9fcmF5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

</pre><pre name="code" class="javascript"><pre name="code" class="html"><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" });    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, {            stcd:'aaa',            stnm:'bbb'        });        lyr.add(g);        var d3AnnoLayer = new AnnoLayer(map, lyr, {            rectWidth:160,            labelDx:10        });        d3AnnoLayer.init();    })        })</script>

</pre><pre name="code" class="javascript">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:['编码:','名称:'],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.全局参数this.map = map;this.graphicsLayer = graphicsLayer;//2.合并参数lang.mixin(this.option, opt);//3.创建svg groupthis.domId = this.graphicsLayer.id+'-d3anno';d3js.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));on(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;})

使用d3.js创建svg,通过侦听map的事件，重绘svg，实现对graphic要素在地图上的标注。

希望对大家有用。

0 0