🚀. Socket Launch Week Day 2:Introducing Manifest Alerts.Learn more →

sjjf-components

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

sjjf-components

packages components for sjjf

latest

npm

Version: 1.5.36

Version published: 3 years ago

Weekly downloads: 4

Maintainers: 1

Weekly downloads

Created: 5 years ago

Source

SJJF 组件

依赖

{
     "dependencies": {
        "@supermap/iclient-ol": "^10.1.0",
        "axios": "^0.19.2",
        "element-ui": "^2.14.0",
        "js-cookie": "^2.2.1",
        "ol": "^6.3.1",
        "vue": "^2.6.11"
    }
}

安装

方式 1

npm install sjjf-components --save

在 main.js 中引用

import ssjf from 'sjjf-components'

Vue.use(sjjf)

方式 2

下载组件将组件目录放到 components 目录下

在 main.js 中引用

import sjjf from './components/sjjf-components'

Vue.use(sjjf)

组件

Tree 设计交付阶段树

<sjjf-tree />

props

属性	类型	必填	描述	默认值
struct	String	否	数据结构类型。专业结构:'pro', 工厂结构: 'factory'	'pro'
defaultStage	String	否	默认勾选阶段	无

event

事件	描述	返回值
selectNode	选择一个子节点时事件	返回被点选的子节点 Node:Object , {id: 权限 id, name: 节点名称, stage: 阶段 code, code: code 值, defaultCheck: 是否默认勾选}
checkNode	当 checkbox 改变时事件	返回被勾选的子节点 Array.[ Node:Object ]

methods

方法名	描述	参数	返回值
checkStage	选中某一个阶段的所有默认勾选	(阶段的 code: stage:String )	无
checkCodes	通过 code 选中对应的节点	(节点的 code 数组: Array.[ code:String ] )	无

PropsViewer 属性框

<sjjf-props-viewer />

props

属性	类型	必填	描述	默认值
keys	Object	否	属性：{key: '字段名'}	{}
values	Object	否	值：{key: '属性值'}	{}
col	Number	否	一行显示属性的数量	2
clickable	Array	否	可点击属性	[]

events

事件名	描述	返回值
propClick	当可点击属性被点击时	{key: '', value: ''}

PropsWindow 属性框

<sjjf-props-window />

props

属性	类型	必填	描述	默认值
width	String	否	窗体的宽度	'50%'
col	Number	否	一行显示属性的数量	2

methods

方法名	描述	参数	返回值
show	显示属性信息弹窗	(属性中文映射:keys:Object, 属性值:values:Object, 弹窗标题:title:String, 可点击属性:clickable:Array )	无

events

事件名	描述	返回值
propClick	当可点击属性被点击时	{key: '', value: ''}

Map 地图容器组件

承载所有地图内容的底层容器，可以控制底图的切换

<sjjf-map></sjjf-map>

props

属性	类型	必填	描述	默认值
zoom	Number	否	地图默认的缩放	10
minZoom	Number	否	地图最小的缩放等级	0
maxZoom	Number	否	地图最大的缩放等级	19
center	Array	否	地图默认的中心位置	[118.66521374573401, 37.432832304292006]
defaultShow	String	否	默认展示底图样式, 参数 'vec':矢量图, 'img': 影像图	'vec'

event

事件	描述	返回值
click	点击地图任意位置响应的事件	地图点击事件 MapBrowserEvent:Object
showInfo	点击地图要素时响应事件	要素信息 Array.[ Feature:Object ]
layerChange	地图底图在矢量图与卫星图切换事件	图层标识 LayerSign:String 'img'卫星图层 'vec'矢量图层
viewChange	地图视图变化事件	地图视图变化事件 MapState:Object

methods

方法名	描述	参数	返回值
panTo	地图显示位置平移到指定位置	(坐标:coordninate:Array, 缩放等级:zoom:Number )	无
toggleLayer	控制地图底图显示	(图层标识: LayerSign:String) 'img'卫星图层 'vec'矢量图层	无
zoomIn	缩小地图	无	无
zoomOut	放大地图	无	无

MapTool 地图测量工具

测量长度与面积的地图工具,使用时应当主动调用

<sjjf-map>
  <sjjf-map-tools></sjjf-map-tools>
</sjjf-map>

methods

方法名	描述	参数	返回值
measureLength	测量长度	无	无
measureArea	测量面积	无	无
stopMeasure	停止测量	无	无

MapSelectBox 地图选择工具

地图多边形选择工具,使用时应当主动调用

<sjjf-map>
  <sjjf-map-select-box></sjjf-map-select-box>
</sjjf-map>

methods

方法名	描述	参数	返回值
start	开始绘制多边形	无	无
stop	停止绘制多边形	无	无

event

事件	描述	返回值
selected	绘制完毕返回多边形坐标	多边形坐标 coordinites:Array.[ Array ]

TileLayer 图块图层

只能用来加载超图的图块图层服务

<sjjf-map>
  <sjjf-map-rest-tile-layer></sjjf-map-rest-tile-layer>
</sjjf-map>

props

属性	类型	必填	描述	默认值
minZoom	Number	否	在地图最小层级内展示	0
maxZoom	Number	否	在地图最大层级内展示	19
zIndex	Number	否	图层的展示层级,数值越大展示层级越高	1
url	String	否	图层的地址	无

FeatureLayer 要素图层

通过超图 server 加载要素图层

<sjjf-map>
  <sjjf-feature-layer />
</sjjf-map>

props

属性	类型	必填	描述	默认值
serverUrl	String	否	超图 server 数据集地址	无
code	String	否	code 值	无
projectNumber	String	否	项目编码，填入项目编码后，通过用户获取权限将失效	无
queryCoordinates	Array	否	范围查询的坐标 Array. [ Array ]	无
minZoom	Number	否	在地图最小层级内展示	0
maxZoom	Number	否	在地图最大层级内展示	19
zIndex	Number	否	图层的展示层级,数值越大展示层级越高	5
version	Number, String	否	图层的版本，默认使用最新版本	无
layerStyle	Object	否	图层的样式,详细见下面 layerStyle	无

VectorLayer 地图-矢量图层

所有矢量要素存放的容器

<sjjf-map>
  <sjjf-map-vector-layer> </sjjf-map-vector-layer>
</sjjf-map>

props

属性	类型	必填	描述	默认值
minZoom	Number	否	在地图最小层级内展示	0
maxZoom	Number	否	在地图最大层级内展示	19
zIndex	Number	否	图层的展示层级,数值越大展示层级越高	5
layerStyle	Object	否	图层的样式,详细见下面 layerStyle	无

LayerStyle

使用 layerStyle 可以自由的控制图层内要素的样式。

{ //LayerStyle样式
            point: { //矢量点
                radius: 5, //点大小
                fill: { //填充
                    color: '#ff33aa' //填充色, 填充色可以为rgba格式
                },
                stroke: { //外边线
                    width: 2, //外边线粗细
                    color: '#ffffff' //外边线颜色
                }
            },
            icon: { //图标
                src: '', //图片文件地址
                anchor: [0.5, 1], //距离中心点的位置[x, y], [0, 0]是图片中心点和坐标位置贴合
                scale: [1, 1], //图片缩放比例[宽, 高], [1, 1]是原比例

            },
            line:  { //线
                stroke: {
                    width: 3, //线条粗细
                    color: '#fa9a1b', //线条颜色
                    lineDash: [5, 5] || null //设置虚线[虚线长度, 虚线间隔], 设为null就不显示虚线
                }
            },
            polygon: { // 面
                fill: { //填充
                    color: '#ff33aa' //填充色, 填充色可以为rgba格式
                },
                stroke: { //外边线
                    width: 2, //外边线粗细
                    color: '#ffffff', //外边线颜色
                    lineDash: [5, 5] || null //设置虚线[虚线长度, 虚线间隔], 设为null就不显示虚线
                }
            },
            text: { // 展示文字
                key: 'stakenumber', //要展示的属性key
                color: '#454549', //文字的颜色
                scale: 1, //文字缩放
                textAlign: 'center', //文字横向对齐方式
                textBaseline: 'baseline', //文字纵向对齐方式
                stroke: {
                    color: '#ffffff', //文字描边颜色
                    width: 1 //文字描边粗细
                }
            }
        }

可以只使用其中的一项，或多项组合使用

Marker 地图-点

地图点。可以使用矢量的点，也可以使用静态图片展示图标

<sjjf-map>
  <sjjf-map-vector-layer>
    <sjjf-map-marker />
  </sjjf-map-vector-layer>
</sjjf-map>

props

属性	类型	必填	描述	默认值
position	Array	必填	marker 的位置[x, y]	无
radius	Number	否	点大小, 使用图标时不生效	8
color	String	否	点颜色,使用图标时不生效	#1890ff
strokeColor	String	否	外边线颜色,使用图标时不生效	#ffffff
strokeWidth	Number	否	外边线宽度,使用图标时不生效	2
icon	String	否	图标图片的位置	无
iconScale	Array	否	图片大小缩放[宽, 高]	[1, 1]
iconAnchor	Array	否	图标相对中心点的位置	[0.5, 1]
text	String	否	文字标签的文字	无
textScale	Array	否	文字大小缩放	[1, 1]
textStrokeColor	String	否	文字边线颜色	#ffffff
textStrokeWidth	Number	否	文字边线宽度	2
textOffsetX	Number	否	文字相对坐标点 x 偏移多少像素	0
textOffsetY	Number	否	文字相对坐标点 y 偏移多少像素	0
info	Object	否	要素的额外信息.点击地图返回要素时携带的信息	无

Icon 地图-图标

地图点。可以使用矢量的点，也可以使用静态图片展示图标

<sjjf-map>
  <sjjf-map-icon />
</sjjf-map>

props

属性	类型	必填	描述	默认值
position	Array	必填	marker 的位置[x, y]	无
src	String	必填	图片地址
size	Array	否	图片的宽高	[30, 30]
text	String	否	文字
textColor	String	否	文字颜色	#FFFFFF
strokeColor	String	否	文字外边框颜色	#000000
info	Object	否	要素的额外信息.点击地图返回要素时携带的信息	无

event

事件	描述	返回值
click	点击图标事件	属性中的 info

Line 地图-线

地图线。

<sjjf-map>
  <sjjf-map-vector-layer>
    <sjjf-map-line></sjjf-map-line>
  </sjjf-map-vector-layer>
</sjjf-map>

props

属性	类型	必填	描述	默认值
coordinates	Array.[ Array ]	必填	线的坐标	无
stroke	String	否	线颜色	blue
strokeWidth	Number	否	线宽度	2
lineDash	Array	否	虚线的长度和间隔[长度, 间隔]	无
info	Object	否	要素的额外信息.点击地图返回要素时携带的信息	无

Polygon 地图-面

地图线。

<sjjf-map>
  <sjjf-map-vector-layer>
    <sjjf-map-polygon></sjjf-map-polygon>
  </sjjf-map-vector-layer>
</sjjf-map>

props

属性	类型	必填	描述	默认值
coordinates	Array.[ Array ]	必填	面的坐标	无
color	String	否	多边形面的颜色	rgba(255, 255, 255, 0.1)
stroke	String	否	边线颜色	blue
strokeWidth	Number	否	边线宽度	2
lineDash	Array	否	边线虚线的长度和间隔[长度, 间隔]	无
info	Object	否	要素的额外信息.点击地图返回要素时携带的信息	无

code 值

要素	code 值	阶段
中线桩	FS_CENTER_LINE_STAKE	可研
管线	FS_PIPELINE	可研
阀室	FS_VALVE_ROOM	可研
公路铁路穿跨越	FS_SMALL_CROSSING	可研
站场	FS_STATION	可研
阀室	BD_VALVE_ROOM	初设
管线	BD_CENTER_LINE	初设
站场	BD_STATION	初设
中线桩	BD_CENTER_LINE_STAKE	初设
高后果区	BD_HIGHCONSEQUENCE_AREA	初设
地区等级	BD_LOCATION_CLASS	初设
公路铁路穿跨越	BD_SMALL_CROSSING	初设
中线桩	DD_CENTER_LINE_STAKE	详设
管线	DD_CENTER_LINE	详设
阀室	DD_VALVE_ROOM	详设
站场	DD_STATION	详设
地区等级	DD_LOCATION_CLASS	详设
铁路穿越	DD_RAILWAY_CROSSING	详设
公路穿越	DD_ROAD_CROSSING	详设
高后果区	DD_HIGHCONSEQUENCE_AREA	详设

Keywords

sjjf

FAQs

What is sjjf-components?

Is sjjf-components popular?

Is sjjf-components well maintained?

Package last updated on 14 Jun 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

sjjf-components

SJJF 组件

依赖

安装

方式 1

方式 2

组件

Tree 设计交付阶段树

props

event

methods

PropsViewer 属性框

props

events

PropsWindow 属性框

props

methods

events

Map 地图容器组件

props

event

methods

MapTool 地图测量工具

methods

MapSelectBox 地图选择工具

methods

event

TileLayer 图块图层

props

FeatureLayer 要素图层

props

VectorLayer 地图-矢量图层

props

LayerStyle

Marker 地图-点

props

Icon 地图-图标

props

event

Line 地图-线

props

Polygon 地图-面

props

code 值

Keywords

Related posts

npm Package Uses Prompt Injection and Token Flooding to Disrupt AI Malware Scanners

Introducing Manifest Alerts