# # PlotLayer

> mapgis-3d-plot-layer
> 行业标绘图层组件，标绘图元的容器
> 点此跳转到示例

## # 属性

名称 | 类型 | 默认值 | 描述 | 是否监听
--- | --- | --- | --- | ---
dataSource | String or Object | [] | 行业标绘图层数据源，url或数据对象 | 是
vueIndex | String or Number | 随机数 | plotLayer 的唯一标识，随机生成的数字或字符串，不传则自动生成 | 否
vueKey | String | 'default' | cesium 球体的唯一标识，默认值 default，当分屏时使用此对象标识多个球体 | 否

### # `dataSource（标绘图层数据源）`

    let dataSource = {
        //一个GeoJSON格式的数据
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                //符号属性
                "properties": {
                    //符号ID
                    "symbolId": 13,
                    //符号名称
                    "symbolName": "",
                    //是否显示符号
                    "show": true,
                    //标绘图元唯一标识符（标绘图元ID）
                    "featureId": "d1a27f94-51b6-44e9-9bbf-02e607d963e9",
                    //是否显示衬线，仅二维有效，0：不启用，1：启用
                    "compareLine": 0,
                    //衬线宽度，仅二维有效
                    "compareLineWidth": 6,
                    //衬线颜色
                    "compareLineColor": "#099563",
                    //符号样式，根据部件ID来设置样式，可单独设置，也可分开设置
                    "symbolNodes": {
                        //文字样式，tspan3918为部件ID，从SVG上读取
                        "tspan3918": {
                            //文字颜色，rgb或16进制颜色
                            "fillStyle": "rgba(0,0,0,1)",
                            //canvas属性，可忽略
                            "fillRule": "nonzero",
                            //字体样式，normal:标准，italic：斜体，仅二维有效，canvas属性
                            "fontStyle": "normal",
                            //定义小型大写字母文本，normal：标准，small-caps：浏览器会显示小型大写字母的字体，仅二维有效，canvas属性
                            "fontVariant": "normal",
                            //字体粗细，normal，bold，bolder，lighter，100~900，仅二维有效，canvas属性
                            "fontWeight": "normal",
                            //字体大小，单位px
                            "fontSize": "15.86400509px",
                            //文字字体
                            "fontFamily": "\"Arial\"",
                            //笔触的颜色、渐变或模式，color：纯色，gradient：渐变，pattern：指定方向重复，仅二维有效，canvas属性
                            "strokeStyle": "none",
                            //线条末端线帽的样式，butt：向线条的每个末端添加平直的边缘，round：向线条的每个末端添加圆形线帽，square：向线条的每个末端添加正方形线帽，仅二维有效，canvas属性
                            "lineCap": "butt",
                            //当两条线交汇时，边角的类型，bevel：斜角，round：圆角，miter：尖角，仅二维有效，canvas属性
                            "lineJoin": "miter",
                            //最大斜接长度，指的是在两条线交汇处内角和外角之间的距离，边角的角度越小，斜接长度就会越大，仅二维有效，canvas属性
                            "miterLimit": 4,
                            //当前线条的宽度，以像素计，仅二维有效，canvas属性
                            "lineWidth": 1
                        },
                        //线样式，path3000-17为部件ID，从SVG上读取
                        "path3000-17": {
                            //线颜色，rgb或16进制颜色
                            "strokeStyle": "rgba(255,0,0,1)",
                            //线条末端线帽的样式，butt：向线条的每个末端添加平直的边缘，round：向线条的每个末端添加圆形线帽，square：向线条的每个末端添加正方形线帽，仅二维有效，canvas属性
                            "lineCap": "butt",
                            //当两条线交汇时，边角的类型，bevel：斜角，round：圆角，miter：尖角，仅二维有效，canvas属性
                            "lineJoin": "miter",
                            //最大斜接长度，指的是在两条线交汇处内角和外角之间的距离，边角的角度越小，斜接长度就会越大，仅二维有效，canvas属性
                            "miterLimit": 4,
                            //当前线条的宽度
                            "lineWidth": 10,
                            //canvas属性，可忽略
                            "fillRule": "nonzero"
                        },
                        //区样式，rect4184为部件ID，从SVG上读取
                        "rect4184": {
                            //线颜色，rgb或16进制颜色
                            "strokeStyle": "rgba(255,0,0,1)",
                            //线条末端线帽的样式，butt：向线条的每个末端添加平直的边缘，round：向线条的每个末端添加圆形线帽，square：向线条的每个末端添加正方形线帽，仅二维有效，canvas属性
                            "lineCap": "square",
                            //当两条线交汇时，边角的类型，bevel：斜角，round：圆角，miter：尖角，仅二维有效，canvas属性
                            "lineJoin": "miter",
                            //最大斜接长度，指的是在两条线交汇处内角和外角之间的距离，边角的角度越小，斜接长度就会越大，仅二维有效，canvas属性
                            "miterLimit": 4,
                            //当前线条的宽度
                            "lineWidth": 10,
                            //填充颜色
                            "fillStyle": "rgba(255,255,255,0.5)",
                            //canvas属性，可忽略
                            "fillRule": "nonzero"
                        }
                    },
                    //墙体样式，仅三维有效
                    "domModAttributes": {
                        //墙体高度
                        "dimModHeight": 500,
                        //是否开启墙
                        "isOpenWall": true,
                        //墙体颜色
                        "wallColor": "rgba(255,0,0,0.3)"
                    }
                },
                //标绘图元的几何点信息
                "geometry": {
                    "type": "MultiPoint",
                    "coordinates": [
                        [116.29478737656527, 39.87687015815399],
                        [116.43403310415489, 39.87391866055694],
                        [116.42826935935004, 39.80668466725203],
                        [116.42820990939124, 39.80726621070691]
                    ]
                }
            }
        ]
    }

## # 事件

事件名称 | 参数 | 默认值 | 描述
--- | --- | --- | ---
loaded | data | {} | 图层加载完毕事件

### # `data`

名称 | 类型 | 默认值 | 描述
--- | --- | --- | ---
vueIndex | String or Number | 随机数 | plotLayer 的唯一标识，随机生成的数字或字符串，不传则自动生成
vueKey | String | 'default' | cesium 球体的唯一标识，默认值 default，当分屏时使用此对象标识多个球体

## # 示例

    <template>
      <mapgis-web-scene style="height:95vh">
        <mapgis-3d-plot-layer @loaded="handleLoaded"
                              :dataSource="dataSource"
                              :vueIndex="vueIndex"
                              :vueKey="vueKey"
        ></mapgis-3d-plot-layer>
      </mapgis-web-scene>
    </template>
    <script>
    export default {
      data() {
        return {
          //行业标绘图层数据源
          dataSource: "",
          //vueIndex，用来标识图层
          vueIndex: undefined,
          //vueKey，用来标识图层
          vueKey: undefined
        };
      },
      methods: {
        //图层加载完毕事件
        handleLoaded(e) {
          //返回vueIndex以及vueKey
          this.vueIndex = e.vueIndex;
          this.vueKey = e.vueKey;
        }
      }
    };
    </script>
    <style lang="css"></style>