FeatureQuery 要素查询

对用户传入的或选择的待查询图层列表和交互式创建的查询几何，构建查询参数。

<mapgis-feature-query></mapgis-feature-query>

基本用法

API

属性

参数	说明	类型	默认值	版本
queryItems	查询功能项列表，[{id,label,icon,action}]，存在内置point、circle、rectangle、polyline、polygon功能项ID，对于外部功能项需要传入完整属性，对内置功能项只需要传入ID，action为函数	object
queryLayerSelectMode	查询图层选择模式，all：查询全部图层；selected：查询选择图层	all|selected	all
queryLayers	要查询的图层列表，如果为空，则允许用户选择要查询的图层列表	QueryLayerParams[]
geometry	查询几何	object
geometryVisible	是否显示查询区域	boolean	true
continueDrawing	是否开启连续绘制	boolean	true
queryDrawStyle	绘制样式	object	{lineStyle:'solid',lineColor:'rgba(24,144,255,1)',lineWidth:2,fillColor:'rgba(24,144,255,0.3)'}
queryShowStyle	查询结果显示样式	QueryShowStyle
bufferDistance	缓冲距离，当查询类型为点和线时有效	number	5
bufferUnit	缓冲单位，当查询类型为点和线时有效，可取值为像素、厘米、米、千米，默认为像素	pixel|centimeter|meter|kilometer	pixel
config	查询配置	slot
queryResult	查询结果控制参数	QueryResultParams

事件

事件名称	说明	回调参数	版本
itemChange	查询功能项变化	itemId, item
queryParamsChange	查询参数变化	{queryLayers: QueryLayerParams[], geometry, options: QueryOtherOptions}
clear	清除

方法

名称	描述	版本
updateActiveQueryItem(itemId)	更新激活的查询功能项
updateGeometry(geometry)	更新查询几何
query	查询
clearState	清除查询状态和查询结果

LayerQueryOptions

查询图层参数

export interface LayerQueryOptions {
  geometry?: object // 查询几何，存在则采用该参数，不存在则采用公共的查询几何
  distance?: number // 查询距离，对点查询和线查询有效
  attributeFilter?: string // 属性过滤条件
  fieldList?: string[] // 返回的字段列表
  featureIds?: number[] // 要素id列表
}

QueryLayerParams

查询图层参数，支持用户直接传入查询图层列表，当同时存在layerId和sublayerId时，优先使用该参数。

export interface QueryLayerParams extends LayerQueryOptions {
  layer: object // layer对象
  sublayers?: QueryLayerParams[] // 查询子图层列表
}

QueryOtherOptions

查询其他选项

export interface QueryOtherOptions {
}

QueryShowStyle

查询显示样式

// 默认的查询结果显示样式
export const defaultQueryShowStyle = {
  // 显示模式，可取值markerHighlight：标注高亮模式、featureHighlight：要素高亮模式
  showMode: 'markerHighlight',
  // 标注样式，用于标注高亮模式
  markerStyle: {
    // 默认图标，为空时使用内置的默认图标
    defaultImage: '',
    // 高亮图标，为空时使用内置的高亮图标
    highlightImage: '',
    // 图标宽度，为0时自动计算实际宽度
    width: 0,
    // 图标高度，为0时自动计算实际高度
    height: 0
  },
  // 弹窗样式
  popupStyle: {
    // 弹窗组件，可为Component类型或string类型，为null时使用内置的弹窗组件
    component: null,
    // 弹窗锚点，可取值如下：'top-left' | 'top-center' | 'top-right' | 'center-center' | 'center-left' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
    // 默认为bottom-center
    anchor: 'bottom-center',
    // 弹窗展示的属性名宽度，单位像素
    nameWidth: 100,
    // 弹窗展示的属性值宽度，单位像素
    valueWidth: 140
  },
  // 要素样式，仅仅用于要素高亮模式下的要素默认样式
  featureStyle: {
    // 标记，用于点图形
    marker: {
      type: SymbolType.simpleMarker,
      // 颜色
      color: 'rgba(24, 144, 255, 0.6)',
      // 大小
      size: 10,
      // 轮廓
      outline: {
        // 颜色
        color: 'rgba(24, 144, 255, 1)',
        // 宽度
        width: 2
      }
    },
    // 线，用于线图形
    line: {
      type: SymbolType.simpleLine,
      // 颜色
      color: 'rgba(24, 144, 255, 1)',
      // 宽度
      width: 3
    },
    // 填充，用于圆、矩形和多边形图形
    fill: {
      type: SymbolType.simpleFill,
      // 填充颜色
      color: 'rgba(24, 144, 255, 0.6)',
      // 轮廓
      outline: {
        // 颜色
        color: 'rgba(24, 144, 255, 1)',
        // 宽度
        width: 2
      }
    }
  },
  // 要素高亮样式，应用于标注高亮模式和要素高亮模式下的要素高亮
  highlightFeatureStyle: {
    // 标记，用于点图形
    marker: {
      type: SymbolType.simpleMarker,
      // 颜色
      color: 'rgba(1, 255, 255, 0.6)',
      // 大小
      size: 10,
      // 轮廓
      outline: {
        // 颜色
        color: 'rgba(1, 255, 255, 1)',
        // 宽度
        width: 2
      }
    },
    // 线，用于线图形
    line: {
      type: SymbolType.simpleLine,
      // 颜色
      color: 'rgba(1, 255, 255, 1)',
      // 宽度
      width: 3
    },
    // 填充，用于圆、矩形和多边形图形
    fill: {
      type: SymbolType.simpleFill,
      // 填充颜色
      color: 'rgba(1, 255, 255, 0.6)',
      // 轮廓
      outline: {
        // 颜色
        color: 'rgba(1, 255, 255, 1)',
        // 宽度
        width: 2
      }
    }
  }
}

QueryResultParams

查询结果配置项

export interface QueryResultParams {
  inAttributeTable: boolean // 是否显示查询结果在属性表中，默认是true
  style: string // 属性表样式，默认是'position: absolute; width: 100%; height: 50%;'
  position:
    | 'top-right'
    | 'top-left'
    | 'top-center'
    | 'center-right'
    | 'center-left'
    | 'center-center'
    | 'bottom-right'
    | 'bottom-left'
    | 'bottom-center' // 属性表位置，默认是'bottom-center'
  customAttributeTableMaxHeight: ({ viewContainerElement, tableContainerElement, tableElement }) => number // 自定义属性表最大高度
}