<\/HEAD>
<\/P>
もし以前にLabelLayer<\/A>を使って地図に注釈を付けたことがあるなら、地図データに合わせたラベルを追加できることをご存知でしょう。これは便利な機能で、ウェブマップでpseudo-annotations<\/EM>を扱うのは本当にクールですが、なぜそこで止まるのでしょうか？<\/P><\/P>
TextSymbolとFont<\/H2>ではどうやってこれを実現するのでしょうか？LabelLayer,<\/EM>の導入とともにいくつかのサポートモジュールも追加されました - Font<\/EM>とTextSymbol<\/EM>です。この二つのモジュールが素晴らしいマーカーの鍵となります。これを動作させるためにはいくつかのステップがあります。<\/P>1.<\/STRONG> まず最初にやるべきことは、フォント awesome cssへの参照をページに追加することです。<\/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>. TextSymbol<\/EM>用のFont<\/EM>を定義します。<\/P>var font = new Font("20pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD,"FontAwesome");<\/PRE>3.<\/STRONG> TextSymbol<.EM>を作成します。<\/P>var sym = new TextSymbol("\uf1bb", font, treeColor);<\/PRE>TextSymbolに渡しているあの変な文字は何ですか？<.EM> それは使いたいFont Awesomeの文字です。他の文字と同様にコピー＆ペーストする必要がありますが、そのためにはFont Awesome Cheatsheet<\/A>を使うと良いでしょう。<.P>4.<.STRONG> これでシンボルをグラフィックに割り当てて地図に追加できます。<.P>feature.setSymbol(sym);
map.graphics.add(feature);<.PRE><.P><.P><.P>上記スニペットの完全なJavaScriptコードはこちらです。<.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";<.span>
var font = new Font("20pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD,"FontAwesome");
// you can use the cheatseeht to copy paste the font symbol
// 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>少し華やかさを加えよう！<.H2><.P>上記の操作結果はこのようになるかもしれません。<.P>
これは本当にクールですが、少し問題があります。木々のグループが互いに溶け込んでしまっています。私の内なるカートグラファー（地図製作者）が顔をしかめています。でも大丈夫、それについて対処できます。このアイコンはsvgの <text><.EM> タグ経由で追加されているので、CSSでスタイル設定が可能です。<.P>text {
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}<.PRE><.P>これで以下のようなアイコン表示の地図が得られるはずです。<.P>
BAM!<.EM><.P>自分で言うのもなんですが、かなりカッコいいですね。この例の完全なデモは こちら にあります。<.P><.P>レンダラーで使う方法
<.P>
FeatureLayer用レンダラーとして使いたい？ 問題ありません。<.P>
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";<./span>
var font = new Font("20pt", Font.STYLE_NORMAL,
Font.VARIANT_NORMAL, Font.WEIGHT_BOLD,"FontAwesome");
// you can use the cheatseeht to copy paste the font symbol
// 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);
});<./PRE><./P><./P>You'll get the same result as above, but with less code. You can find an example of this here. <./p ><./p >なぜ？なぜこれをわざわざやるのか自問していますか？なぜPictureMarkerSymbolだけ使って終わりにしないのでしょう？理由を教えましょう。 フォントは拡大縮小できるが画像はできないからです。PictureMarkerSymbolを読み込んだ際にギザギザしたエッジや少しぼやけた感じになったことはありませんか？特にサイズを地図に合わせて再定義しようとした場合などです。フォントはSVGベクターグラフィックスのように拡大縮小してもピクセル化せず、それだけでも私には十分な理由です。この方法はモバイルアプリでもよく機能し見栄えも良いです。ただしフォントアイコンは多色や複雑なものにはできませんが、単独でFont Awesomeやさらに良いMapbox maki icon setを見ると、多くの良いものがあり地図上のマーカーとして使える可能性があります。私の通常ブログではさらに多くのgeodevヒント＆トリックをご紹介しています！行こう さあ、皆さん、どんどんハックしていきましょう！
