Beschriftungsmarker für Ihre ArcGIS JavaScript-Apps

ReneRubalcava

<\/HEAD>

<\/P>

Wenn Sie zuvor die LabelLayer<\/A> verwendet haben, um Ihre Karte zu beschriften, sind Sie damit vertraut, dass Sie Beschriftungen hinzufügen können, die mit Ihren Kartendaten übereinstimmen. Das ist eine nette Funktion und ich bin sicher, es macht wirklich Spaß, mit pseudo-annotations<\/EM> in Ihrer Webkarte zu arbeiten, aber warum dort aufhören?<\/P><\/P>

Font Awesome für Großartigkeit<\/H2>Wenn Sie Font Awesome<\/A> noch nie benutzt haben, ist es ein großartiges kleines CSS Toolkit, um Ihrer Webseite schöne Schrifticons hinzuzufügen. Das ist sehr nützlich, wenn Sie einen Editor erstellen müssen oder Ihrer Seite etwas Flair verleihen wollen, und es ist wirklich einfach zu verwenden. Wenn Sie jemals benutzerdefinierte Schriftarten zu Ihrer Webseite hinzugefügt haben, wissen Sie, dass dabei etwas Boilerplate-Code anfällt. Ähnliche Icons erhalten Sie mit Bootstrap<\/A> und Sie können sogar beide zusammen verwenden.<\/P>

<\/P>

Es ist auch ziemlich einfach, Schrifticons in

Leaflet<\/A> zu verwenden, wenn Sie möchten, und ich war neugierig, wie ich dasselbe mit der ArcGIS API for JavaScript machen könnte. Als ich das zuerst betrachtete, gab es noch keinen LabelLayer<\/EM> in der API. Kürzlich hatte ich einen Anwendungsfall, um Schrifticons als Marker in einem Projekt zu verwenden, also habe ich mich direkt daran gemacht. Es stellt sich heraus, dass ich den LabelLayer<\/EM> nicht einmal brauche und es mir auch egal ist.<\/P><\/P>

TextSymbol und Font<\/H2>Wie erreichen wir das also? Mit der Einführung des LabelLayer,<\/EM> wurden einige weitere unterstützende Module hinzugefügt - Font<\/EM> und TextSymbol<\/EM>. Diese beiden Module sind der Schlüssel zu großartigen Markern. Es gibt ein paar Schritte, die Sie tun müssen, um das zum Laufen zu bringen.<\/P>1.<\/STRONG> Das Erste, was Sie tun sollten, ist eine Referenz zur font awesome css auf Ihrer Seite hinzuzufügen.<\/P><link href=\"https:\/\/community.esri.com\\/maxcdn.bootstrapcdn.com\/font-awesome\/4.2.0\/css\/font-awesome.min.css\" rel=\"stylesheet\"><\/PRE>2<\/STRONG>. Definieren Sie die Font<\/EM> für Ihr TextSymbol<\/EM>.<\/P>var font = new Font("20pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD,"FontAwesome");<\/PRE>3.<\/STRONG> Erstellen Sie ein TextSymbol.<\/EM><\/P>var sym = new TextSymbol("\uf1bb", font, treeColor);<\/PRE>Was ist dieses seltsame Zeichen, das ich an das TextSymbol übergebe? <\/_EM> Das ist das Zeichen von Font Awesome, das ich verwenden möchte. Sie müssen das Zeichen wie jedes andere kopieren und einfügen, aber dafür sollten Sie das Font Awesome Cheatsheet<\/A> benutzen.<\/P>

4.<\/STRONG> Jetzt können Sie das Symbol dem Grafikobjekt zuweisen und es zur Karte hinzufügen.<\/P>feature.setSymbol(sym);\nmap.graphics.add(feature);<\/PRE><\/P>Hier ist der vollständige JavaScript-Code für die obigen Ausschnitte.<\/P>require([\n  "esri\\/map", \n  "esri\\/symbols\\/TextSymbol",\n  "esri\\/tasks\\/query",\n  "esri\\/tasks\\/QueryTask",\n  "esri\\/symbols\\/Font",\n  "esri\\/Color",\n  "dojo\\/domReady!"\n], function(\n  Map, TextSymbol,\n  Query, QueryTask, Font,\n  Color\n) {\n  var map = new Map("map-div", {\n    center: [-122.445, 37.752],\n    zoom: 14,\n    basemap: "gray"\n  });\n\n  var treeColor = new Color("#666");\n  var treesUrl = "<\/_SPAN>

http:\/\/services.arcgis.com\/V6ZHFr6zdgNZuVG0\/arcgis\/rest\/services\/Street_Trees\/FeatureServer\/0<\/_A>";<\/_SPAN>\n  var font = new Font("20pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD,"FontAwesome");\n  \/\/- Sie können das Cheatsheet verwenden um das Schriftzeichen zu kopieren und einzufügen\n  \/\/- <\/_SPAN>http:\/\/fortawesome.github.io\/Font-Awesome\/cheatsheet\/<\/_A>\n  var sym = new TextSymbol("\uf1bb", font, treeColor);\n  var qTask = new QueryTask(treesUrl);\n  var query = new Query();\n  query.outFields = ["*"];\n  \/\/-query.where = "TreeID = 0";\n  query.where = "1=1";\n  query.returnGeometry = true;\n  qTask.execute(query).then(function(featureSet) {\n    featureSet.features.map(function(feature) {\n      feature.setSymbol(sym);\n      map.graphics.add(feature);\n    });\n  });\n});<\/PRE>

<\/P>

Fügen Sie etwas Flair hinzu!<\/H2>Das Ergebnis der obigen Schritte könnte so aussehen.<\/P><\/P>Das ist wirklich cool, aber es ist nicht ganz richtig. Baumgruppen verschmelzen irgendwie ineinander. Mein innerer Kartograf verzieht das Gesicht. Kein Problem, wir können etwas dagegen tun. Die Icons werden über ein svg <text><\/EM>-Tag hinzugefügt, was bedeutet, dass wir CSS verwenden können um sie zu stylen.<\/P>text {\n  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;\n}<\/PRE>Jetzt sollten Sie eine Karte erhalten, die die Icons wie unten anzeigt.<\/P>BAM!< \/EM >< \/ P > < P > Das sieht ziemlich cool aus , wenn ich das mal so sagen darf . Die vollständige Demo dieses Beispiels finden Sie unter < A href= "http : \/ \/ jsbin.com \/ bisoru \/ 3 \/ edit ? js , output " rel= "nofollow noopener noreferrer " target= "_blank " > hier < \/ A >< \/ STRONG > . < \/ P > < P >< \/ P > < H2 id= "toc-hId--1536714750 " id= "toc-hId--1536714750 " > Verwenden Sie es in einem Renderer < \/ H2 > < P >< EM > Möchten Sie es als Renderer für einen FeatureLayer verwenden ? < \/ EM > Kein Problem . < \/ P > < PRE class= "lia-code-sample line-numbers language-none " > require([ \ n & nbsp ; \ "esri \/ map \ ", \ n & nbsp ; \ "esri \/ symbols \/ TextSymbol \ ", \ n & nbsp ; \ "esri \/ symbols \/ Font \ ", \ n & nbsp ; \ "esri \/ Color \ ", \ n & nbsp ; \ "esri \/ layers \/ FeatureLayer \ ", \ n & nbsp ; \ "esri \/ renderers \/ SimpleRenderer \ ", \ n & nbsp ; \ "dojo \/ domReady ! \ n ], function( \ n & nbsp ; Map , TextSymbol , Font , \ n & nbsp ; Color , FeatureLayer , SimpleRenderer \ n ) { \ n & nbsp ; var map = new Map ( \ "map-div \", { \ n & nbsp ; & nbsp ; & nbsp ; center : [ -122.445 , 37.752 ], \ n & nbsp ; & nbsp ; & nbsp ; zoom : 14 , \ n & nbsp ; & nbsp ; & nbsp ; basemap : \ "gray \ " \ n & nbsp ; }); \ n \ n & nbsp ; var treeColor = new Color ( \ "#666 \ " ); \ n < SPAN > & nbsp ; var treesUrl = \ " < \/ SPAN >< A class= \ "jive-link-external-small \ " href= \ "http : \/ \/ services.arcgis.com \/ V6ZHFr6zdgNZuVG0 \/ arcgis \/ rest \/ services \/ Street_Trees \/ FeatureServer \/ 0 \ " rel= \ "nofollow noopener noreferrer \ " target= \ "_blank \ " > http : \/ \/ services.arcgis.com \/ V6ZHFr6zdgNZuVG0 \/ arcgis \/ rest \/ services \/ Street_Trees \/ FeatureServer \/ 0 < \/ A >< SPAN > \ " ; < \/ SPAN > \ n & nbsp ; var font = new Font ( \ "20pt \", Font.STYLE_NORMAL , \ n & nbsp ; & nbsp ; & nbsp ; Font.VARIANT_NORMAL , Font.WEIGHT_BOLD , \ "FontAwesome \ " ); \ n & nbsp ; & nbsp ; & nbsp ; & nbsp ; / / Sie können das Cheatsheet verwenden um das Schriftzeichen zu kopieren und einzufügen \ n < SPAN > & nbsp ; & nbsp ; & nbsp ; & nbsp ; / / < \/ SPAN >< A class= \ "jive-link-external-small \ " href= \ "http : \/ \/ fortawesome.github.io \/ Font-Awesome \/ cheatsheet \/ \ " rel= \ "nofollow noopener noreferrer \ " target= \ "_blank \ " > http : \/ \/ fortawesome.github.io \/ Font-Awesome \/ cheatsheet \/ < \/ A > \ n & nbsp ; var sym = new TextSymbol ( \ "f1bb \", font , treeColor ); \ n & nbsp ; var renderer = new SimpleRenderer ( sym ); \ n & nbsp ; var fl = new FeatureLayer ( treesUrl ); \ n & nbsp ; fl.setRenderer ( renderer ); \ n & nbsp ; map.addLayer ( fl ); \ n }); < \/ PRE > < P >< \/ P > < P > Sie erhalten dasselbe Ergebnis wie oben , aber mit weniger Code . Ein Beispiel dafür finden Sie < A href= "http : \/ \/ jsbin.com \/ bisoru \/ 2 \/ edit ? js , output " rel= "nofollow noopener noreferrer " target= "_blank " > hier </ A > . </ P >< P >< / P >< H2 id= „toc-hId-206095585“ id= „toc-hId-206095585“ > Warum? </ H2 >< P > Fragen Sie sich , warum sich die Mühe lohnt ? Warum nicht einfach ein < A href= „https : //developers.arcgis.com/javascript/jsapi/picturemarkersymbol.html“ rel= „nofollow noopener noreferrer“ target= „_blank“ > PictureMarkerSymbol </ A > verwenden und fertig ? Ich sage Ihnen warum . < STRONG >< EM > Schriftarten skalieren , Bilder nicht </ EM ></ STRONG > . Haben Sie schon einmal ein PictureMarkerSymbol geladen und hatten gezackte Kanten oder war es vielleicht etwas unscharf ? Besonders wenn Sie versucht haben , die Größe neu zu definieren , um besser zur Karte zu passen ? Schriftarten skalieren wie SVG-Vektorgrafiken so , dass sie bei einer Anzeige in 8pt oder 50pt nicht pixelig werden und das ist für mich Grund genug sie zu verwenden . Das funktioniert ziemlich gut und sieht gut für mobile Apps aus . Zugegeben , das Schrifticon kann nicht mehrfarbig oder sehr kompliziert sein , aber schauen Sie sich allein die Icons im < A href= „http : //fortawesome.github.io/Font-Awesome/cheatsheet/“ rel= „nofollow noopener noreferrer“ target= „_blank“ > Font Awesome </ A > oder besser noch im < A href= „https://www.mapbox.com/maki/“ rel= „nofollow noopener noreferrer“ target= „_blank“ > Mapbox maki icon set </ A > an und Sie werden sehen , dass es viele gute Sachen gibt , die Sie als Marker auf Ihrer Karte verwenden können . </ P >< P >< / P >< P > Schauen Sie auf meinem regelmäßigen Blog unter dem Link nach weiteren Geodev-Tipps und Tricks! </ P >< P >< / P >< P > Los geht's Vorwärts und hackt weiter, Leute!<\/P><\/BODY><\/HTML>

adampf

Killer samples. Thanks for sharing!