---
title: 地图打开方式
source: https://vjmap.com/guide/service.html
---

# 地图打开方式


|打开方式|说明|优点|缺点|应用场景|
|:---|:---|:---|:---|:---|
|内存模式(栅格)|请求新瓦片数据时，会在后台重新打开图形，在内存中渲染瓦片数据|第一次请求数据时速度快|以后请求新数据时速度慢(有可能要重新打开图);占用内存；不支持矢量瓦片|图形的临时查看|
|几何渲染(栅格)|第一次请求数据时，会在后台打开图形，然后把图形数据保存至空间数据库，之后请求都会在空间数据库里查询数据进行几何渲染输出瓦片|之后请求数据快(有新瓦片请求时无需重新打开图)|第一次请求数据时会慢(因为把图形数据保存至空间数据库);会占用一部分空间|经常需查看的图形(前端不需要自定义样式)|
|几何渲染(矢量)|同上|同上;以矢量瓦片形式渲染，可在前端自定义样式|同上;如果图大的话，级别小时矢量瓦片会比较大|经常需查看的图形(图形文件不大)|

::: tip 提示
内存模式： 第一次打开快，但不能使用空间查询，只能用表达式查询。每次打开时（如没有命中缓存数据）都需要在后台加载CAD图，以后打开速度不能秒开。适应于图形的临时查看。（会保留CAD图原来的实体结构)

几何渲染(栅格或矢量)： 第一次打开时因为会把图形数据保存至空间数据库会慢点。可进行空间数据库查询，以后每次打开时都直接从空间数据库中获取数据生成瓦片数据，能实现秒开加载。适合于经常需查看的图形。(会把CAD图块实体进行打散方便空间查询，关联关系通过objectid进行关联判断)
:::


## 打开方式之间转换

## 内存直接打开 -> 几何渲染
如果第一次是以 `内存直接打开`打开的。以后想以`几何渲染` 打开，可以在[唯杰地图云端管理平台](https://vjmap.com/app/cloud/)相应的图纸下，选择`栅格`或`矢量`, 再点击图形打开，这样就会把图形转换成空间数据库（需要花点时间）然后以`栅格`或`矢量`进行打开显示。

![image-20240924104130384](https://vjmap.com/blogimages/202409241041541.png)

## 几何渲染 -> 内存直接打开
如果第一次是以 `几何渲染`打开的。以后想以`内存直接打开` 打开，可以在[唯杰地图云端管理平台](https://vjmap.com/app/cloud/)相应的图纸下，选择`内存`, 再点击图形打开。如果需要删除之前保存的空间数据库的内容，可点击旁边的操作按钮，点击`清空缓存数据`

![image-20240924104450544](https://vjmap.com/blogimages/202409241044567.png)

## 内存模式

### 流程示例图

<div align="left">
  <img :src="$withBase('/assets/images/openmemory.png')" style="transform:scale(0.8)"/>
</div>

### 代码
```js
// 打开地图
let res = await svc.openMap({
    mapopenway: vjmap.MapOpenWay.Memory, // 后台以内存方式打开已上传的图
    ...
})
// 新建地图对象
let map = new vjmap.Map({
    style: svc.rasterStyle(), // 栅格瓦片样式
    ...
});
```

### 效果

<mapFrame src="/examples/index.html?name=openmemory"/>
<br/>
<br/>

## 几何渲染方式

### 流程示例图

<div align="left">
  <img :src="$withBase('/assets/images/opengeom.png')" style="transform:scale(0.8)"/>
</div>

### 几何渲染(栅格)
#### 代码
```js
// 打开地图
let res = await svc.openMap({
    mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
    ...
})
// 新建地图对象
let map = new vjmap.Map({
    style: svc.rasterStyle(), // 栅格瓦片样式
    ...
});
```

#### 效果

<mapFrame src="/examples/index.html?name=opengeomraster"/>


<br/>
<br/>

### 几何渲染(矢量)
#### 代码
```js
// 打开地图
let res = await svc.openMap({
    mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开
    ...
})
// 新建地图对象
let map = new vjmap.Map({
    style: svc.vectorStyle(), // 矢量瓦片样式
    ...
});
```

#### 效果

<mapFrame src="/examples/index.html?name=opengeomvector"/>