数据源规格
数据源定义地图上能够被使用的数据,每个数据源都必须有唯一的 ID 标识,不能重复。
每个数据源都必须要有指定一个数据源类型,数据源类型有:"vector", "raster", "geojson", "image", "video";
vector 类型
vector 类型表示矢量数据类型,数据提供的形式为矢量瓦片服务的形式,数据返回格式为 protubuf 格式的矢量瓦片,通常使用vector类型作为底图。
map.addSource("RoadSource", {
/*RoadSource代表数据源ID,是唯一的,不能重复*/
type: "vector" /*数据源类型*/,
tiles: ["http://127.0.0.1/Road/{z}/{x}/{y}"] /*数据源请求地址URL,可以是多个*/,
});
raster 类型
raster 类型表示栅格类型,数据提供的形式为瓦片服务的形式,数据返回栅格图片。
详细说明如下:
map.addSource("hillshade", {
/*hillshade代表数据源ID,是唯一的,不能重复*/
type: "raster" /*数据源类型*/,
tileSize: 256 /*返回栅格图片尺寸,如果不添加该参数,默认为512*/,
tiles: ["http://127.0.0.1/hillshade/{z}/{x}/{y}"] /*数据源请求地址URL,可以是多个*/,
});
geojson 类型
geojson 类型表示geojson格式的数据源,数据一次性加载。
方式1:指定json文件的url路径。
map.addSource("pointSource", { /*pointSource代表数据源ID,是唯一的,不能重复*/
"type": "geojson", /*数据源类型*/
"data": "../data/points.json"
/*data参数为geojson格式的数据,支持两种结构:1、url形式,返回的结果为geojson格式;2、具体的geojson格式的数据*/
});
方式2:直接指定一个json对象。
var jsonData = {"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [116.46, 39.92]
},
"properties": {
"title": "大学"
}
}]
};
map.addSource("pointSource", {
"type": "geojson",
"data": jsonData
});
当数据发生变化时,需要修改geojson数据源,可以使用setData()方法:
map.addSource("pointSource", {
"type": "geojson",
"data": {"type": "FeatureCollection","features": []} /*空数据*/
});
// 某些业务场景先定义geojson数据源,数据内容设为空,添加具体的图层,当业务数据组织好后,通过调用setData方法更新数据
map.getSource('pointSource').setData(json) /*参数json可以是url或具体的geojson数据*/
image 类型说明
image 类型表示图像类型,图像格式可以为 gif、png、jpg、jpeg 形式。
map.addSource("imageSource", { /*imageSource代表数据源ID,是唯一的,不能重复*/
"type": "image", /*数据源类型*/
"url": "../images/radar.gif", /*图像url地址*/
"coordinates": [[116.45, 39.93],[116.47, 39.93],[116.47, 39.91],[116.45, 39.91]]
/*图像在地图上的坐标点边界,边界值为顺时针方式,依次为:左上、右上、右下、左下。*/
});
video 类型说明
video 类型表示视频类型,视频格式可以为 mp4 等形式。
map.addSource("videoSource", { /*videoSource代表数据源ID,是唯一的,不能重复*/
"type": "video", /*数据源类型*/
"urls": ["../assets/drone.mp4"], /*视频请求地址URL,可以是多个*/
"coordinates": [[116.45, 39.93],[116.47, 39.93],[116.47, 39.91],[116.45, 39.91]]
/*图像在地图上的坐标点边界,边界值为顺时针方式,依次为:左上、右上、右下、左下。*/
});