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

最新推荐文章于 2023-08-21 17:19:09 发布

左直拳

最新推荐文章于 2023-08-21 17:19:09 发布

阅读量1.2k

点赞数

分类专栏： gis 文章标签： svg svg path arcgis symbol

本文链接：https://blog.csdn.net/leftfist/article/details/106437160

版权

gis 专栏收录该内容

66 篇文章 13 订阅

订阅专栏

如题所示，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命令绘制圆形

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

<svg width="4cm" height="4cm" viewBox="0 0 400 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

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

<style>
    .box{
    display: -webkit-flex; 
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    }
    .svg-tit {
    flex-grow: 1;
    }    
    .container{
        border:solid 1px blue;
        margin-top:15px;
        padding:0;
    }
</style>
<div class="container box">
<svg width="132" height="62">
  <path d="M51,61 a30,30 0 1 1 0,-60 a30,30 0 1 1 0 60"
        fill="green" stroke="blue" stroke-width="1" />
</svg>
<div class="svg-tit">图一</div>
</div>
<div class="container box">
<svg width="132" height="102">
  <path d="M51,101 a50,50 0 1 1 0,-100 a50,50 0 1 1 0 100"
        fill="green" stroke="blue" stroke-width="1" />
</svg>
<div class="svg-tit">图二</div>
</div>