zjyzt_gis_master_web_ui/src/components/SecondaryDevelopment/ManualDrawingTool.vue

<template>
  <div class="box">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>集成方式</span>
      </div>
      <div>
        手动落图工具通过iframe引入。
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>集成操作步骤</span>
      </div>
      <div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="手动落图工具" name="collectdata">
            1、首先在页面创建一个iframe标签，src对应的是collectdata工具包的index.html页面。 例：
            <p class="code">{{ code1 }}</p>
            2、其次在页面中创建两个按钮【绘点、绘线】并创建点击事件，点击事件分别修改src参数type，type分别对应【1、2】。 例：
            <p class="code">{{ code2 }}</p>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
    
  </div>
</template>
<script>
// 手动落图集成说明
export default {
  name: "",
  components: {},
  data() {
    return {
      activeName: "collectdata",
      code1: `<iframe
      src="./static/package/collectdata/dist/index.html"
      frameborder="0"
    ></iframe>`,
      code2: `<iframe
      src="./static/package/collectdata/dist/index.html?type=1"
      frameborder="0"
    ></iframe>
    <iframe src="./static/package/collectdata/dist/index.html?type=2" frameborder="0"></iframe>`,
      code3: `<iframe
      src="./static/package/draw/dist/index.html"
      frameborder="0"
    ></iframe>`,
      code4: `let map = new Map({ 
        target: "map",
        logo: false, 
        controls: defaults({ attribution: false, zoom: false, rotate: false, }), 
        view: view, 
        }); 
    globalVariable.map = map; `,
      code5: `import measureTool from"@/utils/ol_plugins/measure"; 
    this.measure = new measureTool(globalVariable.map);`,
      code6: `this.measure.start("line");
    this.measure.start("area");`
    };
  },
  created() {},

  methods: {},

  computed: {},
  watch: {}
};
</script>

<style lang="less" scoped>
.box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  .box-card {
    width: calc(50% - 15px);
    height: calc(100vh - 400px);
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #4c4c4c;
    line-height: 24px;
    div:nth-child(1) {
      font-weight: bold;
    }
    .clearfix span {
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #258df5;
      line-height: 40px;
    }
    .code {
      text-indent: 36px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #808080;
      line-height: 32px;
    }
  }
}
</style>