# qe-imagery-layer

图像图层组件，主要用于接入展示各种类型的图层服务,如: arcgis 的服务、OGC 标准服务等。

# 实例

隐藏代码

<template>

  <div style="height: 450px;">
    <div  style="height: 8%;">
      <button @click="handler('arcgis')" style="height: 30px;">
      arcgis 图层测试
      </button>
      <button @click="handler('wmts')" style="height: 30px;">
      wmts 图层测试
      </button>
    </div>
    <qe-viewer
      style="height: 90%;"
      :imagery-type="'AMap'"
      :fullscreen-button="true"
      :default-view="defaultView"
       @ready="getViewer"
    >
      <qe-imagery-layer
        :is-base-layer="true"
        :imagery-provider-type="imageryProviderType"
        :imagery-options="imageryOptions"
      ></qe-imagery-layer>
    </qe-viewer>
  </div>
</template>

<script>
import { QeViewer, QeImageryLayer } from '@qycloud/vue-qearth';
import 'vue2qearth/vue2qearth.css'
export default {
  components: {
    QeViewer, 
    QeImageryLayer
  },
  data () {
    return {
      viewer: null,
      defaultView: [
        118.7863,
        31.9087,
        801.6425,
        1.724684714172732,
        -53.783141852231246,
        0.008819224020548466
      ],
      isShowLayer: true,
      imageryProviderType: "arcgis",
      imageryOptions: {
        url:
          'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
      }
    };
  },
  methods: {
    getViewer(viewer) {
      this.viewer = viewer;
    },
    handler(type) {
      switch (type) {
      case "arcgis":
        this.imageryProviderType = "arcgis",
        this.imageryOptions = {
          url:
            'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
        }
        break;
      case "wms":
        this.defaultView = [
          122.1492269,
          29.95259231,
          801.6425,
          1.724684714172732,
          -53.783141852231246,
          0.008819224020548466
        ]
        this.imageryProviderType = "wms",
        this.imageryOptions = {
          url:
            "https://www.sinochemlogistics.com/iserver/services/map-zhonghua_base1/wms130/base@data1",
          params: {
            format: "image/png",
            layers: "base@data1",
            transparent: "true"
          }
        }
        break;    
      case "wmts":
        this.imageryProviderType = "wmts",
        this.imageryOptions = {
          url: `http://t0.tianditu.gov.cn/img_w/wmts?tk=9e9d841b46f4b67ef2baaa2813dcb49b`,
          layer: "img",
          tileMatrixSetID: "w",
          format: "tiles",
          style: "default"
        }
        break;  
      default:
        break;
    }
    }
  }
}
</script>

# Attributes

参数	说明	类型	可选值	默认值
imageryProviderType	图层类型	string	参照 imageryProviderType 说明	—
imageryOptions	图层可选参数	object	参照 imageryProviderType 说明	—
isBaseLayer	是否移出默认的底图，只显示当前图层	boolean	—	true
name	图层名称	string	—	—
id	图层唯一 `id` 不设置会自动生成	string	—	—
visible	图层是否可见	boolean	—	true
minZoom	图层最小层级，低于最小层级则不显示	Number	—	0
maxZoom	图层最大层级，超过则不显示	Number	—	25
layerOptions	图层其他可选参数	object	—	—

# imageryProviderType-说明

// 接入 arcgis 服务图层
// 更多参数设置参照链接：https://cesium.com/docs/cesiumjs-ref-doc/ArcGisMapServerImageryProvider.html?classFilter=arcgis
{
  imageryProviderType: "arcgis",
  imageryOptions: {
    url:
      'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
  }
}

// 接入 wms 服务图层
// 更多参数设置参照链接：https://cesium.com/docs/cesiumjs-ref-doc/WebMapServiceImageryProvider.html?classFilter=web
{
  imageryProviderType: "wms",
  imageryOptions: {
    url: 'http://61.182.87.194:8082/geoserver/yingxiang/wms?service=WMS',
    layers: 'yingxiang:wxyx',
    parameters: {
      transparent: true,
      format: 'image/png'
    }
  }
}

// 接入 wmts 服务图层
// 更多参数设置参照链接：https://cesium.com/docs/cesiumjs-ref-doc/WebMapTileServiceImageryProvider.html?classFilter=web
{
  imageryProviderType: "wmts",
  imageryOptions: {
    url: `http://t0.tianditu.gov.cn/img_w/wmts?tk=9e9d841b46f4b67ef2baaa2813dcb49b`,
    layer: "img",
    tileMatrixSetID: "w",
    format: "tiles",
    style: "default"
  }
}

// 接入在线天地图相关图层
{
  imageryProviderType: "TMap",
  imageryOptions: {
    /*在线天地图的服务类型，vec_c 经纬度投影的矢量地图，
    cva_c 经纬度投影的矢量注记，img_c 经纬度投影的影像底图，cia_c 经纬度投影的影像注记，
    vec_w/cva_w/img_w/cia_w 是对应的球面墨卡托投影的图层*/
    type: "img_c",
    tk: "xxxxx" // 天地图服务调用需要申请的key，有默认值
  }
}

// 接入在线谷歌地图相关图层
{
  imageryProviderType: "GMap",
  imageryOptions: {
    // google地图图层类型，`"img" --影像图,"cia" -- 中文标记,"vec" -- 矢量图`
    type: "img"
  }
}

// 接入在线百度地图相关图层
{
  imageryProviderType: "BMap",
  imageryOptions: {
    // 百度地图图层类型，vec --矢量图，custom 自定义图层通过style设置其自定义样式。
    type: "vec",
    /*只有当type为custom时，才有用。暂时支持的颜色:
    `dark,midnight,grayscale,hardedge,light,redalert,googlelite,grassgreen,pink,darkgreen,bluish`*/
    style: "dark"
  }
}

// 接入在线高德地图相关图层
{
  imageryProviderType: "AMap",
  imageryOptions: {
    // 高德地图图层类型，`"img" --影像图,"cia" -- 中文标记,"vec" -- 矢量图`
    type: "img"
  }
}

// 接入通过使用指定的URL模板请求图块来提供图像图
// 更多参数设置参照链接：https://cesium.com/docs/cesiumjs-ref-doc/UrlTemplateImageryProvider.html?classFilter=url
{
  imageryProviderType: "xyz",
  imageryOptions: {
    url : 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
    credit : 'Map tiles by CartoDB, under CC BY 3.0. Data by OpenStreetMap, under ODbL.'
  }
}

// 接入单图片相关图层
// 更多参数设置参照链接：https://cesium.com/docs/cesiumjs-ref-doc/SingleTileImageryProvider.html?classFilter=sing
{
  imageryProviderType: "single_tile",
  imageryOptions: {
    url: 'examples/images/tile/world_n.jpg'
  }
}

# Events

覆盖物事件的使用请参照上面ImageryLayer 实例

// 图层可选事件
"ready" // 组件装载后，返回当前实例对象

← qe-entity-layer qe-html-layer →