唯杰地图-VJMAP

# 地图数据源

# 概述

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

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

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

# vector 类型说明

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

详细说明如下：

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

# raster 类型说明

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

详细说明如下：

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

# geojson 类型说明

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

详细说明如下：

示例一：

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

示例二：

var jsonData = {"type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [116.46, 39.92]
        },
        "properties": {
            "title": "大学"
        }
    }]
};
map.addSource("jsonSource", {
    "type": "geojson",
    "data": jsonData
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

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

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

map.getSource('jsonSource').setData(json) /*参数json可以是url或具体的geojson数据*/
1
2
3
4
5
6
7
8

# image 类型说明

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

详细说明如下：

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]]
    /*图像在地图上的坐标点边界，边界值为顺时针方式，依次为：左上、右上、右下、左下。*/
});
1
2
3
4
5
6

# video 类型说明

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

详细说明如下：

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]]
    /*图像在地图上的坐标点边界，边界值为顺时针方式，依次为：左上、右上、右下、左下。*/
});
1
2
3
4
5
6

← 地图图层 →