arcgis for js 3.X利用symbol设置svgpath绘制符号

秒速五厘米 2023-02-14 01:19 30阅读 0赞

如题所示，arcgis for js利用symbol设置svgpath绘制符号。

先贴出绘制结果，有个感性认识：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70]  
图中三角形、箭头形，以及里面带圆形的，都是通过设置symbol.svgpath进行绘制的。摘要代码如下：

重点介绍一下svg path的设置。**svg path的坐标原点（0,0），在左上角。水平向右是横轴正向，垂直向下为纵轴正向。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70 1]  
例子中，用到的命令如下：

M x,y：将笔移动到指定坐标点（x,y）
    
    m x,y：将笔移动到相对当前位置的坐标点（x,y），方向如前所述，横轴水平向右为正，纵轴垂直向下为正
    
    L x,y：从当前点连线到指定坐标点（x,y）
    l x,y：从当前点连线到相对位置坐标点（x,y）
    
    z：封闭。比如画一个三角形，从A点出发到B再到C，遇到z命令，自动连回到起点A，形成一个封闭三角形。

比较难理解的是画圆：

A命令:绘制一个椭圆圆弧
    A rx ry x-axis-rotation large-arc-flag sweep-flag X Y，表示绘制一个椭圆圆弧经过(X,Y)点。
    大A:使用绝对坐标点（X,Y）
    小a:使用相对坐标点（X,Y）
    
    rx：椭圆横轴半径
    ry：椭圆竖轴半径
    x-axis-rotation：椭圆横轴相对于CanvasX轴的偏移角度
    large-arc-flag：在前面三个参数确定的情况下，满足当前点到指定点(X,Y)位置条件的圆弧总是有四条，此值取0表示绘制小弧度，取值1表示绘制大弧度
    sweep-flag：在前三个参数确定的情况下，满足当前点到指定点(X,Y)位置条件的圆弧总是有四条，去掉上面large-arc-flag标识后还有两个，sweep-flag 取值0表示绘制逆时针方向的圆弧，取值1表示绘制顺时针方向的圆弧。

以上命令为绘制一段圆弧。如果是画圆的话（即 rx == ry），那么只是画了半圆；还需画圆弧回到起点。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70 2]

<?xml version="1.0" standalone="no"?>
    <svg width="4cm" height="4cm" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" version="1.1">
      <title>Example triangle01- simple example of a 'path'</title>
      <desc>A path that draws a triangle</desc>
      <rect x="1" y="1" width="398" height="398" fill="none" stroke="blue" />
      <path d="M200,350 a150,150 0 1 1 0,-300 a150,150 0 1 1 0 300" fill="green" stroke="blue" stroke-width="3" />
    </svg>

官方资料和例子：[SVG Path][]  
参考文章：[利用SVG的path元素中的A命令绘制圆形][SVG_path_A]

--------------------

2020.11.21  
标记`<svg>`有许多属性，比如上述例子，

时间宝贵，不能一一了解清楚，够用就行。吾生也有涯，其知也无涯，以有涯拼无涯，卒。基本上，我们只需用到width和height。顾名思义，这俩就是定义该SVG的尺寸，viewBox起放大缩小的作用，搞不清楚，应该去掉，那么svg的尺寸，就是我们熟悉的像素。比如a30,30，就是半径30个像素。还有后面的一些说明、标注类属性，统统去掉。

![在这里插入图片描述][2020112110503114.png_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200530093252312.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200530100912731.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200530103602611.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlZnRmaXN0,size_16,color_FFFFFF,t_70
[SVG Path]: https://www.w3.org/TR/SVG/paths.html#PathElement
[SVG_path_A]: https://blog.csdn.net/cdc_csdn/article/details/80473541
[2020112110503114.png_pic_center]: https://img-blog.csdnimg.cn/2020112110503114.png#pic_center