Marcadores de Rótulo para Seus Aplicativos ArcGIS JavaScript

ReneRubalcava

<\/HEAD>

<\/P>

Se você já usou o LabelLayer<\/A> antes para anotar seu mapa, você está familiarizado com o fato de que pode adicionar rótulos que correspondem aos dados do seu mapa. Este é um recurso legal e tenho certeza de que é realmente interessante trabalhar com pseudo-anotações<\/EM> no seu webmap, mas por que parar por aí?<\/P><\/P>

Font Awesome para mais incrível<\/H2>Se você nunca usou Font Awesome<\/A>, é um ótimo pequeno Toolkit CSS para adicionar alguns ícones de fonte legais à sua página web. Isso é realmente útil se você precisar construir um editor ou quiser adicionar um pouco de sabor ao seu site e é muito fácil de usar. Se você já adicionou fontes personalizadas à sua página web, sabe que há algum boilerplate envolvido. Você pode obter ícones semelhantes com Bootstrap<\/A> e até usá-los juntos.<\/P>

<\/P>

Também é bem fácil usar ícones de fonte no

Leaflet<\/A> se você quiser e eu estava curioso para saber como poderia fazer a mesma coisa com a ArcGIS API for JavaScript. Quando olhei pela primeira vez, ainda não havia LabelLayer<\/EM> na API. Recentemente tive um caso de uso para usar ícones de fonte como marcadores em um projeto, então mergulhei direto. Acontece que eu nem preciso do LabelLayer<\/EM>, nem me importo.<\/P><\/P>

TextSymbol e Font<\/H2>Então, como fazemos isso? Com a introdução do LabelLayer,<\/EM> foram adicionados alguns outros módulos de suporte - Font<\/EM> e TextSymbol<\/EM>. Esses dois módulos são a chave para marcadores incríveis. Há alguns passos que você precisa fazer para que isso funcione.<\/P>1.<\/STRONG> A primeira coisa que você vai querer fazer é adicionar uma referência ao css do font awesome na sua página.<\/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>. Defina a Font<\/EM> para o seu TextSymbol<\/EM>.<\/P>var font = new Font("20pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD,"FontAwesome");<\/PRE>3.<\/STRONG> Crie um TextSymbol.<\/EM><\/P>var sym = new TextSymbol("\uf1bb", font, treeColor);<\/PRE>O que é esse caractere estranho que estou passando para o TextSymbol?<\/EM> Esse é o caractere do Font Awesome que quero usar. Você precisará copiar e colar o caractere como qualquer outro, mas vai querer usar o Font Awesome Cheatsheet<\/A> para isso.<\/P>

4.<\/STRONG> Agora você pode atribuir o símbolo ao gráfico e adicioná-lo ao mapa.<\/P>feature.setSymbol(sym);\nmap.graphics.add(feature);<\/PRE><\/P>Aqui está o JavaScript completo para os trechos acima.<\/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 = "

http:\/\/services.arcgis.com\/V6ZHFr6zdgNZuVG0\/arcgis\/rest\/services\/Street_Trees\/FeatureServer\/0";<\/SPAN>\n  var font = new Font("20pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD,"FontAwesome");\n  \/\/- você pode usar o cheatsheet para copiar e colar o símbolo da fonte\n  \/\/- http:\/ \/fortawesome.github.io \/Font-Awesome \/cheatsheet \/ \n &nbsp ; var sym = new TextSymbol ( " \ uf1bb ", font , treeColor ) ; \ n &nbsp ; var qTask = new QueryTask ( treesUrl ) ; \ n &nbsp ; var query = new Query ( ) ; \ n &nbsp ; query.outFields = [ " * " ] ; \ n &nbsp ; \/ query.where = " TreeID = 0 " ; \ n &nbsp ; query.where = " 1=1 " ; \ n &nbsp ; query.returnGeometry = true ; \ n &nbsp ; qTask.execute ( query ) .then ( function ( featureSet ) { \ n     featureSet.features.map ( function ( feature ) { \ n       feature.setSymbol ( sym ) ; \ n       map.graphics.add ( feature ) ; \ n     } ) ; \ n &nbsp ; } ) ; \ n } ) ; < / PRE > < P > < / P > < H2 id = " toc-hId-1015442211 " id = " toc-hId-1015442211 " > Adicione um pouco de estilo! < / H2 > < P > O resultado de fazer o acima pode te dar algo assim . < / 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 > Isso é realmente legal , mas não está exatamente certo . Grupos de árvores meio que se misturam uns aos outros . Meu cartógrafo interior está fazendo careta . Tudo bem , podemos fazer algo sobre isso . Os ícones são adicionados via uma tag svg < EM ><text>< / EM > , o que significa que podemos usar CSS para estilizar isso . < / P > < PRE class = " lia-code-sample line-numbers language-none " > text {
& nbsp ; text-shadow : -1px 0 white , 0 1px white , 1px 0 white , 0 -1px white ;
} < / PRE > < P > Agora você deve obter um mapa que exibe os ícones como abaixo . < / 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 > Isso parece muito legal se eu mesmo disser . Você encontra a demonstração completa deste exemplo em < STRONG >< A href = " http : //jsbin.com/bisoru/3/edit?js,output " rel = " nofollow noopener noreferrer " target = " _blank " > aqui </ A >< / STRONG > . < / P > < P >< / P >< H2 id = " toc-hId--1536714750 " id = " toc-hId--1536714750 " > Use em um renderer </ H2 >< P >< EM > Quer usar como renderer para um FeatureLayer ? </ EM > Sem problema . </ P >< PRE class = avante e continue hackeando pessoal!<\/P><\/BODY><\/HTML>

adampf

Killer samples. Thanks for sharing!