sjjf-components v1.5.36

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

event

methods

PropsViewer 属性框

<sjjf-props-viewer />

props

events

PropsWindow 属性框

<sjjf-props-window />

props

methods

events

Map 地图容器组件

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

<sjjf-map></sjjf-map>

props

event

methods

MapTool 地图测量工具

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

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

methods

MapSelectBox 地图选择工具

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

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

methods

event

TileLayer 图块图层

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

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

props

FeatureLayer 要素图层

通过超图 server 加载要素图层

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

props

VectorLayer 地图-矢量图层

所有矢量要素存放的容器

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

props

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

Icon 地图-图标

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

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

props

event

Line 地图-线

地图线。

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

props

Polygon 地图-面

地图线。

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

props

code 值