---
title: 地图数据源
source: https://vjmap.com/guide/mapSources.html
---

# 地图数据源

## 概述

---

数据源定义地图上能够被应用的数据，每个数据源都必须有唯一的 ID 标识，不能重复。

每个数据源都必须要有指定一个数据源类型，数据源类型范围如下：

```
["vector", "raster", "geojson", "image", "video"];
```


### vector 类型说明

---

vector 类型表示矢量数据类型，数据提供的形式为矢量瓦片服务的形式，数据返回格式为 protubuf 格式。

详细说明如下：

```js
map.addSource("Source1", {
  /*Source1代表数据源ID，是唯一的，不能重复*/
  type: "vector" /*数据源类型*/,
  tiles: ["http://yourwebsite/{z}/{x}/{y}.mvt"] /*数据源请求地址URL，可以是多个*/,
});
```


## raster 类型说明

---

raster 类型表示栅格类型，数据提供的形式为瓦片服务的形式，数据返回栅格图片。

详细说明如下：

```js
map.addSource("Source1", {
  /*Source1代表数据源ID，是唯一的，不能重复*/
  type: "raster" /*数据源类型*/,
  tileSize: 256 /*返回栅格图片尺寸，如果不添加该参数，默认为512*/,
  tiles: ["http://yourwebsite/{z}/{x}/{y}.png"] /*数据源请求地址URL，可以是多个*/,
});
```



## geojson 类型说明

---

geojson 类型表示 geojson 类型，数据提供的形式为 geojson 结构的数据，数据一次性加载。

详细说明如下：

示例一：

```js
map.addSource("jsonSource", { /*jsonSource代表数据源ID，是唯一的，不能重复*/
    "type": "geojson",   /*数据源类型*/
    "data": "./data.json"
    /*data参数为geojson格式的数据，支持两种结构：1、url形式，返回的结果为geojson格式；2、具体的geojson格式的数据*/
});
```


示例二：

```js
var jsonData = {"type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [116.46, 39.92]
        },
        "properties": {
            "title": "大学"
        }
    }]
};
map.addSource("jsonSource", {
    "type": "geojson",
    "data": jsonData
});
```



geojson 数据源数据内容更新，调用 setData 方法：

```js
map.addSource("jsonSource", {
    "type": "geojson",
    "data": {"type": "FeatureCollection","features": []}    /*空数据*/
});

//  某些业务场景先定义geojson数据源，数据内容设为空，添加具体的图层，当业务数据组织好后，通过调用setData方法更新数据

map.getSource('jsonSource').setData(json) /*参数json可以是url或具体的geojson数据*/
```



## image 类型说明

---

image 类型表示图像类型，图像格式可以为 gif、png、jpg、jpeg 形式。

详细说明如下：

```js
map.addSource("imageSource", { /*imageSource代表数据源ID，是唯一的，不能重复*/
    "type": "image",   /*数据源类型*/
    "url": "./images/flash.gif",    /*图像url地址*/
    "coordinates": [[106.45, 29.93],[106.47, 29.93],[106.47, 29.91],[106.45, 29.91]]
    /*图像在地图上的坐标点边界，边界值为顺时针方式，依次为：左上、右上、右下、左下。*/
});
```


## video 类型说明

---

video 类型表示视频类型，视频格式可以为 mp4 等形式。

详细说明如下：

```js
map.addSource("videoSource", { /*videoSource代表数据源ID，是唯一的，不能重复*/
    "type": "video",   /*数据源类型*/
    "urls": ["http://yourwebsite/assets/v.mp4"],    /*视频请求地址URL，可以是多个*/
    "coordinates": [[106.45, 29.93],[106.47, 29.93],[106.47, 29.91],[106.45, 29.91]]
    /*图像在地图上的坐标点边界，边界值为顺时针方式，依次为：左上、右上、右下、左下。*/
});
```