Marqueurs d'étiquettes pour vos applications ArcGIS JavaScript

ReneRubalcava

<\/HEAD>

<\/P>

Si vous avez déjà utilisé le LabelLayer<\/A> pour annoter votre carte, vous savez que vous pouvez ajouter des étiquettes qui correspondent à vos données cartographiques. C'est une fonctionnalité sympa et je suis sûr que c'est vraiment cool de travailler avec des pseudo-annotations<\/EM> dans votre webmap, mais pourquoi s'arrêter là ?<\/P><\/P>

Font Awesome pour l'excellence<\/H2>Si vous n'avez jamais utilisé Font Awesome<\/A>, c'est un excellent petit Toolkit CSS pour ajouter de jolies icônes de police à votre page web. C'est très utile si vous devez construire un éditeur ou souhaitez ajouter un peu de saveur à votre site et c'est vraiment facile à utiliser. Si vous avez déjà ajouté des polices personnalisées à votre page web, vous savez qu'il y a un peu de code standard impliqué. Vous pouvez obtenir des icônes similaires avec Bootstrap<\/A> et même les utiliser ensemble.<\/P>

<\/P>

C'est aussi assez facile d'utiliser des icônes de police dans

Leaflet<\/A> si vous le souhaitez et j'étais curieux de savoir comment faire la même chose avec l'ArcGIS API for JavaScript. Quand j'ai regardé cela pour la première fois, il n'y avait pas encore de LabelLayer<\/EM> dans l'API. J'ai récemment eu un cas d'utilisation pour utiliser des icônes de police comme marqueurs dans un projet, alors je me suis lancé. Il s'avère que je n'ai même pas besoin du LabelLayer<\/EM>, ni que cela m'importe.<\/P><\/P>

TextSymbol et Font<\/H2>Alors comment accomplir cela ? Avec l'introduction du LabelLayer,<\/EM> quelques autres modules de support ont été ajoutés - Font<\/EM> et TextSymbol<\/EM>. Ces deux modules sont la clé pour des marqueurs géniaux. Il y a quelques étapes à suivre pour que cela fonctionne.<\/P>1.<\/STRONG> La première chose que vous voudrez faire est d'ajouter une référence au CSS font awesome sur votre page.<\/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>. Définissez la Font<\/EM> pour votre TextSymbol<\/EM>.<\/P>var font = new Font("20pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD,"FontAwesome");<\/PRE>3.<\/STRONG> Créez un TextSymbol.<\/EM><\/P>var sym = new TextSymbol("\uf1bb", font, treeColor);<\/PRE>Quel est ce caractère bizarre que je passe au TextSymbol ?<\/EM> C'est le caractère de Font Awesome que je veux utiliser. Vous devrez copier-coller le caractère comme n'importe quel autre, mais vous voudrez utiliser la Font Awesome Cheatsheet<\/A> pour cela.<\/P>

4.<\/STRONG> Maintenant, vous pouvez assigner le symbole au graphique et l'ajouter à la carte.<\/P>feature.setSymbol(sym);\nmap.graphics.add(feature);<\/PRE><\/P>Voici le JavaScript complet pour les extraits ci-dessus.<\/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  \/\/- vous pouvez utiliser la cheatsheet pour copier-coller le symbole de police\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 >< \/ P >< H2 id = "toc-hId-1015442211" id = "toc-hId-1015442211" > Ajoutez un peu de style ! < \/ H2 >< P > Le résultat de ce qui précède peut vous donner quelque chose comme ceci . < \/ P >< P >< IMG __jive_id = "47961" alt = "fontmarkers.jpg" class = "jive-image image-2" src = "https:\/ \/us.v-cdn.net \/6038851 \/uploads \/legacyfs \/online \/47961_fontmarkers.jpg " style = "height: auto ; " \/ > < \/ P >< P > C'est vraiment cool , mais ce n'est pas tout à fait ça . Les groupes d'arbres se fondent un peu les uns dans les autres . Mon cartographe intérieur grimace . Ce n'est pas grave , nous pouvons faire quelque chose à ce sujet . Les icônes sont ajoutées via une balise svg < EM ><text>< \/ EM > , ce qui signifie que nous pouvons utiliser CSS pour les styliser . < \/ P >< PRE class = "lia-code-sample line-numbers language-none" > text { \ n & nbsp ; text-shadow : -1px 0 white , 0 1px white , 1px 0 white , 0 -1px white ; \ n } < \/ PRE >< P > Maintenant , vous devriez obtenir une carte qui affiche les icônes comme ci-dessous . < \/ P >< P >< IMG __jive_id = "47962" alt = "fontmarkers-outline.jpg" class = "jive-image image-3" src = "https:\/ \/us.v-cdn.net \/6038851 \/uploads \/legacyfs \/online \/47962_fontmarkers-outline.jpg " style = "height: auto ; " /> < EM > BAM ! < \/ EM >< \/ P >< P > Ça a l'air plutôt cool si je puis dire . Vous trouverez la démo complète de cet exemple < STRONG >< A href = "http:\/ /jsbin.com/bisoru/3/edit?js,output" rel = "nofollow noopener noreferrer" target = "_blank" > ici < \/ A >< \/ STRONG > . < \/ P >< P >< \/ P >< H2 id = "toc-hId--1536714750" id = "toc-hId--1536714750" > Utilisez-le dans un renderer < \/ H2 >< P >< EM > Vous voulez l'utiliser comme renderer pour un FeatureLayer ? < \/ EM > Pas de problème . < \/ 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 &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 > \ 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 ; \/vous pouvez utiliser la cheatsheet pour copier-coller le symbole de police \ n      7 http://fortawesome.github.io/Font-Awesome/cheatsheet/&lt; / A >
& nbsp;
var sym = new TextSymbol("", en avant et continuez à pirater, les amis !

adampf

Killer samples. Thanks for sharing!