---
title: Graphic Processing
source: https://vjmap.com/en/guide/processMap.html
---

# Graphic Processing

Graphic processing is generally implemented in two ways:

- **Method 1:** Compose into a new map with `composeNewMap`

```js
 /**
 * Compose into a new map
 * @param param Compose parameters
 * @return {Promise<any>}
 */
composeNewMap(param: IComposeNewMap | IComposeNewMap[]): Promise<any>;
/**
 * Compose new map parameters
 */
export  interface IComposeNewMap {
    /** Map ID. */
    mapid: string;
    /** Map version (uses current open map version when empty). */
    version?: string;
    /** Map clip bounds, format [x1,y1,x2,y2]; empty means no clipping */
    clipbounds?: [number, number, number, number];
    /** Select contain or intersect (default false for contain, true for intersect) */
    selByCrossing?: boolean;
    /** Four parameters (x offset, y offset, scale, rotation in radians), optional, for final coordinate correction */
    fourParameter?: [number, number, number, number];
    /** Whether to use inverse four-parameter calculation, default false */
    isInverseFourParamter?: boolean;
    /** Layer names to display; empty means all layers */
    layers?: string[];
    /** Layer name prefix for the new map; if set to null, no default prefix. Without prefix, layer name conflicts may cause different rendering when layer attributes are set */
    layerPrefix?: string;
    /** Layer name suffix for the new map */
    layerSuffix?: string;
    /** Output file name; empty means auto-generated from parameters */
    savefilename?: string;
    /** Purge graphic data after generation to reduce DWG file size */
    purge?: boolean;
    /** When entities come from other maps, auto-rename block definitions if duplicated, default true */
    isRenameBlockNameIfExist?: boolean;
    /** Whether to zoom to extent after creation, default false (for multi-map merge, only set for the first map) */
    isZoomExtents?: boolean;
    /** CAD version for export. Use * for current CAD map version */
    cadVersion?: string | "*" | "cad2000" | "cad2004" | "cad2007" | "cad2010" | "cad2013" | "cad2018";
}
```

Example: Extract data from several layers of a CAD map and save as a new map
```js
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)

// js code
let res = await svc.composeNewMap({
    mapid: "sys_zp",
    vesion: "v1",
    layers: ["red line", "road"]
})
```


- **Method 2:** Create a new map based on a template map

```js
export  class DbDocument {
    /** Source map for modification or add/delete; format mapid/version, e.g. exam/v1 */
    from?: string;
    /** When from is set: select specified layers from source map; entities not in specified layers will not display */
    pickLayers?: string[];
    /** When from is set: select specified entity IDs from source map; entities not in specified IDs will not display */
    pickEntitys?: string[];
    /** When from is set: use expression to select entity IDs; union with pickEntitys results */
    pickExpr?: string;
    isClearFromDb?: boolean;
    /** Document environment for settings like line width display; LWDISPLAY: true to show, false to hide line width */
    environment?: Record<string, any>;
    /** Entity set. */
    entitys?: IDbEntity[];
    /** Layer set. */
    layers?: IDbLayer[];
    /** Text styles. */
    textStyles?: IDbTextStyle[];
    /** Dimension styles. */
    dimStyles?: IDbDimStyle[];
    /** Linetypes. */
    linetypes?: IDbLinetype[];
    /** Block definitions. */
    blocks?: IDbBlock[];
    /** When entities come from other maps, auto-rename block definitions if duplicated, default true */
    isRenameBlockNameIfExist?: boolean;
    /** Whether to zoom to extent after creation, default false */
    isZoomExtents?: boolean;

    //... other methods omitted
}
```

Example: Extract data from several layers of a CAD map and save as a new map
```js
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
let doc = new vjmap.DbDocument();
doc.from = "sys_zp/v1";
doc.pickLayers = ["red line", "road"]
// js code
let res = await svc.updateMap({
    mapid: vjmap.getTempMapId(),// Temporary map auto-delete time in minutes when not browsed. Default 30
    filedoc: JSON.stringify(doc),
    mapopenway: vjmap.MapOpenWay.Memory,
    style: {
        backcolor: 0 // If div background is light, set to oxFFFFFF
    }
})
```


## Clipping Graphics

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

// js code
let res = await svc.composeNewMap({
    mapid: "sys_zp",
    vesion: "v1",
    /** Map clip bounds, format [x1,y1,x2,y2]; empty means no clipping */
    clipbounds?: [x1,y1,x2,y2];
})
```

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


## Coordinate Transformation


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

// js code
let res = await svc.composeNewMap({
    mapid: "sys_zp",
    vesion: "v1",
    /** Four parameters (x offset, y offset, scale, rotation in radians), optional, for final coordinate correction */
    fourParameter?: [number, number, number, number];
})
```

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

## Merging Graphics
```js
// --Graphic processing to compose new graphics--Process graphic list, then compose into a new graphic
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// Compose into new map: process sys_world, then merge with sys_hello to generate new map file
let rsp = await svc.composeNewMap([
    {
        mapid: "sys_world", // Map id
        // Parameters below can be set as needed for layer, bounds, coordinate transformation
        //layers: ["latlon labels","COUNTRY"], // Layer name list to display
        //clipbounds: [10201.981489534268, 9040.030491346213, 26501.267379,  4445.465999], // Bounds to display
        //fourParameter: [0,0,2,0] // Four-parameter transformation for the map
    },
    {
        mapid: "sys_hello"
    }
])
if (!rsp.status) {
    message.error(rsp.error)
}
// Return result:
/*
{
    fileid: "pefbe7459b06",
    mapdependencies: "sys_world||sys_hello",
    mapfrom: "sys_world&&v1&&&&0&&&&&&&&&&&&10||sys_hello&&v1&&&&0&&&&&&&&&&&&2",
    status: true
}
 */
```

<mapFrameEx>
<pre>
// --Graphic processing to compose new graphics--Process graphic list, then compose into a new graphic
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// Compose into new map: process sys_world, then merge with sys_hello to generate new map file
let rsp = await svc.composeNewMap([
    {
        mapid: "sys_world", // Map id
        // Parameters below can be set as needed for layer, bounds, coordinate transformation
        //layers: ["latlon labels","COUNTRY"], // Layer name list to display
        //clipbounds: [10201.981489534268, 9040.030491346213, 26501.267379,  4445.465999], // Bounds to display
        //fourParameter: [0,0,2,0] // Four-parameter transformation for the map
    },
    {
        mapid: "sys_hello"
    }
])
if (!rsp.status) {
    message.error(rsp.error)
}
// Return result:
/*
{
    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", // New map name
    fileid: rsp.fileid,
    //mapdependencies: rsp.mapdependencies, // Pass return value as parameter when opening; enable for collaborative graphics
    //mapfrom: rsp.mapfrom, // Pass return value as parameter when opening; enable for collaborative graphics
    mapopenway: vjmap.MapOpenWay.GeomRender, // Open with geometry render mode
    style:  vjmap.openMapDarkStyle() // Use dark style when div has dark background
})
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/>


[Graphic arrangement and composition example](https://vjmap.com/demo/#/demo/map/service/08zArrangeCompose)

## Extracting Layers

You can also use the `layers` parameter of `composeNewMap` to extract layers. Here `DbDocument` is used as an example:
<mapFrameEx>
<pre>
// --Create new map [directly generate and open DWG]--Create CAD map on server, then open in frontend
// js code
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
let doc = new vjmap.DbDocument();
doc.from = "sys_zp/v1";
doc.pickLayers = ["red line", "road"]
// js code
let res = await svc.updateMap({
    mapid: vjmap.getTempMapId(),// Temporary map auto-delete time in minutes when not browsed. Default 30
    filedoc: JSON.stringify(doc),
    mapopenway: vjmap.MapOpenWay.Memory,
    style: {
        backcolor: 0 // If div background is light, set to 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/>