（8）ArcGIS API for JavaScript之2D Symbol

阅读本文大概需要 8 分钟。

0. 引言

对于 ArGIS API for JavaScript，Symbol 算是比较重要的一个内容，尤其是二三维一体化的 4.X 版本，增加了很多三维符号。所以在前面一篇文章基础上，我打算再用两篇文章分别介绍二维符号（2D Symbol）和三维符号（3D Symol）。

这篇文章主要介绍各个类型的二维符号及其使用。

PS：虽然 2D Symbol 也能在三维地图视图中使用，但是不推荐这么做。在三维地图中，最佳的方式是使用 3D Symbol。

首先，插播两条相关知识：

由于 4.5 版本之后的 API 已经支持把 js object 转换为 API 对应的类，如符号、符号图层、渲染器类等都能自动转换，所以在 require() 中可以不加载相应模块，除非你想要使用模块中的一些静态方法。

API 中的颜色可以用很多中方式来表示：

CSS 定义的颜色字符串，如 。

十六进制（Hex）的颜色字符串，如 。

表示 rgb 或 rgba 值得数组，如 。

rgb 或 rgba 对象，如 。

颜色对象，如 。

1. MarkerSymbol

MarkerSymbol 是在二维地图视图中绘制于 FeatureLayer 或者 Graphic 上的一个点图形，主要被用于点、面几何要素的符号化，它有两个子类 SimpleMarkerSymbol 和 PictureMarkerSymbol。

1.1 SimpleMarkerSymbol

SimpleMarkerSymbol 通常被渲染为一个带简单图形的二维「点」，这个点可以被一个颜色实体填充，也可以带有边线。

矢量图层（FeatureLayer）中的点、面或者前端绘制的图形（Graphic）都可以使用 SimpleMarkerSymbol 来符号化。

主要的属性：

angle：符号的角度，默认值为0。

color：符号的颜色，默认值为 [255, 255, 255, 0.25] ，半透明的白色。

size: 符号的大小，默认值为12，可以是数字或者带单位的字符串，如 、。

outline：符号的边线，是一个 SimpleLineSymbol 对象。

style：符号的样式，默认值为 circle，可选的值有：circle（圆形）、cross（十字架）、diamond（菱形）、square（方形）、x（×形）。

type：类型标记，值总是为 。

path：SVG 图表的路径。

栗子：

1.2 PictureMarkerSymbol

PictureMarkerSymbol 被渲染为一个用图片表示的点图形，它通常被用于矢量图层中的点要素的符号化。

主要的属性有：

angle：符号的角度，默认值为0。

height：表示图片的点的高度，默认值为 12，可以是数字或者带单位的字符串，如 、。

width：表示图片的点的宽度，默认值为 12，可以是数字或者带单位的字符串，如 、。

type：类型标记，值总是为 。

url：图片的网络路径，必须指向一个有效的图片路径。

对于符号用到的图片，可能存在跨域请求资源，因此会带来 CORS 方面的问题，所以可以使用下面三种方式中的一种来处理：

使用同域下的图片资源。

使用代理（proxy）。

如果图片位于不同域的服务器，需要存储图片的服务器允许 CORS ，并将相应的域名增加到 js API 的 config 中，如：

2. TextSymbol

文本符号通常作为 FeatureLayer、CSVLayer、Sublayer 等图层的文字标签显示，也可以作为前端绘制的图形的符号。

TextSymbol 可以用来标注点、线、面几何要素。

主要的属性有：

angle：文本的角度，默认值为0。

color：文本的颜色。

font：字体。

haloSize：文字阴影大小。

haloColor：文字阴影颜色。haloSize 和 haloColor 同时设置才有效。

backgroundColor：文本的背景。

borderLineColor：背景边框颜色。

borderLineSize：背景边框粗细。

horizontalAlignment：多行文本的水平对齐方式，默认值为 center，可选的值为： left、right、center、justify。

kerning：是否自动调整字间距，默认为 。

rotated：是否自动调整旋转角度，默认为 。

type：符号的类型，值总是为 。

注意，angle、horizontalAlignment这几个属性在三维地图视图中不可用。

backgroundColor、borderLineColor、borderLineSize 这几个属性不能用于 MapImageLayer 图层。

栗子：

3. LineSymbol

LineSymbol 通常被用于矢量图层中线要素的符号化。

LineSymbol 只有一个子类，SimpleLineSymbol，它除了可以表示独立的线状要素，还可以作为 MarkerSymbol 和 FillSymbol 的边线。

SimpleLineSymbol 的属性主要有：

color：符号的颜色，默认值为黑色 。

width：线的宽度，默认值为 0.75，可以是数字或者带单位的字符串，如 、。

type：符号的类型，值总是为 。

style：线的样式，默认为实线 ，可选的值及例子如下图：

cap：线端点处的风格，可选的值为：butt、round、square，默认值为 round。

join：线节点处的风格，可选的值为：bevel、miter、round，默认值为 round。注意，这个属性在三维地图视图中不可用。

注意，style、join、cap 这几个属性在三维地图视图中不可用。

栗子：

4. FillSymbol

FillSymbol 通常是在 GraphicsLayer 或者 FeatureLayer 图层中绘制一个多边形。

FillSymbol 有两个子类 SimpleFillSymbol 和 PictureFillSymbol。

4.1 SimpleFillSymbol

SimpleFillSymbol 被渲染为一个使用颜色或者纹理、图案填充的多边形，它也可以有边线。

SimpleLineSymbol 通常用于矢量图层中的多边形要素或者前端绘制的多边形的符号化。

主要的属性有：

color：颜色，默认是 [0, 0, 0, 0.25] 半透明的黑色。

outline: 边线，一个 SimpleLineSymbol 对象。

type：符号的类型，值总是为 simple-fill。

style：样式，默认值为 solid。可选的值及效果如下：

注意，style 属性在三维地图视图中不可用。

栗子：

4.2 PictureFillSymbol

PictureFillSymbol 是使用一个图片来渲染多边形，这个图片会多次重复出现。

PictureFillSymbol 通常用于矢量图层中的多边形要素或者前端绘制的多边形的符号化。

主要的属性有：

height： 图片的高度，默认值为12，可以是数字或者带单位的字符串，如 、。

width：图片的宽度，默认值为12，可以是数字或者带单位的字符串，如 、。

outline: 边界线，一个 SimpleLineSymbol 对象。

type：符号的类型，值总是为 picture-fill。

url：图片的网络路径，必须指向一个有效的图片路径。

xscale：图片在 x 轴方向上的缩放因子，默认值为 1。

yscale：图片在 y 轴方向上的缩放因子，默认值为 1。

栗子：

原创文章，转载请注明原作者和出处。

↓↓↓