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结合使用，前者渲染图层，后者渲染要素，未完待更新

ArcGIS API For JS 之Symbol

猜你喜欢