---
title: 导出
source: https://vjmap.com/guide/export.html
---

# 导出

## 导出pdf

[导出pdf在线体验地址](https://vjmap.com/demo/#/demo/map/service/31mapexportpdf)
```js
let mapid;  // 不填的话，用上面打开默认的
let version; // 不填的话，用上面打开默认的
let param; // 不填的话，用默认的
/*
param = {
    lineWeight: false, // 导出时是否包含线宽
    bIncludeOffLayers: false, // 是否包含关闭的图层
    bSearchableSHX: false, // 可搜索型文字
    bSearchableTTF: false, // 可搜索ttf文字
    pageWidth: 210, // 宽，单位mm
    pageHeight: 297, // 高，单位mm
    pageLeftMargin: 0, // 左页边距 （pageWidth, pageHeight有值时有效）
    pageRightMargin: 0, // 右页边距 （pageWidth, pageHeight有值时有效）
    pageTopMargin: 0, // 上页边距 （pageWidth, pageHeight有值时有效）
    pageBottomMargin: 0, // 下页边距 （pageWidth, pageHeight有值时有效）
    geomDPI: 600, // 矢量dpi
    colorImagesDPI: 400, //图像dpi
    isBlackWhiteMode: false, // 是否导出为黑白模式
    isGrayMode: false, // 是否导出为灰色模式
}*/
// 导出pdf
const exportPdf = async () => {
    message.info("正在导出pdf,请稍等...")
    const result = await svc.execCommand("exportPdf", param, mapid, version, true);
    if (result.error) {
        message.error(result.error)
    } else {
        let pdfUrl = svc.baseUrl() + result.path + "?token=" + svc.accessToken;
        window.open(pdfUrl, )
    }
}
// 也可以对图纸进行处理后，再导出如旋转90度后再导出
/*
// 导出pdf
const exportPdf = async () => {
    message.info("正在导出pdf,请稍等...")
    let composeRes = await svc.composeNewMap({
        mapid: 'cbf527ed3ad1',
        version: 'v1',
        fourParameter: [0, 0, 1, -Math.PI / 2]
    })
    let res = await svc.updateMap({
        // 获取一个临时的图id(临时图形只会用临时查看，过期会自动删除)
        mapid: vjmap.getTempMapId(1), // 临时图形不浏览情况下过期自动删除时间，单位分钟。默认30
        fileid: composeRes.fileid, // 生成的fileid
        mapopenway: vjmap.MapOpenWay.Memory,
        style: {
            backcolor: 0 // 如果div背景色是浅色，则设置为oxFFFFFF
        }
    })
    const result = await svc.execCommand("exportPdf", param, res.mapid, res.version, true);
    if (result.error) {
        message.error(result.error)
    } else {
        let pdfUrl = svc.baseUrl() + result.path + "?token=" + svc.accessToken;
        window.open(pdfUrl, )
    }
}
```

<mapFrameEx>
<pre>
// 地图服务对象
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 打开地图
let res = await svc.openMap({
    mapid: env.exampleMapId, // 地图ID
    mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
    style: vjmap.openMapDarkStyle() // div为深色背景颜色时，这里也传深色背景样式
})
if (res.error) {
    // 如果打开出错
    message.error(res.error)
}
// 根据地图范围建立几何投影坐标系
let prj = new vjmap.GeoProjection(res.bounds);
// 地图对象
let map = new vjmap.Map({
    container: 'map', // DIV容器ID
    style: svc.rasterStyle(), // 样式，这里是栅格样式
    center: prj.toLngLat(prj.getMapExtent().center()), // 设置地图中心点
    zoom: 1, // 设置地图缩放级别
    renderWorldCopies: false
});
// 关联服务对象和投影对象
map.attach(svc, prj);
await map.onLoad();
const exportPdf = async () => {
    map.logInfo("正在导出pdf,请稍等...")
    let param;
    const result = await svc.execCommand("exportPdf", param, env.exampleMapId, "v1", true);
    if (result.error) {
        map.logInfo(result.error, "error")
    } else {
        let pdfUrl = svc.baseUrl() + result.path + "?token=" + svc.accessToken;
        window.open(pdfUrl, )
    }
}
// 增加一个按钮
let options = {};
options.buttons = [
    {
        id: "pdf",
        title: "导出成PDF",
        text: "导出Pdf",
        onActivate: (ctx, e) => {
            exportPdf()
        }
    }
];
let btnGroupCtrl = new vjmap.ButtonGroupControl(options);
map.addControl(btnGroupCtrl, 'top-right');
</pre>
</mapFrameEx>
<br/>
<br/>


## 导出图片

导出图片可用地图服务的`WMS`瓦片服务导出图片

```ts

/**
 * wms服务url地址接口
 */
export  interface IWmsTileUrl {
    /** 地图ID(为空时采用当前打开的mapid)， 为数组时表时同时请求多个. */
    mapid?: string | string[];
    /** 地图版本(为空时采用当前打开的地图版本). */
    version?: string | string[];
    /** 图层名称（为空时采用当前打开的地图图层名称). */
    layers?: string | string[];
    /** 范围，缺省{bbox-epsg-3857}. (如果要获取地图cad一个范围的wms数据无需任何坐标转换，将此范围填cad范围,srs,crs,mapbounds填为空).*/
    bbox?: string;
    /** 当前坐标系,缺省(EPSG:3857). */
    srs?: string;
    /** cad图的坐标系，为空的时候由元数据坐标系决定. 也可直接输入proj4字符串*/
    crs?: string | string[];
    /** 地理真实范围，如有值时,srs将不起作用 */
    mapbounds?: string;
    /** 宽. */
    width?: number;
    /** 高. */
    height?: number;
    /** 是否透明. */
    transparent?: boolean;
    /** 不透明时的背景颜色，默认为白色。格式必须为rgb(r,g,b)或rgba(r,g,b,a),a不透明应该是255. */
    backgroundColor?: string;
    /** 四参数(x偏移,y偏移,缩放，旋转弧度)，可选，对坐标最后进行修正*/
    fourParameter?: string | string[];
    /** 是否用上面的四参数进行反算，默认false*/
    isInverseFourParamter?: boolean | boolean[];
    /** 是否是矢量瓦片. */
    mvt?: boolean;
    /** 是否考虑旋转，在不同坐标系中转换是需要考虑。默认自动考虑是否需要旋转. */
    useImageRotate?: boolean;
    /** 旋转时图像处理算法. 1或2,默认自动选择（旋转时有用）*/
    imageProcessAlg?: number;
    /** 当前互联网底图地图类型 WGS84(84坐标，如天地图，osm), GCJ02(火星坐标，如高德，腾讯地图)， BD09LL(百度经纬度坐标，如百度地图)， BD09MC(百度墨卡托米制坐标，如百度地图)*/
    webMapType?: "WGS84" | "GCJ02" | "BD09LL" | "BD09MC";
}
```

示例代码
```js
const exportMapPngByBoundsUrl = points => {
    let bounds = vjmap.GeoBounds.fromDataExtent(points);
    bounds = map.fromLngLat(bounds);
    // bounds = bounds.square(); // 保证为正方形
    bounds = bounds.scale(1.01); // 稍大点，要不边框线有可能刚好看不见了
    let pictureWidth = 1024 ;// 要导出的图片宽高
    let wmsUrl = svc.wmsTileUrl({
        width: pictureWidth,
        height: Math.round(pictureWidth * bounds.height() / bounds.width()),
        srs: "",
        bbox: bounds.toString(),
        transparent: false,
        backgroundColor: 'rgb(0,0,0)'
    });
    window.open(wmsUrl);
};
```

<mapFrameEx>
<pre>
// 地图服务对象
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 打开地图
let res = await svc.openMap({
    mapid: env.exampleMapId, // 地图ID
    mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
    style: vjmap.openMapDarkStyle() // div为深色背景颜色时，这里也传深色背景样式
})
if (res.error) {
    // 如果打开出错
    message.error(res.error)
}
// 根据地图范围建立几何投影坐标系
let prj = new vjmap.GeoProjection(res.bounds);
// 地图对象
let map = new vjmap.Map({
    container: 'map', // DIV容器ID
    style: svc.rasterStyle(), // 样式，这里是栅格样式
    center: prj.toLngLat(prj.getMapExtent().center()), // 设置地图中心点
    zoom: 1, // 设置地图缩放级别
    renderWorldCopies: false
});
// 关联服务对象和投影对象
map.attach(svc, prj);
await map.onLoad();
const exportPng = async () => {
    let bounds = await svc.cmdGetDrawBounds(); // CAD图的可视范围（有图的部分的范围)
    bounds = bounds.scale(1.01); // 稍大点，要不边框线有可能刚好看不见了
    let pictureWidth = 1024 ;// 要导出的图片宽高
    let wmsUrl = svc.wmsTileUrl({
        width: pictureWidth,
        height: Math.round(pictureWidth * bounds.height() / bounds.width()),
        srs: "",
        bbox: bounds.toString(),
        transparent: true,
        backgroundColor: 'rgb(0,0,0)'
    });
    window.open(wmsUrl);
}
// 增加一个按钮
let options = {};
options.buttons = [
    {
        id: "pdf",
        title: "导出图片",
        text: "导出图片",
        onActivate: (ctx, e) => {
            exportPng()
        }
    }
];
let btnGroupCtrl = new vjmap.ButtonGroupControl(options);
map.addControl(btnGroupCtrl, 'top-right');
</pre>
</mapFrameEx>
<br/>
<br/>


## 导出dxf

```js
const result = await svc.execCommand("exportDxf", {}, mapid, version, true);
```

:::tip 提示
只是由于数据安全的问题，试用版本不能下载导出的dxf文件。正式版本可以后台设置下载， 根据返回的fileid (位于mapfiles目录下面)和配置的下载地址去下载
:::
