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

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

先贴出绘制结果,有个感性认识:

图中三角形、箭头形,以及里面带圆形的,都是通过设置symbol.svgpath进行绘制的。摘要代码如下:

var _cbg = new Color([255, 255, 255, 0.9]);//填充颜色
var _cbd = new Color([0, 0, 255, 1]);//边线颜色
function ship(attr) {//绘制,返回graphic对象
    var symbol = getSymbol(attr);
    var point = new Point(attr.lng, attr.lat, _sr4326);
    var g = new Graphic(point, symbol);
    return g;
}
function getSymbol(attr) {
    var d = getDirection(attr.d);//角度
    var type = attr.type * 1;
    switch (type) {//按照不同类别构造不同符号
        case 1:
        default:
            return getRadar();
        case 2:
            return getAis("M5 0 L10 20 L0 20 z");
        case 3:
            return getAis("M6,0 l6,10 l0,15 l-12,0 l0,-15 z");
        case 4:
            return getAis("M6,0 L12,20 L0,20 z M6,20 a3,3 0 1 1 0,-6 a3,3 0 1 1 0 6");
        case 5:
            return getAis("M6,0 l6,10 l0,15 l-12,0 l0,-15 z M6,20 a3,3 0 1 1 0,-6 a3,3 0 1 1 0 6");
    }
    function getRadar() {
        return new SimpleMarkerSymbol({
            "color": _cbg,
            "size": 7,
            "angle": d,
            "xoffset": 0,
            "yoffset": 0,
            "type": "esriSMS",
            "style": "esriSMSCircle",
            "outline": {
                "color": _cbd,
                "width": 0.5,
                "type": "esriSLS",
                "style": "esriSLSSolid"
            }
        });
    }
    function getAis(path){
        return new SimpleMarkerSymbol({
            "style": "esriSMSPath",
            "color": _cbg,
            "angle": d,
            "size": 12,
            "path": path,//按照设置的svgpath进行绘制<-----------------------------
            "outline": {
                style: "esriSLSSolid",
                color: _cbd,
                width: 1
            }
        });
    }
}

重点介绍一下svg path的设置。 svg path的坐标原点(0,0),在左上角。水平向右是横轴正向,垂直向下为纵轴正向。

例子中,用到的命令如下:

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),那么只是画了半圆;还需画圆弧回到起点。

<?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命令绘制圆形

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章