AGS JS开发-以JSON参数构建地图渲染之二

图层动态标注JSON定义

1.环境说明

ArcGIS 10.4.1

JS API 3.15

2.图层动态标注介绍

JS API中提供了动态标注的功能,该功能与ArcMap中开启图层的标注功能类似。可用于动态的开启地图服务中某个图层的标注,并且自带标注避让功能。

3.以JSON参数开启图层动态标注

使用JSON的好处,在前一篇中已经说明。动态标注需要结合文字符号一起使用,JSON定义格式如下:

{

"labelExpressionInfo":{"value": "州名:{STATE_NAME},人口:{POP2000}"},

"labelPlacement":"above-right",

"symbol":{

"type": "esriTS",

"color": [255,0,255],

"font": {

"family":"Arial",

"size":10

}

}

}

4.图层动态标注测试

以下示例已开启FeatureLayer中的标注为例:

第一步:开启map标注功能

map=new Map("map", {

showLabels:true

});

注意:必须在构造函数中设置。

第二步:设置FeatureLayer的返回字段,必须包含标注的字段

var citiesUrl="https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0";

var citiesLayer=new FeatureLayer(citiesUrl,{

outFields: ["*"]

});

第三步:设置文字标注信息

//"above-center", "above-left", "above-right", "below-center", "below-left", "below-right", "center-center", "center-left", "center-right"

var citiesLabelJson1= {

"labelExpressionInfo": {"value":"名称:{areaname},人口:{pop2000}"},

"labelPlacement":"above-right",

"symbol":{

"type":"esriTS",

"color": [218,165,32],

"font": {

"family":"Microsoft YaHei",

"size":8

}

}

};

var citiesLabelJson2= {

"labelExpressionInfo": {"value":"人口:{pop2000}"},

"labelPlacement":"below-right",

"symbol":{

"type":"esriTS",

"color": [128,128,128],

"font": {

"family":"Microsoft YaHei",

"size":12

}

}

}

var citiesLabel1=new LabelClass(citiesLabelJson1);

var citiesLabel2=new LabelClass(citiesLabelJson2);

citiesLayer.setLabelingInfo([citiesLabel1,citiesLabel2]);

citiesLayer.setShowLabels(true);

效果:

5.图层动态标注小结

(1)点和线类型可以通过labelPlacement属性设置标注的位置。

(2)在一个LabelClass中,可以组合多个字段构成一个标注内容,如示例中的citiesLabelJson1,标注的内容包含了areaname和pop2000两个字段。

(3)一个FeatureLayer可以设置多个标注,但由于注记避让功能,个人觉得无意义。

6.源码

图层动态标注JSON定义

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,761评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,953评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,998评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,248评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,130评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,145评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,550评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,236评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,510评论 1 291
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,247评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,613评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2 335

推荐阅读更多精彩内容