zjyzt_gis_master_web_ui/src/components/DataServices/TileService.vue

<template>
  <el-container>
    <div v-for="(item, index) in content" :key="index">
      <el-row class="first_level_title">{{ item.title }}</el-row>
      <div>
        <el-row v-for="(item_, index_) in item.children" :key="index_">
          <el-col class="label" :span="2"> {{ item_.label }}： </el-col>
          <el-col class="text" :span="22">
            {{ item_.text }}
          </el-col>
        </el-row>
      </div>
      <el-row class="image">
        <img :src="imagePath + item.image" alt="" />
      </el-row>
    </div>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      imagePath: "./static/images/tileservice/",
      content: [
        {
          title: "影像底图服务",
          children: [
            {
              label: "服务类型",
              text: "瓦片服务",
            },
            {
              label: "瓦片类型",
              text: "栅格",
            },
            {
              label: "瓦片描述",
              text: "影像底图瓦片",
            },
            {
              label: "瓦片规范",
              text: "OGC WMTS标准",
            },
            {
              label: "URL地址",
              text: "http://122.228.13.28:1100/sky0/img_w/wmts?tk=密钥",
            },
            {
              label: "示例",
              text: "http://122.228.13.28:1100/sky0/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=密钥",
            },
          ],
          image: "raster.png",
        },
        {
          title: "影像注记服务",
          children: [
            {
              label: "服务类型",
              text: "瓦片服务",
            },
            {
              label: "瓦片类型",
              text: "栅格",
            },
            {
              label: "瓦片描述",
              text: "影像注记瓦片",
            },
            {
              label: "瓦片规范",
              text: "OGC WMTS标准",
            },
            {
              label: "URL地址",
              text: "http://122.228.13.28:1100/sky0/cia_w/wmts?tk=密钥",
            },
            {
              label: "示例",
              text: "http://122.228.13.28:1100/sky0/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=密钥",
            },
          ],
          image: "raster_zj.png",
        },
        {
          title: "矢量底图服务",
          children: [
            {
              label: "服务类型",
              text: "瓦片服务",
            },
            {
              label: "瓦片类型",
              text: "栅格",
            },
            {
              label: "瓦片描述",
              text: "矢量底图瓦片",
            },
            {
              label: "瓦片规范",
              text: "OGC WMTS标准",
            },
            {
              label: "URL地址",
              text: "http://122.228.13.28:1100/sky0/vec_w/wmts?tk=密钥",
            },
            {
              label: "示例",
              text: "http://122.228.13.28:1100/sky0/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=密钥",
            },
          ],
          image: "vecter.png",
        },
        {
          title: "矢量注记服务",
          children: [
            {
              label: "服务类型",
              text: "瓦片服务",
            },
            {
              label: "瓦片类型",
              text: "栅格",
            },
            {
              label: "瓦片描述",
              text: "矢量注记瓦片",
            },
            {
              label: "瓦片规范",
              text: "OGC WMTS标准",
            },
            {
              label: "URL地址",
              text: "http://122.228.13.28:1100/sky0/cva_w/wmts?tk=密钥",
            },
            {
              label: "示例",
              text: "http://122.228.13.28:1100/sky0/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=密钥",
            },
          ],
          image: "vecter_zj.png",
        },
        {
          title: "地形晕渲服务",
          children: [
            {
              label: "服务类型",
              text: "瓦片服务",
            },
            {
              label: "瓦片类型",
              text: "栅格",
            },
            {
              label: "瓦片描述",
              text: "地形晕渲底图瓦片",
            },
            {
              label: "瓦片规范",
              text: "OGC WMTS标准",
            },
            {
              label: "URL地址",
              text: "http://122.228.13.28:1100/sky0/ter_w/wmts?tk=密钥",
            },
            {
              label: "示例",
              text: "http://122.228.13.28:1100/sky0/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=密钥",
            },
          ],
          image: "topography.png",
        },
        {
          title: "地形注记服务",
          children: [
            {
              label: "服务类型",
              text: "瓦片服务",
            },
            {
              label: "瓦片类型",
              text: "栅格",
            },
            {
              label: "瓦片描述",
              text: "地形注记瓦片",
            },
            {
              label: "瓦片规范",
              text: "OGC WMTS标准",
            },
            {
              label: "URL地址",
              text: "http://122.228.13.28:1100/sky0/cta_w/wmts?tk=密钥",
            },
            {
              label: "示例",
              text: "http://122.228.13.28:1100/sky0/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=密钥",
            },
          ],
          image: "topography_zj.png",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.el-container {
  display: block;
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  background: #ffffff;
  overflow: hidden;
  overflow-y: auto;
  .el-row {
    // margin-bottom: 10px;
    line-height: 40px;
    &:last-child {
      // margin-bottom: 10px;
    }
    &::before {
      display: unset;
    }
  }

  .first_level_title {
    font-size: 18px;
    font-weight: bold;
  }
  .label {
    font-size: 16px;
    // font-weight: bold;
  }
  .text {
    font-size: 16px;
    // font-weight: bold;
  }
}
</style>