---
title: 图形处理
source: https://vjmap.com/guide/processMap.html
---

# 图形处理

处理图形一般通过两种方式来实现

- 方法一： 组合成新地图 composeNewMap

```js
 /**
 * 组合成新地图
 * @param param 组合参数
 * @return {Promise<any>}
 */
composeNewMap(param: IComposeNewMap | IComposeNewMap[]): Promise<any>;
/**
 * 组合新地图参数
 */
export  interface IComposeNewMap {
    /** 地图ID. */
    mapid: string;
    /** 地图版本(为空时采用当前打开的地图版本). */
    version?: string;
    /** 地图裁剪范围，范围如[x1,y1,x2,y2]， 为空的话，表示不裁剪 */
    clipbounds?: [number, number, number, number];
    /** 选择是包含还是相交（默认false表示包含，true相交） */
    selByCrossing?: boolean;
    /** 四参数(x偏移,y偏移,缩放，旋转弧度)，可选，对坐标最后进行修正*/
    fourParameter?: [number, number, number, number];
    /** 是否用上面的四参数进行反算，默认false*/
    isInverseFourParamter?: boolean;
    /** 要显示的图层名称，为空的时候，表示全部图层 */
    layers?: string[];
    /** 生新成图的图层名称前缀，如果设置为null将不会有默认的图层前缀。如果没有前缀，不同的图有图层重名时，如果设置了随层属性有可能会导致绘制的不一样 */
    layerPrefix?: string;
    /** 生新成图的图层名称后缀 */
    layerSuffix?: string;
    /** 保存的文件名称，为空的时候，自根据参数自动生成 */
    savefilename?: string;
    /** 生成后清理图形数据以减少dwg文件大小 */
    purge?: boolean;
    /** 来源于其他图的实体时，如果块定义重复，则自动重命名 ，默认true */
    isRenameBlockNameIfExist?: boolean;
    /** 是不是创建完缩放至全图 默认false (如果有多个图合并，只需设置第一个图的) */
    isZoomExtents?: boolean;
    /** 导出的CAD版本号。如果为*表示为当前CAD图的版本 */
    cadVersion?: string | "*" | "cad2000" | "cad2004" | "cad2007" | "cad2010" | "cad2013" | "cad2018";
}
```

如提取一个CAD图几个图层的数据保存为新图
```js
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)

// js代码
let res = await svc.composeNewMap({
    mapid: "sys_zp",
    vesion: "v1",
    layers: ["红线", "道路"]
})
```


- 方法二： 基于模板图创建新图

```js
export  class DbDocument {
    /** 来源于哪个图，会在此图的上面进行修改或新增删除，格式如 形式为 mapid/version,如 exam/v1 . */
    from?: string;
    /** 来源于哪个图时有效，表示从此图中选择指定的图层，不在指定的图层将不会显示 */
    pickLayers?: string[];
    /** 来源于哪个图时有效，表示从此图中选择指定的实体ID，不在指定的实体ID将不会显示 */
    pickEntitys?: string[];
    /** 来源于哪个图时有效，使用表达式，表示从此图中选择指定的实体ID，不在指定的实体ID将不会显示 结果与pickEntitys的取并 */
    pickExpr?: string;
    isClearFromDb?: boolean;
    /** 文档环境，用于设置是否显示线宽等设置, 设置线宽为 LWDISPLAY ,true显示或 false不显示线宽*/
    environment?: Record<string, any>;
    /** 实体集. */
    entitys?: IDbEntity[];
    /** 图层集. */
    layers?: IDbLayer[];
    /** 文字样式. */
    textStyles?: IDbTextStyle[];
    /** 标注样式. */
    dimStyles?: IDbDimStyle[];
    /** 线型. */
    linetypes?: IDbLinetype[];
    /** 块定义. */
    blocks?: IDbBlock[];
    /** 来源于其他图的实体时，如果块定义重复，则自动重命名 ，默认true */
    isRenameBlockNameIfExist?: boolean;
    /** 是不是创建完缩放至全图 默认false */
    isZoomExtents?: boolean;

    //... 其他方法省略
}
```

如提取一个CAD图几个图层的数据保存为新图
```js
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
let doc = new vjmap.DbDocument();
doc.from = "sys_zp/v1";
doc.pickLayers = ["红线", "道路"]
// js代码
let res = await svc.updateMap({
    mapid: "newsyszplayers",
    filedoc: JSON.stringify(doc),
    mapopenway: vjmap.MapOpenWay.Memory,
    style: {
        backcolor: 0 // 如果div背景色是浅色，则设置为oxFFFFFF
    }
})
```

## 裁剪图形

```js
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)

// js代码
let res = await svc.composeNewMap({
    mapid: "sys_zp",
    vesion: "v1",
    /** 地图裁剪范围，范围如[x1,y1,x2,y2]， 为空的话，表示不裁剪 */
    clipbounds?: [x1,y1,x2,y2];
})
```

![](https://vjmap.com/blogimages/mapclip.webp)


## 坐标转换


```js
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)

// js代码
let res = await svc.composeNewMap({
    mapid: "sys_zp",
    vesion: "v1",
    /** 四参数(x偏移,y偏移,缩放，旋转弧度)，可选，对坐标最后进行修正*/
    fourParameter?: [number, number, number, number];
})
```

![](https://vjmap.com/blogimages/mapfourparam.webp)

## 合并图形
```js
// --图形处理合成新的图形--通过将图形列表处理后，再合成一个新的图形
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 组合成新的图,将sys_world图进行一定的处理后，再与sys_hello进行合成，生成新的地图文件名
let rsp = await svc.composeNewMap([
    {
        mapid: "sys_world", // 地图id
        // 下面的参数可以根据实际需要来设置，可以对图层，范围，坐标转换来进行处理
        //layers: ["经纬度标注","COUNTRY"], // 要显示的图层名称列表
        //clipbounds: [10201.981489534268, 9040.030491346213, 26501.267379,  4445.465999], // 要显示的范围
        //fourParameter: [0,0,2,0] // 对地图进行四参数转换计算
    },
    {
        mapid: "sys_hello"
    }
])
if (!rsp.status) {
    message.error(rsp.error)
}
// 返回结果为
/*
{
    fileid: "pefbe7459b06",
    mapdependencies: "sys_world||sys_hello",
    mapfrom: "sys_world&&v1&&&&0&&&&&&&&&&&&10||sys_hello&&v1&&&&0&&&&&&&&&&&&2",
    status: true
}
 */
```

<mapFrameEx>
<pre>
// --图形处理合成新的图形--通过将图形列表处理后，再合成一个新的图形
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 组合成新的图,将sys_world图进行一定的处理后，再与sys_hello进行合成，生成新的地图文件名
let rsp = await svc.composeNewMap([
    {
        mapid: "sys_world", // 地图id
        // 下面的参数可以根据实际需要来设置，可以对图层，范围，坐标转换来进行处理
        //layers: ["经纬度标注","COUNTRY"], // 要显示的图层名称列表
        //clipbounds: [10201.981489534268, 9040.030491346213, 26501.267379,  4445.465999], // 要显示的范围
        //fourParameter: [0,0,2,0] // 对地图进行四参数转换计算
    },
    {
        mapid: "sys_hello"
    }
])
if (!rsp.status) {
    message.error(rsp.error)
}
// 返回结果为
/*
{
    fileid: "pefbe7459b06",
    mapdependencies: "sys_world||sys_hello",
    mapfrom: "sys_world&&v1&&&&0&&&&&&&&&&&&10||sys_hello&&v1&&&&0&&&&&&&&&&&&2",
    status: true
}
*/
let res = await svc.openMap({
    mapid: "composeHelloWord", // 取个新的地图名称
    fileid: rsp.fileid,
    //mapdependencies: rsp.mapdependencies, // 把返回值做为参数传递打开, 如果需要创建协同图形，请把此项打开
    //mapfrom: rsp.mapfrom, // 把返回值做为参数传递打开, 如果需要创建协同图形，请把此项打开
    mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
    style:  vjmap.openMapDarkStyle() // div为深色背景颜色时，这里也传深色背景样式
})
if (res.error) {
    message.error(res.error)
}
let mapExtent = vjmap.GeoBounds.fromString(res.bounds);
let prj = new vjmap.GeoProjection(mapExtent);
let center = mapExtent.center();
let map = new vjmap.Map({
    container: 'map', // container ID
    style: svc.rasterStyle(),
    center: prj.toLngLat(center),
    zoom: 2,
    renderWorldCopies: false
});
map.attach(svc, prj);
map.fitMapBounds();
await map.onLoad();
</pre>
</mapFrameEx>
<br/>
<br/>


[图形排列组合成新图形示例](https://vjmap.com/demo/#/demo/map/service/08zArrangeCompose)

## 提取图层

使用`composeNewMap`的`layers`也可以提取图层，这里使用`DbDocument`做为示例
<mapFrameEx>
<pre>
// --新建地图[直接生成DWG图打开]--在后台新建CAD图，然后在前端打开
// js代码
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
let doc = new vjmap.DbDocument();
doc.from = "sys_zp/v1";
doc.pickLayers = ["红线", "道路"]
// js代码
let res = await svc.updateMap({
    mapid: vjmap.getTempMapId(),// 临时图形不浏览情况下过期自动删除时间，单位分钟。默认30
    filedoc: JSON.stringify(doc),
    mapopenway: vjmap.MapOpenWay.Memory,
    style: {
        backcolor: 0 // 如果div背景色是浅色，则设置为oxFFFFFF
    }
})
if (res.error) {
    message.error(res.error)
}
let mapExtent = vjmap.GeoBounds.fromString(res.bounds);
let prj = new vjmap.GeoProjection(mapExtent);
var map = new vjmap.Map({
    container: 'map', // container ID
    style: svc.rasterStyle(),
    center: prj.toLngLat(mapExtent.center()),
    zoom: 2,
    renderWorldCopies: false
});
map.attach(svc, prj);
map.fitMapBounds();
map.addControl(new vjmap.NavigationControl());
map.addControl(new vjmap.MousePositionControl({showZoom: true}));
</pre>
</mapFrameEx>
<br/>
<br/>