---
title: 上传创建地图
source: https://vjmap.com/guide/uploadMap.html
---

# 上传创建地图

## 上传创建过程介绍

- 1、上传图形  `uploadMap(file: File)`

     (1) 获取文件md5值，根据文件的md5去服务端判断文件是否已上传，如果已上传返回文件id(此步非必须)

     (2) 上传文件至服务端后台，返回文件id(`fileid`)和`建议`的一个`mapid`值

- 2、创建图形 `OpenMap`
   
    根据上传图形返回的文件id(`fileid`), 用户可设置创建图形的`mapid`值（也可以使用上传图形返回的建议的mapid，防止mapid重复)去创建图形。

    如果`mapid`值在后台不存在，第一次调用 `OpenMap` 时，会根据文件id(`fileid`)去创建对应的`mapid`地图。

    如果`mapid`在后台已存在（如第二次调用`OpenMap` 时)，会直接打开此地图。
    

## 通过唯杰地图云端管理平台上传图形

打开 [唯杰地图云端管理平台](https://vjmap.com/app/cloud/#/) 点击右边的上传图形选择一个图进行上传

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

## 通过前端SDK上传图形


```js
 // 创建服务对象
 let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
 // 选择文件获取file对象（略)
 // 上传图形
 let res = await svc.uploadMap(file);
 // res.mapid = 'xxx'; // 可修改返回建议`mapid`值
 // 创建图形
 let data = await svc.openMap(res);
```

具体实现可查看示例 

[上传新图形](https://vjmap.com/demo/#/demo/map/service/06uploadmap)

[上传新图形(基于ElementUI实现)](https://vjmap.com/demo/#/demo/map/service/06uploadmapelementui)


## 通过URL地址直接打开图形

通过这种方式无需上传图形，后台会根据URL地址自动下载图形，并创建打开地图。

```js
// --通过网络路径打开地图--传入DWG路径的http路径打开DWG图
// js代码
// 新建地图服务对象，传入服务地址和token
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 打开地图
// 地图ID (如果换成了您自定义的url地址，记得修改此名称id，改成您想要的唯一的名称即可)
const mapid = "gym";
// 地图url地址，注意：url地址后四个字母必须为.dwg。如果实际中的地址四4位不是.dwg可以随便加个参数如 url?param=xxx&filetype=.dwg
const httpDwgUrl = "https://vjmap.com/static/assets/data/gym.dwg" ;

let res = await svc.openMap({
    // (第一次打开此地图ID时，会根据fileid去获取dwg路径打开，之后会读取缓存打开)
    mapid: mapid, // 地图ID
    fileid: httpDwgUrl,
    // httpUsePost: true, // 如果是复杂的url地址，建议用post请求，请把httpUsePost设置为true, 默认false
    mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
    style: vjmap.openMapDarkStyle() // div为深色背景颜色时，这里也传深色背景样式
})
```

具体示例可查看 [通过网络路径打开地图](https://vjmap.com/demo/#/demo/map/service/05openMapFromHttp)

## 通过后端REST请求上传图形

具体可查看文档 [地图服务Rest接口](/guide/restinterface.html#上传图形)


### 上传图形

|      |                     |
|:-----|:--------------------|
| 服务地址 | /api/v1/map/uploads |
| 请求类型 | Post                |

|  请求参数 | 参数说明    | 参数示例    |
|:-----|:--------|:--------|
| fileToUpload | 文件二进制内容 ||

###  创建或打开图形
|      |                     |
|:-----|:--------------------|
| 服务地址 | /api/v1/map/openmap/{mapid} |
| 请求类型 | Get或Post                |

|  请求参数 | 参数说明    | 参数示例    |
|:-----|:--------|:--------|
| version | 文件二进制内容 | |
| layer | 样式 |   |
| geom | 以几何渲染方式打开 |   true |
| fileid | 文件唯一ID. 地图ID第一次打开时，需传递fileid |   cfbe8dc085fb |
| imageLeft | 图像左上角坐标x 第一次打开图像类型时有效 |  undefined |
| imageTop | 图像左上角坐标y 第一次打开图像类型时有效 |   |
| imageResolution | 图像分辨率 第一次打开图像类型时有效 |  |
| uploadname | 上传时的文件名 |   zp.dwg |
| mapfrom | 地图来源参数(协同图形有效) |   |
| mapdependencies | 地图依赖项(协同图形有效) |   |
| subfrom | 地图来源参数(子项的设置)(协同图形有效) |   |
| subdependencies | 地图依赖项(子项的设置)(协同图形有效) |   |
| stylename | 样式图层名称 |   |
| layeron | 要开的图层索引列表，格式如[0,1,3] |   |
| layeroff | 要关的图层索引列表，格式如[2,4] |    |
| clipbounds | 地图裁剪范围，范围如[x1,y1,x2,y2] |   |
| bkcolor | 背景颜色 |  0 |
| lineweight | 线宽，格式如[1，1，1，1，0] |   |
| expression | 样式表达式 |   |
| secretKey | 如第一次创建图时要对图加密可设置此key |   |
| accessKey | 如图设置了密码需访问key  |   |

注：第一次上传图形时，如需设置密码，需设置`secretKey`值。计算方式为对密码明文四次md5加密，取加密后的字符串前16位。

如用 `nodejs` 在后台上传图形并创建打开图示例

```js

// app.js
const fs = require('fs')
const FormData = require('form-data')
const axios = require('axios')
const prompt = require('prompt');

(async ()=>{
    const defaultServiceUrl = 'https://vjmap.com/server/api/v1';
    const defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJJRCI6MiwiVXNlcm5hbWUiOiJhZG1pbjEiLCJOaWNrTmFtZSI6ImFkbWluMSIsIkF1dGhvcml0eUlkIjoiYWRtaW4iLCJCdWZmZXJUaW1lIjo4NjQwMCwiZXhwIjo0ODEzMjY3NjM3LCJpc3MiOiJ2am1hcCIsIm5iZiI6MTY1OTY2NjYzN30.cDXCH2ElTzU2sQU36SNHWoTYTAc4wEkVIXmBAIzWh6M';

    let formData = new FormData();
    let { filepath } =  await prompt.get('filepath'); // 请输入要上传的文件路径
    if (!filepath) return;
    let file = fs.createReadStream(filepath)   
    formData.append('fileToUpload', file);
    
    let len = await new Promise((resolve, reject) => {
      return formData.getLength((err, length) => (err ? reject(err) : resolve(length)));
    });
    let res = await axios({
        url: `${defaultServiceUrl}/map/uploads?token=${defaultAccessToken}`,
        method: 'POST',
        data: formData,
        headers: {
          ...formData.getHeaders(),
          'Content-Length': len,  
        },
    });
    /*
    {
        fileid: 'c036d8ca23eb',
        mapid: 'c036d8ca23eb', // mapid是建议的mapid，如果之前上传打开过，则为之前的mapid
        uploadname: 'base1.dwg'
    }
    */
    console.log(res.data);

    // 上传只是把图上传到了服务器， 您新建地图的时候的，第一次的时候openMap要传上传的fileid，然后给新建的图取个mapid打开就可以了,以后就可以直接通过mapid打开图了
    let { mapid } =  await prompt.get('mapid'); // 请输入要上传的文件路径
    if (!mapid) {
        // 如果没有输入mapid，则用上传的时候返回的默认mapid
        mapid = res.data.mapid;
    }
    let url = `${defaultServiceUrl}/map/openmap/${res.data.mapid}?version=&layer=&geom=true&fileid=${res.data.fileid}&uploadname=${res.data.uploadname}&mapfrom=&mapdependencies=&subfrom=&subdependencies=&stylename=&layeron=&layeroff=&clipbounds=&bkcolor=0&lineweight=&expression=`;
    // 如需设置密码，如密码是123456
    //  md5四次加密 strMd5是字符串md5值计算方法，请自行实现
    // let secretKey =  strMd5(strMd5(strMd5(strMd5("123456")))).substr(0, 16);
    // url += "&secretKey=" + secretKey
    let result = await axios({
        url: url,
        method: 'GET',
        headers: {
          token: defaultAccessToken,  
        },
    });
    console.log(result)
})();


```