<\/HEAD>
<\/P>
Pokud jste již použili LabelLayer<\/A> k anotaci vaší mapy, jste obeznámeni s tím, že můžete přidávat popisky, které odpovídají vašim mapovým datům. To je skvělá funkce a jsem si jistý, že je opravdu úžasné pracovat s pseudo-annotations<\/EM> ve vašem webmapě, ale proč tím skončit?<\/P><\/P>
TextSymbol a Font<\/H2>Jak toho tedy dosáhneme? S uvedením LabelLayer,<\/EM> bylo přidáno několik dalších podpůrných modulů - Font<\/EM> a TextSymbol<\/EM>. Tyto dva moduly jsou klíčem k úžasným markerům. Existuje několik kroků, které musíte udělat, aby to fungovalo.<\/P>1.<\/STRONG> První věc, kterou budete chtít udělat, je přidat odkaz na font awesome css na vaši stránku.<\/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>. Definujte Font<\/EM> pro váš TextSymbol<\/EM>.<\/P>var font = new Font("20pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD,"FontAwesome");<\/PRE>3.<\/STRONG> Vytvořte TextSymbol.<\/EM><\/P>var sym = new TextSymbol("\uf1bb", font, treeColor);<\/PRE>Co je to za divný znak, který předávám TextSymbolu? <\/>To je znak z Font Awesome, který chci použít. Budete muset znak zkopírovat a vložit jako každý jiný, ale budete chtít použít Font Awesome Cheatsheet<\/A> pro to.<\/EM><\/P>4.<\/STRONG> Nyní můžete přiřadit symbol k grafice a přidat ji do mapy.<\/P>feature.setSymbol(sym);
map.graphics.add(feature);<\/PRE><\/P>Zde je kompletní JavaScript pro výše uvedené ukázky.<\/P>require([
"esri\/map",
"esri\/symbols\/TextSymbol",
"esri\/tasks\/query",
"esri\/tasks\/QueryTask",
"esri\/symbols\/Font",
"esri\/Color",
"dojo\/domReady!"
], function(
Map, TextSymbol,
Query, QueryTask, Font,
Color
) {
var map = new Map("map-div", {
center: [-122.445, 37.752],
zoom: 14,
basemap: "gray"
});
var treeColor = new Color("#666");
var treesUrl = "<\/>
http:\/\/services.arcgis.com\V6ZHFr6zdgNZuVG0\arcgis\rest\services\Street_Trees\FeatureServer\0";<\/>
var font = new Font("20pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD,"FontAwesome");
\/\/- můžete použít cheatseeht pro kopírování a vložení fontového symbolu
\/\/- <\/> http:\/\/fortawesome.github.io\Font-Awesome\cheatsheet\
var sym = new TextSymbol("\uf1bb", font, treeColor);
var qTask = new QueryTask(treesUrl);
var query = new Query();
query.outFields = ["*"];
\/query.where = "TreeID = 0";
query.where = "1=1";
query.returnGeometry = true;
qTask.execute(query).then(function(featureSet) {
featureSet.features.map(function(feature) {
feature.setSymbol(sym);
map.graphics.add(feature);
});
});
});<\/PRE><\/P>Přidejte trochu šmrnc!<\/H2>Výsledek výše uvedeného může vypadat nějak takto.<\/P>
<\/P>To je opravdu skvělé, ale není to úplně správné. Skupiny stromů se jakoby slévají dohromady. Můj vnitřní kartograf se kroutí bolestí. Je to v pořádku, můžeme s tím něco udělat. Ikony jsou přidány pomocí svg tagu <text><\/EM>, což znamená, že můžeme použít CSS k jejich stylování.<\/P>text {
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}<\/PRE>Nyní byste měli dostat mapu zobrazující ikony jako níže.<\/P>
BAM!<\/EM>
To vypadá docela skvěle, pokud mohu říct sám za sebe. Kompletní demo tohoto příkladu najdete zde<\/A>.
Použijte to v rendereru
Chcete to použít jako renderer pro FeatureLayer?
Není problém.
require([
"esri/map",
"esri/symbols/TextSymbol",
"esri/symbols/Font",
"esri/Color",
"esri/layers/FeatureLayer",
"esri/renderers/SimpleRenderer",
"dojo/domReady!"
], function(
Map, TextSymbol, Font,
Color, FeatureLayer, SimpleRenderer
) {
var map = new Map("map-div", {
center: [-122.445, 37.752],
zoom: 14,
basemap: "gray"
});
var treeColor = new Color("#666");
var treesUrl = "
http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Street_Trees/FeatureServer/0
";
var font = new Font("20pt", Font.STYLE_NORMAL,
Font.VARIANT_NORMAL, Font.WEIGHT_BOLD,"FontAwesome");
// můžete použít cheatseeht pro kopírování a vložení fontového symbolu
//
http://fortawesome.github.io/Font-Awesome/cheatsheet/
var sym = new TextSymbol("\uf1bb", font, treeColor);
var renderer = new SimpleRenderer(sym);
var fl = new FeatureLayer(treesUrl);
fl.setRenderer(renderer);
map.addLayer(fl);
});
Dostanete stejný výsledek jako výše uvedený příklad, ale s méně kódem. Příklad tohoto najdete zde.
Proč?
Položili jste si otázku proč se tím zabývat? Proč prostě nepoužít PictureMarkerSymbola mít hotovo? Řeknu vám proč. Písma škálují, obrázky ne. Už jste někdy načetli PictureMarkerSymbol a měli nějaké zubaté okraje nebo možná byl trochu rozmazaný? Zejména pokud jste se pokusili změnit velikost tak, aby lépe seděla k vaší mapě? Písma jako SVG vektorová grafika škálují takovým způsobem, že pokud jsou zobrazena v 8pt nebo 50pt velikosti neztrácí kvalitu pixelace a to je dostatečný důvod pro mě je používat. Funguje to docela dobře a vypadá to dobře i pro mobilní aplikace. Samozřejmě fontová ikona nemůže být vícebarevná nebo příliš složitá ale podívejte se na samotné ikony ve Font Awesome, nebo ještě lépe do Mapbox maki icon set, uvidíte tam spoustu dobrých věcí které můžete použít jako marker na vaší mapě.
Koukněte na můj pravidelný blog, kde najdete více tipů & triků z geodev světa!
Pojďme pokračujte a hackujte, lidi!<\/P><\/BODY><\/HTML>
