SuperMap iClient for Leaflet+vue实现Web地图打印功能

momo323636

于 2024-05-09 09:20:26 发布

阅读量617

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js 前端 elementui

本文链接：https://blog.csdn.net/m0_45826980/article/details/137831183

超图官网只有Openlayers示例里面有Web打印功能的代码，Leaflet其实也有Web打印的接口，可以在API文档中查看，仿照Openlayers示例写了Leaflet Web打印功能，示例代码如下：

<template>
  <div class="print">
    <div class="printform">
      <el-form ref="form" :model="form" label-width="85px" size="small">
        <el-collapse>
          <el-collapse-item title="基础信息" name="1">
            <div class="container">
              <el-form-item label="布局模板" class="form-item">
                <el-select v-model="form.templateName" placeholder="模板">
                  <el-option
                    v-for="templateName in templateNames"
                    :label="templateName"
                    :value="templateName"
                    :key="templateName"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="标题" class="form-item">
                <el-input v-model="form.tittle" size="small"></el-input>
              </el-form-item>
              <el-form-item label="副标题" class="form-item">
                <el-input v-model="form.subTittle" size="small"></el-input>
              </el-form-item>
              <el-form-item label="版权信息" class="form-item">
                <el-input v-model="form.copyright" size="small"></el-input>
              </el-form-item>
              <el-form-item label="作者" class="form-item">
                <el-input v-model="form.author" size="small"></el-input>
              </el-form-item>
            </div>
          </el-collapse-item>
          <el-collapse-item title="附图" name="2">
            <div class="container">
              <el-form-item label="比例尺" class="form-item">
                <el-input v-model.number="form.scale"></el-input>
              </el-form-item>
              <el-form-item label="中心点" class="form-item">
                <el-input v-model="form.center"></el-input>
              </el-form-item>
            </div>
          </el-collapse-item>
          <el-collapse-item title="比例尺" name="3">
            <div>
              <el-form-item label="比例尺文本" class="form-item">
                <el-input v-model="form.scaleText"></el-input>
              </el-form-item>
              <el-form-item label="样式" class="form-item">
                <el-input v-model="form.type"></el-input>
              </el-form-item>
              <el-form-item label="段数" class="form-item">
                <el-input

最低0.47元/天解锁文章

200万优质内容无限畅学