# # OGC WMTS

> mapgis-3d-ogc-wmts-layer

## # 属性

### # `baseUrl`

- 类型: `String`
- 必传
- 非侦听属性
- 描述: 服务基地址

  > igs 服务： http://{ip}:{port}/igs/rest/ogc/WMTSServer
  > arcgis 服务： http://219.142.81.85/arcgis/rest/services/20wanHT/MapServer/WMTS
  > 天地图： http://t0.tianditu.gov.cn/vec_c/wmts

### # `wmtsLayer`

- 类型: `String`
- 必传
- 侦听属性
- 描述: wmts 标准中的 layer 属性，即图层名称

  > 这里以司马云上发布的 WMTS 服务为例，ArcGis 同理，访问http://develop.smaryun.com:6163/igs/rest/ogc/beijing/WMTSServer?service=WMTS&request=GetCapabilities，获取地图元信息 这里得到的是一个 XML 文档。
  > ...
  > <Layer>
  > <ows:Title>beijing</ows:Title>
  > <ows:Identifier>beijing</ows:Identifier>//这个值 beijing 就是 wmtsLayer 属性所需要的值
  > ...
  > </Layer>
  > ...
  > 全文搜索<Layer>关键字，在 Layer 下找到<ows:Identifier>属性，里面的值"beijing"就是 wmtsLayer 属性所需要的

### # `tileMatrixSet`

- 类型: `String`
- 必传
- 侦听属性
- 描述: wmts 标准中的 TileMatrixSet 属性，即地图矩阵集合

  > 这里以司马云上发布的 WMTS 服务为例，ArcGis 同理，访问http://develop.smaryun.com:6163/igs/rest/ogc/beijing/WMTSServer?service=WMTS&request=GetCapabilities，获取地图元信息 这里得到的是一个 XML 文档。
  > ...
  > <TileMatrixSet>
  > <ows:Title>采用 arcgis 计算方式的瓦片块阵集</ows:Title>
  > <ows:Abstract>该块阵集使用 arcgis 标准计算的比例尺</ows:Abstract>
  > <ows:Identifier>EPSG:4326北京市_arcgis_GB</ows:Identifier>//这个值 EPSG:4326北京市arcgis_GB 就是 TileMatrixSet 属性所需要的值
  > <ows:SupportedCRS>urn:ogc:def:crs:EPSG::4326</ows:SupportedCRS>
  > <WellKnownScaleSet>urn:ogc:def:wkss:OGC:1.0:GoogleCRS84Quad</WellKnownScaleSet>
  > ...
  > <TileMatrixSet>
  > ...
  > 全文搜索<TileMatrixSet>关键字，在<TileMatrixSet>下找到<ows:Identifier>属性，里面的值"EPSG:4326北京市_arcgis_GB"就是 tileMatrixSet 属性所需要的

### # `format`

- 类型: `String`
- 必传
- 非侦听属性
- 描述: wmts 标准中的 format 属性，即请求的图片的返回格式

  > 这里以司马云上发布的 WMTS 服务为例，ArcGis 同理，访问http://develop.smaryun.com:6163/igs/rest/ogc/beijing/WMTSServer?service=WMTS&request=GetCapabilities，获取地图元信息 这里得到的是一个 XML 文档。
  > ...
  > <Format>image/png</Format>
  > ...
  > 全文搜索<Format>关键字，里面的值"image/png"就是 format 属性所需要的

### # `tilingScheme`

- 类型: `String`
- 必传
- 侦听属性
- 描述: Cesium 的瓦片切图方式，目前支持如下值：

  > 经纬度方式请填写:EPSG:4326
  > web 墨卡托方式请填写:EPSG:3857

### # `wmtsStyle`

- 类型: `String`
- 默认值: `default`
- 必传
- 侦听属性
- 描述: wmts 标准中的 style 属性，即地图样式

  > 这里以司马云上发布的 WMTS 服务为例，ArcGis 同理，访问http://develop.smaryun.com:6163/igs/rest/ogc/beijing/WMTSServer?service=WMTS&request=GetCapabilities，获取地图元信息 这里得到的是一个 XML 文档。
  > ...
  > <Style isDefault="true">
  > <ows:Title>Default Style</ows:Title>
  > <ows:Identifier>default</ows:Identifier>//里面的"default"就是 wmtsStyle 的值
  > </Style>
  > ...
  > 全文搜索 Style 关键字，地图可以有多个 style，这里以 default，默认值为例，在<Style isDefault="true">下找到<ows:Identifier>属性，里面的"default"就是 wmtsStyle 的值

### # `layerStyle`

- 类型: `Object`
- 可选
- 侦听属性
- 描述: 控制地图的显隐、透明度以及顺序，有如下值：

  > visible Boolean 控制图层显示或隐藏，不会重新加载图层，true：显示图层、fales：隐藏图层
  > opacity Number 控制图层透明度，会重新加载图层，0 - 1 之间的数字，0：隐藏，1：显示
  > zIndex Number 控制图层顺序，会重新加载图层，类似 css 里面的 z-index，从 1 开始的数字

### # `id`

- 类型: `String`
- 可选
- 侦听属性
- 描述: 图层唯一标识符，如果不传，以 vueIndex 代替

### # `options`

- 类型: `Object`
- 可选
- 侦听属性
- 描述: Cesium 的进阶参数，另外不属于 cesium 的如下参数也在 options 中：

  > vueKey String 默认值 default 该 key 的主要作用市用来记录 Cesium 的 Source,primitive, entity 的内存中的引用数组的引用，从而避免 vue 对 cesium 的内存劫持
  > vueIndex String 默认值(Math.random() * 100000000).toFixed(0) 该 key 的主要作用市用来记录 Cesium 的 Source,primitive, entity 的内存中的引用数组的引用，从而避免 vue 对 cesium 的内存劫持

- 参考:
  `Cesium的WMTS参数` in WebMapTileServiceImageryProvider
  (opens new window)

### # `vueKey`

- 类型: `String`
- 可选
- 非侦听属性
- 默认值: `default`
- 描述:

  > mapgis-web-scene 组件的 ID，当使用多个 mapgis-web-scene 组件时，需要指定该值，来唯一标识 mapgis-web-scene 组件，
  > 同时 mapgis-web-scene 插槽中的组件也需要传入相同的 vueKey，让组件知道应该作用于哪一个 mapgis-web-scene。

### # `vueIndex`

- 类型: `Number`
- 可选
- 非侦听属性
- 描述:

  > 当 mapgis-web-scene 插槽中使用了多个相同组件时，例如多个 mapgis-3d-igs-doc-layer 组件，用来区分组件的标识符。

### # `token`

- 类型: `Object`
- 可选
- 非侦听属性
- 描述: token 信息

  > 要传 token 时，请以如下方式传递
  > 天地图:
  > token:{
  > key: "tk",
  > value: "9c157e9585486c02edf817d2ecbc7752"
  > }
  > igs 以及其他:
  > token:{
  > key: "token",
  > value: "9c157e9585486c02edf817d2ecbc7752"
  > }

## # 事件

### # `@load`

- 描述: 图层加载完成事件
- 返回值 `{ layer,vue }`
  `layer` 图层对象
  `vue` vue 对象

### # `@unload`

- 描述: 图层注销事件
- 返回值 `{ vue }`
  `vue` vue 对象

## # 示例

### # 加载天地图

    <template>
      <mapgis-web-scene>
        <mapgis-3d-ogc-wmts-layer
          :baseUrl="baseUrl"
          :wmtsLayer="wmtsLayer"
          :tileMatrixSet="tileMatrixSet"
          :tilingScheme="tilingScheme"
          :format="format"
          :token="token"
        />
      </mapgis-web-scene>
    </template>

    <script>
    export default {
      data() {
        return {
          //天地图地址
          baseUrl: "http://t0.tianditu.gov.cn/vec_c/wmts",
          //Cesium的瓦片切图方式
          tilingScheme: "EPSG:4326",
          //地图的瓦片矩阵集合
          tileMatrixSet: "c",
          //图层名称
          wmtsLayer: "vec",
          //返回格式
          format: "tiles",
          //token信息
          token: {
            key: "tk",
            value: "9c157e9585486c02edf817d2ecbc7752"
          }
        };
      }
    };
    </script>

    <style lang="css">
    .main {
      height: 600px;
      width: 100%;
    }
    </style>

### # 加载 WMTS 地图 - IGS - 4326

    <template>
      <mapgis-web-scene>
        <mapgis-3d-ogc-wmts-layer
          :baseUrl="baseUrl"
          :wmtsLayer="wmtsLayer"
          :tileMatrixSet="tileMatrixSet"
          :tilingScheme="tilingScheme"
          :format="format"
        />
      </mapgis-web-scene>
    </template>

    <script>
    export default {
      data() {
        return {
          //服务基地址
          baseUrl:
            "http://develop.smaryun.com:6163/igs/rest/ogc/beijing/WMTSServer",
          //图层名称
          wmtsLayer: "beijing",
          //地图的瓦片矩阵集合
          tileMatrixSet: "EPSG:4326_北京市_028mm_GB",
          //Cesium的瓦片切图方式
          tilingScheme: "EPSG:4326",
          //返回格式
          format: "image/png"
        };
      }
    };
    </script>

    <style lang="css">
    .main {
      height: 600px;
      width: 100%;
    }
    </style>

### # 加载 WMTS 地图 - ArcGis - 3857

    <template>
      <mapgis-web-scene>
        <mapgis-3d-ogc-wmts-layer
          :baseUrl="baseUrl"
          :wmtsLayer="wmtsLayer"
          :tileMatrixSet="tileMatrixSet"
          :tilingScheme="tilingScheme"
          :format="format"
        />
      </mapgis-web-scene>
    </template>

    <script>
    export default {
      data() {
        return {
          //服务基地址
          baseUrl:
            "http://219.142.81.85/arcgis/rest/services/矿产地数据库2019/ferrous_metal/MapServer/WMTS",
          //图层名称
          wmtsLayer: "矿产地数据库2019_ferrous_metal",
          //地图的瓦片矩阵集合
          tileMatrixSet: "default028mm",
          //Cesium的瓦片切图方式
          tilingScheme: "EPSG:4326",
          //返回格式
          format: "image/png"
        };
      }
    };
    </script>

    <style lang="css">
    .main {
      height: 600px;
      width: 100%;
    }
    </style>

### # 控制可见性，控制透明度，以及改变图层顺序

    <template>
      <mapgis-web-scene>
        <mapgis-3d-ogc-wmts-layer
          :baseUrl="baseUrl"
          :wmtsLayer="wmtsLayer"
          :tileMatrixSet="tileMatrixSet"
          :tilingScheme="tilingScheme"
          :format="format"
        />
        <mapgis-3d-ogc-wmts-layer
          :baseUrl="baseUrl2"
          :wmtsLayer="wmtsLayer2"
          :tileMatrixSet="tileMatrixSet2"
          :tilingScheme="tilingScheme2"
          :format="format"
          :layerStyle="layerStyle2"
        />
      </mapgis-web-scene>
      <button @click="add">添加地图</button>
      <button @click="isShow">是否可见</button>
      <button @click="changeOpacity">改变透明度</button>
      <button @click="changeIndex">改变图层顺序</button>
    </template>

    <script>
    export default {
      data() {
        return {
          //服务基地址
          baseUrl:
            "http://develop.smaryun.com:6163/igs/rest/ogc/WORLDMKTTILE2/WMTSServer",
          //图层名称
          wmtsLayer: "WORLDMKTTILE2",
          //地图的瓦片矩阵集合
          tileMatrixSet: "GoogleMapsCompatible_GB",
          //返回格式
          format: "image/png",
          //样式信息
          layerStyle: {
            visible: true, //是否显示图层
            opacity: 1, //图层透明度
            zIndex: 105 //图层zIndex，与css里的zIndex类似
          },
          //服务基地址
          baseUrl2:
            "http://develop.smaryun.com:6163/igs/rest/ogc/beijing/WMTSServer",
          //图层名称
          wmtsLayer2: "beijing",
          //地图的瓦片矩阵集合
          tileMatrixSet2: "EPSG:4326_北京市_028mm_GB",
          //Cesium的瓦片切图方式
          tilingScheme: "EPSG:4326",
          //样式信息
          layerStyle2: {
            zIndex: 50
          },
          //是否显示图层
          show: false
        };
      },
      methods: {
        add() {
          //通过v-if方式添加一个地图
          this.show = !this.show;
        },
        isShow() {
          //地图的显示或隐藏，会重新加载地图
          this.layerStyle.visible = !this.layerStyle.visible;
        },
        changeOpacity() {
          //地图的透明度选项，不会重新加载地图
          this.layerStyle.opacity = 0.5;
        },
        changeIndex() {
          //更改地图顺序
          if (this.layerStyle.zIndex === 105) {
            this.layerStyle.zIndex = 10;
          } else {
            this.layerStyle.zIndex = 105;
          }
        }
      }
    };
    </script>

    <style lang="css">
    .main {
      height: 600px;
      width: 100%;
    }
    </style>

### # 多个 mapgis-web-scene

    <template>
      <mapgis-web-scene :vueKey="vueKey">
        <mapgis-3d-ogc-wmts-layer
          :baseUrl="urlWmts"
          :wmtsLayer="layerWmts"
          :tileMatrixSet="tileMatrixSetWmts"
          :tilingScheme="tilingSchemeWmts"
          :format="format"
          :token="token"
          :layerStyle="layerStyleWmts"
          :vueKey="vueKey"
        />
        <mapgis-3d-igs-doc-layer
          :baseUrl="urlDoc"
          :layers="layers"
          :layerStyle="layerStyleDoc"
          :vueKey="vueKey"
        />
        <button @click="changeIndex">改变图层顺序</button>
      </mapgis-web-scene>
      <mapgis-web-scene :vueKey="vueKey2" />
    </template>

    <script>
    export default {
      data() {
        return {
          //要加载的url
          urlWmts: "http://t0.tianditu.gov.cn/vec_c/wmts",
          //天地图就传空值
          layerWmts: "vec",
          tileMatrixSetWmts: "c",
          //空间参考系
          tilingSchemeWmts: "EPSG:4326",
          //返回格式
          format: "tiles",
          //token信息
          token: {
            key: "tk",
            value: "9c157e9585486c02edf817d2ecbc7752"
          },
          layerStyleWmts: {
            zIndex: 100
          },
          //要加载的url
          urlDoc: "http://localhost:6163/igs/rest/mrms/docs/武汉_专题图_4328",
          //要显示的子图层
          layers: "show:1,2",
          //mapgis-web-scene的Id，组件唯一标识，多个图层时用来查找webGlobe
          vueKey: "vueKeyOne",
          vueKey2: "vueKeyTwo",
          layerStyleDoc: {
            zIndex: 1000
          }
        };
      },
      methods: {
        changeIndex() {
          if (this.layerStyleDoc.zIndex === 1000) {
            this.layerStyleDoc.zIndex = 50;
          } else {
            this.layerStyleDoc.zIndex = 1000;
          }
        }
      }
    };
    </script>