V-openlayers NPM

v-openlayers

版本

v2.0.0

简介

基于vue3+openlayers封装的组件库

作者

kangjinrui<1092014304@qq.com>

开始使用

安装

npm install v-openlayers --save

按需引入组件

import { OlMap } from 'v-openlayers'

按需引入库

import { OlHandler } from 'v-openlayers'

全局引入组件

import VMap from 'v-openlayers'
vue.use(VMap)

1.地图组件

1.1 OlMap

Example

<OlMap
  class="app-content"
  show-basemapbar
  show-toolbar
  @on-ready="handleMapReady"
  @on-mouseclick="handleMouseClick"
  @on-toolchange="handleToolChange"
></OlMap>

Attributes

Param	Type	Description	Default
mapConfig	object	地图初始配置	{}
showStatusbar	Boolean	是否显示状态栏	true
identify	boolean	是否开启i查询	false
controls	object	可选ol自带地图工具	{showBasemap: true,zoom: true}

Event

Name	Description	Param
ready	地图初始化完成回调	olHandler
mouse-move	鼠标移动	鼠标位置信息
mouse-click	鼠标点击	鼠标位置信息
mouse-dbclick	鼠标双击	鼠标位置信息
mouse-moveend	鼠标移动结束	鼠标位置信息
draw-end	绘制结束	绘制结果

1.2 OlOverlay

Example

<OlOverlay :title="'title'" :position="position">
  <!-- 插入内容 -->
</OlOverlay>

Attributes

Param	Type	Description	Default
theme	String	主题可选light	dark	dark
showTitle	Boolean	是否显示标题	false
title	String	标题	''
position	Array/undefined	位置	undefined

Event

Name	Description	Param
on-close	关闭事件

1.3 OlVector

Example

<OlVector
  :features="features"
  :visible="visible"
  :opacity="opacity"
  :z-index="1000"
  :style="style"
  :modifiable="modifiable"
  :cluster-options="clusterOptions"
  @select-change="handleSelectChange"
></OlVector>

Attributes

Param	Type	Description	Default
features	Array/Object	空间数据，支持Array和geojson	[]
geomField	String	features=Array时空间字段名称	wktstr
visible	Boolean	是否可见	true
opacity	Number	透明度（0-1）	1
zIndex	Number	图层层级	undefined
style	Object	全局样式	{circle: {},icon:{},stroke: {},fill: {},text: {}}
selectable	boolean	可选中的	false
modifiable	boolean	可编辑的	false
clusterOptions	Object/null	聚合相关选项	null

参考格式
style {circle:{color,radius},icon:{},text:{src,scale},fill: {color},stroke: {color,width}}
clusterOptions {showLabel:true,distance:20,minDistance:0}

Event

Name	Description	Param
select-change	可选状态下选中改变触发

1.4 OlTile

Example

<OlTile
  map-provider="mapProvider"
  :url="url"
  :request-params="requestParams"
  :visible="visible"
  :opacity="opacity"
  :min-zoom="minZoom"
  :max-zoom="maxZoom"
></OlTile>

Attributes

Param	Type	Description	Default
mapProvider	String	服务提供者	可选tdt/supermap/wmts/xyz/arcgistile默认空
url	String	服务地址	格式https://mapserver/wmts
requestParams	Object	请求参数	格式{layer,tilematrixset,Format,...}
visible	Boolean	是否可见	true
opacity	Number	透明度（0-1）	1
zIndex	Number	图层层级	undefined
minZoom	Number/undefined	最小显示层级	undefined
maxZoom	Number/undefined	最大显示层级	undefined

Event

Name	Description	Param
ready	加载完成	layer

1.5 OlWms

Example

<OlWms
  :url="url"
  :visible="visible"
  :opacity="opacity"
/>

Attributes

Param	Type	Description	Default
mapProvider	String	服务提供者	可选image/imageTile，默认imageTile
url	String	服务地址	格式https://mapserver/wms
requestParams	Object	请求参数	格式{layers,...}
visible	Boolean	是否可见	true
opacity	Number	透明度（0-1）	1
zIndex	Number	图层层级	undefined

Event

Name	Description	Param
ready	加载完成	layer

1.6 OlArcgis

Example

<OlArcgis
  :url="url"
  :visible="visible"
  :opacity="opacity"
/>

Attributes

Param	Type	Description	Default
mapProvider	String	服务提供者	可选image/imageTile，默认imageTile
url	String	服务地址	格式https://sampleserver/MapServer
visible	Boolean	是否可见	true
opacity	Number	透明度（0-1）	1
zIndex	Number	图层层级	undefined

Event

Name	Description	Param
ready	加载完成	layer

1.7 OlPopup

Example

<OlPopup
  :position="position"
  :properties="properties"
  :table-height="tableHeight"
  :table-header="tableHeader"
/>

Attributes

Param	Type	Description	Default
theme	String	主题可选light/dark	light
title	String	标题	''
position	Array	位置	格式lon,lat
properties	Array	属性列表	格式{label,value},...
showHeight	Boolean	是否显示表头	false
tableHeight	Number	表格高度	300
tableHeader	Array	自定义表头	默认 {label: '属性',value: 'label',},{label: '值',value: 'value',width: 150}