# 打印
mapgis-print
# 示例
<template>
<mapgis-web-map v-bind="{ ...mapOptions }" style="height:95vh">
<mapgis-rastertile-layer
:source="tilesize"
layerId="天地图底图"
url="http://t0.tianditu.com/DataServer?T=vec_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
/>
<mapgis-rastertile-layer
:source="tilesize"
layerId="天地图注记"
url="http://t0.tianditu.com/DataServer?T=cia_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752"
/>
<mapgis-ui-collapse-card
title="打印"
ref="collapseprint"
:outStyle="printStyle"
position="top-right"
>
<mapgis-ui-iconfont type="mapgis-huizhi1" slot="icon-hiden" />
<div slot="title">
<span class="mapgis-custom-scale-card-title"> 绘制 </span>
</div>
<div @click="hidePrintCard" slot="extra">
<mapgis-ui-iconfont type="mapgis-huizhi1" />
</div>
<mapgis-print
:delay="true"
:delayTime="1000"
@beforePrint="handleBeforePrint"
@afterPrint="handleAfterPrint"
/>
</mapgis-ui-collapse-card>
<mapgis-ui-card class="mapgis-test-custom-scale">
<mapgis-custom-scale :style="scaleStyle" />
</mapgis-ui-card>
<mapgis-ui-card class="mapgis-test-custom-legend">
<mapgis-mvt-legend
ref="mvtlegend"
:column="legendColumn"
:outStyle="legendStyle"
/>
</mapgis-ui-card>
</mapgis-web-map>
</template>
<script>
export default {
components: {
"mapgis-web-map": window.Mapgis2d.MapgisWebMap,
"mapgis-custom-scale": window.Mapgis2d.MapgisCustomScale,
},
data() {
return {
mapOptions: {
crs: "EPSG:4326", //经纬度一定要设置crs参数
maxBounds: [
[-180, -90],
[180, 90],
],
zoom: 7.5,
center: [116.39, 40.2],
},
printStyle: {
position: "absolute",
zIndex: 700,
right: "20px",
top: "20px",
height: "260px",
width: "300px",
},
scaleStyle: {
position: "absolute",
left: "10px",
bottom: "10px",
height: "50px",
width: "240px",
},
legendColumn: 1,
legendStyle: {
position: "absolute",
zIndex: 900,
right: "5px",
bottom: "10px",
maxHeight: "300px",
width: "260px",
},
tilesize: {
tileSize: 256,
},
};
},
methods: {
hidePrintCard() {
if (this.$refs.collapseprint) {
this.$refs.collapseprint.hide();
}
},
handleBeforePrint() {},
handleAfterPrint() {},
},
};
</script>
<style>
.mapgis-2d-map {
height: 350px;
}
</style>
# 属性
# delay
- 类型:
Boolean
- 默认值:
false
- 非侦听属性
- 描述: 是否延迟打印
# delayTime
- 类型:
Number
- 默认值:
1000
- 非侦听属性
- 描述: 延迟打印时间
# 事件
# before-print
- 描述: 打印前的回调事件
# after-print
- 描述: 打印后的回调事件