tcctyn-ui/src/views/gisManagement/configSetting/index.vue

<template>
  <div class="app-container">
    <el-card class="configSetting">
      <template #header>
        <div class="card-header">
          <span class="name">地图配置</span>
          <el-link type="primary" v-if="!isEdite" @click="isEdite = true">编辑</el-link>
        </div>
      </template>

      <template #footer>
        <div class="card-footer">
          <el-button type="success" @click="showMap = true">预览</el-button>
          <el-button type="primary" @click="saveClick" v-if="isEdite">保存</el-button>
        </div>
      </template>

      <el-form :model="formData" label-width="100px" :disabled="!isEdite">
        <el-divider content-position="left">视角配置</el-divider>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="x轴" prop="setView.x">
              <el-input v-model.number="formData.setView.x" placeholder="请输入x轴"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="y轴" prop="setView.y">
              <el-input v-model.number="formData.setView.y" placeholder="请输入y轴"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="z轴" prop="setView.z">
              <el-input v-model.number="formData.setView.z" placeholder="请输入z轴"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="视角转换时间" prop="setView.duration">
              <el-input v-model="formData.setView.duration" placeholder="请输入视角转换时间"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="偏航角" prop="setView.heading">
              <el-input v-model.number="formData.setView.heading" placeholder="请输入偏航角"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="俯仰角" prop="setView.pitch">
              <el-input v-model.number="formData.setView.pitch" placeholder="请输入俯仰角"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="翻滚角" prop="setView.roll">
              <el-input v-model.number="formData.setView.roll" placeholder="请输入翻滚角"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">地形配置</el-divider>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="是否显示地形" prop="isTerrainProvider">
              <el-switch v-model="formData.isTerrainProvider" active-text="是" inactive-text="否"></el-switch>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="自定义地形" prop="cesiumTerrainProviderUrl">
              <el-input v-model="formData.cesiumTerrainProviderUrl" placeholder="请输入自定义地形地址(没有则无需输入)"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="地形夸张" prop="terrainExaggeration">
              <el-slider v-model="formData.terrainExaggeration" :max="10" :min="0"></el-slider>
            </el-form-item>
          </el-col>

        </el-row>

        <el-divider content-position="left">底图配置</el-divider>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="底图" prop="ditu">
              <el-select v-model="formData.ditu">
                <el-option v-for="opt in dituList" :key="opt.value" :label="opt.label" :value="opt.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">其他配置</el-divider>
        <el-form-item label="其他配置" prop="configJson">
          <JsonEditorVue v-model="formData.configJson" style="width: 100%;" />
        </el-form-item>
      </el-form>
    </el-card>
    <preview-map v-if="showMap" :options="formData" @back="showMap = false"></preview-map>
  </div>
</template>

<script setup name="configSetting">
import JsonEditorVue from 'json-editor-vue';
import PreviewMap from './components/previewMap.vue';

const isEdite = ref(false);
const showMap = ref(false);

const dituList = [
  {
    label: '百度地图',
    value: 'baidu'
  },
  {
    label: '高德地图',
    value: 'amap'
  },
  {
    label: '腾讯地图',
    value: 'tencent'
  },
  {
    label: '天地图',
    value: 'tianditu'
  }
]

const formData = ref({
  setView: {
    duration: '默认',
    x: 102.5,
    y: 25.0,
    z: 100000,
    heading: 90, // 偏航角
    pitch: -90, // 俯仰角
    roll: 0 // 翻滚角
  },

  terrainExaggeration: 1, // 地形夸张
  isTerrainProvider: true, // 是否显示地形
  cesiumTerrainProviderUrl: '', // 自定义地形
  ditu: '', // 底图选择
  configJson: {}
})

// 点击保存
const saveClick = () => {
  // todo 调保存接口
  isEdite.value = false;
}

onMounted(() => {
  // todo 调初始化接口，取到初始配置的数据
})
</script>

<style lang="scss" scoped>
.app-container {
  position: relative;
  height: calc(100vh - 84px);
  overflow: hidden;
}
.configSetting {
  height: 100%;
  overflow: auto;
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .card-footer {
    display: flex;
    justify-content: flex-end;
  }
}
</style>