ArcGIS API For JS 之Symbol
Symbol定义如何在GraphicLayer上如何显示点、线、面、文本,符号定义了几何对象所有的非地理特征方面的外观,例如图形的颜色,边框线样式,api中有许多的符号类,每个类都只允许你使用唯一的方式去制定符号。每种符号都用于一种特定的类型。
一、几何对应类型
类型 | 符号 |
点 | SimpleMarkerSymbol、PictureMarkSymbol |
线 | SimpleLineSymbol、CartographicLineSymbol |
面 | SimpleFillSymbol、PictureFillSymbol |
文本 | TextSymbol、Font |
二、SimpleMarkerSymbol
1、构造函数
new SimpleMarkerSymbol(style, size, outline, color)
2、使用案例
require([
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color", ...
], function(SimpleMarkerSymbol, SimpleLineSymbol, Color, ... ) {
new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]), 1),
new Color([0,255,0,0.25]));
...
});
三、PictureMarkSymbol
1、构造函数
new PictureMarkerSymbol(url, width, height)
2、使用案例
require([
"esri/symbols/PictureMarkerSymbol", ...
], function(PictureMarkerSymbol, ... ) {
var pictureMarkerSymbol = new PictureMarkerSymbol('http://www.esri.com/graphics/aexicon.jpg', 51, 51);
...
});
四、SimpleLineSymbol
1、构造函数
new SimpleLineSymbol(style, color, width)
2、使用案例
require([
"esri/symbols/SimpleLineSymbol", "esri/Color", ...
], function(SimpleLineSymbol, Color, ... ) {
var sls = new SimpleLineSymbol(
SimpleLineSymbol.STYLE_DASH,
new Color([255,0,0]),
3
);
...
});
五、CartographicLineSymbol
1、构造函数
new CartographicLineSymbol(style?, color?, width?, cap?, join?, miterLimit?)
2、使用案例
require([
"esri/symbols/CartographicLineSymbol", "esri/Color", ...
], function(CartographicLineSymbol, Color, ... ) {
var cls = new CartographicLineSymbol(CartographicLineSymbol.STYLE_SOLID, new Color([255,0,0]), 10, CartographicLineSymbol.CAP_ROUND, CartographicLineSymbol.JOIN_MITER, 5);
...
});
六、SimpleFillSymbol
1、构造函数
new SimpleFillSymbol(style, outline, color)
2、使用案例
require([
"esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color", ...
], function(SimpleFillSymbol, SimpleLineSymbol, Color, ... ) {
var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
new Color([255,0,0]), 2),new Color([255,255,0,0.25])
);
...
})
七、PictureFillSymbol
1、构造函数
new PictureFillSymbol(url, outline, width, height)
2、使用案例
require([
"esri/symbols/PictureFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color", ...
], function(PictureFillSymbol, SimpleLineSymbol, Color, ... ) {
var pfs = new PictureFillSymbol('images/sand.png',
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color('#000'), 1),
42, 42);
...
});
八、TextSymbol
1、构造函数
new TextSymbol(text, font, color)
2、使用案例
require([
"esri/symbols/TextSymbol", "esri/Color", "esri/symbols/Font", ...
], function(TextSymbol, Color, Font, ... ) {
var textSymbol = new TextSymbol("Hello World").setColor(
new Color([128,0,0])).setAlign(Font.ALIGN_START).setAngle(45).setFont(
new Font("12pt").setWeight(Font.WEIGHT_BOLD)) ;
...
});
九、Font
1、构造函数
new Font(size?, style?, variant?, weight?, family?)
2、使用案例
require([
"esri/symbols/Font", ...
], function(Font, ... ) {
var font = new Font("20pt", Font.STYLE_ITALIC,
Font.VARIANT_NORMAL, Font.WEIGHT_BOLD,"Courier");
...
});
十、总结
每个类几乎都有三个构造函数,这里只介绍灵活性最大那个类,如果参数不给就是默认,symbol一般都会与render或者Graphic结合使用,前者渲染图层,后者渲染要素,未完待更新