上传创建地图

上传创建过程介绍

• 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 时)，会直接打开此地图。

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

打开 唯杰地图云端管理平台 (opens new window) 点击右边的上传图形选择一个图进行上传

通过前端SDK上传图形

 // 创建服务对象
 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);

具体实现可查看示例

上传新图形 (opens new window)

上传新图形(基于ElementUI实现) (opens new window)

通过URL地址直接打开图形

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

// --通过网络路径打开地图--传入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为深色背景颜色时，这里也传深色背景样式
})

具体示例可查看 通过网络路径打开地图 (opens new window)

通过后端REST请求上传图形

具体可查看文档 地图服务Rest接口

上传图形

服务地址	/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 在后台上传图形并创建打开图示例

// 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)
})();