【Mapbox GL JS 入门】（7）Sources 数据源
目录
- 简介
- CanvasSource
-
- Instance Members
-
- play()
- pause()
- getCanvas()
- setCoordinates(coordinates)
- CanvasSourceOptions
-
- Properties
-
- animate
- canvas
- coordinates
- type
- GeoJSONSource
-
- Instance Members
-
- setData()
- getClusterExpansionZoom(cluster_id,callback)
- getClusterChildren(cluster_id,callback)
- getClusterLeaves(cluster_id,limit,offset,callback)
- ImageSource
-
- Instance Members
-
- updateImage(options)
- setCoordinates(coordinates)
- VectorTileSource
-
- Instance Members
-
- setTiles(tiles)
- setUrl(url)
- VideoSource
-
- Instance Members
-
- play()
- pause()
- getVideo()
- setCoordinates(coordinates)
简介
除了Mapbox样式规范中描述的源类型之外，Mapbox GL JS还可以处理的源类型
CanvasSource
继承 ImageSource，包含HTML canvas 的数据源。有关选项的详细文档，请参阅 CanvasSourceOptions 。
// add to map
map.addSource('some id', {
type: 'canvas',
canvas: 'idOfMyHTMLCanvas',
animate: true,
coordinates: [
[-76.54, 39.18],
[-76.52, 39.18],
[-76.52, 39.17],
[-76.54, 39.17]
]
});
// update
const mySource = map.getSource('some id');
mySource.setCoordinates([
[-76.54335737228394, 39.18579907229748],
[-76.52803659439087, 39.1838364847587],
[-76.5295386314392, 39.17683392507606],
[-76.54520273208618, 39.17876344106642]
]);
map.removeSource('some id'); // remove
Instance Members
play()
启用动画。图像将从画布复制到每个帧上的地图。
pause()
禁用动画。地图将显示画布图像的静态副本。
getCanvas()
返回 HTML canvas 元素。
// Assuming the following canvas is added to your page
//
map.addSource('canvas-source', {
type: 'canvas',
canvas: 'canvasID',
coordinates: [
[91.4461, 21.5006],
[100.3541, 21.5006],
[100.3541, 13.9706],
[91.4461, 13.9706]
]
});
map.getSource('canvas-source').getCanvas(); //
setCoordinates(coordinates)
设置画布的坐标并重新渲染地图。
CanvasSourceOptions
将画布源类型添加到地图的选项
Properties
animate
数据类型：(boolean?)
描述：画布源是否已设置动画。如果画布是静态的（不需要在每帧上重新读取像素），那么animate应该设置为false以提高性能。
canvas
数据类型：((string | HTMLCanvasElement))
描述：从中读取像素的画布源。可以是表示画布元素ID的字符串，也可以是HTMLCanvasElement本身。
coordinates
数据类型：(Array
描述：四个地理坐标表示放置画布角落的位置，以[经度，纬度]对指定。
type
数据类型：(string)
描述：源类型，必须是"canvas"。
GeoJSONSource
继承 Evented，包含 GeoJSON 的数据源。有关选项的详细文档，请参阅 Style Specification 。
map.addSource('some id', {
type: 'geojson',
data: {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-76.53063297271729,
39.18174077994108
]
}
}]
}
});
Instance Members
setData()
设置GeoJSON 数据并重新渲染地图。
map.addSource('source_id', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: []
}
});
const geojsonSource = map.getSource('source_id');
// Update the data after the GeoJSON source was created
geojsonSource.setData({
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {"name": "Null Island"},
"geometry": {
"type": "Point",
"coordinates": [ 0, 0 ]
}
}]
});
getClusterExpansionZoom(cluster_id,callback)
对于集群源，获取给定集群扩展的缩放比例
// Assuming the map has a layer named 'clusters' and a source 'earthquakes'
// The following creates a camera animation on cluster feature click
map.on('click', 'clusters', (e) => {
const features = map.queryRenderedFeatures(e.point, {
layers: ['clusters']
});
const clusterId = features[0].properties.cluster_id;
// Ease the camera to the next cluster expansion
map.getSource('earthquakes').getClusterExpansionZoom(
clusterId,
(err, zoom) => {
if (!err) {
map.easeTo({
center: features[0].geometry.coordinates,
zoom
});
}
}
);
});
getClusterChildren(cluster_id,callback)
对于集群源，在下一个缩放级别获取给定集群的子级（作为GeoJSON特性的数组）
// Retrieve cluster children on click
map.on('click', 'clusters', (e) => {
const features = map.queryRenderedFeatures(e.point, {
layers: ['clusters']
});
const clusterId = features[0].properties.cluster_id;
clusterSource.getClusterChildren(clusterId, (error, features) => {
if (!error) {
console.log('Cluster children:', features);
}
});
});
getClusterLeaves(cluster_id,limit,offset,callback)
对于集群源，获取属于集群的原始点（作为GeoJSON特性的数组）
// Retrieve cluster leaves on click
map.on('click', 'clusters', (e) => {
const features = map.queryRenderedFeatures(e.point, {
layers: ['clusters']
});
const clusterId = features[0].properties.cluster_id;
const pointCount = features[0].properties.point_count;
const clusterSource = map.getSource('clusters');
clusterSource.getClusterLeaves(clusterId, pointCount, 0, (error, features) => {
// Print cluster leaves in the console
console.log('Cluster leaves:', error, features);
});
});
ImageSource
继承 Evented，包含 image 的数据源。有关选项的详细文档，请参阅 Style Specification 。
// add to map
map.addSource('some id', {
type: 'image',
url: 'https://www.mapbox.com/images/foo.png',
coordinates: [
[-76.54, 39.18],
[-76.52, 39.18],
[-76.52, 39.17],
[-76.54, 39.17]
]
});
// update coordinates
const mySource = map.getSource('some id');
mySource.setCoordinates([
[-76.54335737228394, 39.18579907229748],
[-76.52803659439087, 39.1838364847587],
[-76.5295386314392, 39.17683392507606],
[-76.54520273208618, 39.17876344106642]
]);
// update url and coordinates simultaneously
mySource.updateImage({
url: 'https://www.mapbox.com/images/bar.png',
coordinates: [
[-76.54335737228394, 39.18579907229748],
[-76.52803659439087, 39.1838364847587],
[-76.5295386314392, 39.17683392507606],
[-76.54520273208618, 39.17876344106642]
]
});
map.removeSource('some id'); // remove
Instance Members
updateImage(options)
更新图像URL和坐标（可选）。若要避免更改后图像闪烁，请将光栅图层上的光栅渐变持续时间绘制属性设置为0。
// Add to an image source to the map with some initial URL and coordinates
map.addSource('image_source_id', {
type: 'image',
url: 'https://www.mapbox.com/images/foo.png',
coordinates: [
[-76.54, 39.18],
[-76.52, 39.18],
[-76.52, 39.17],
[-76.54, 39.17]
]
});
// Then update the image URL and coordinates
imageSource.updateImage({
url: 'https://www.mapbox.com/images/bar.png',
coordinates: [
[-76.5433, 39.1857],
[-76.5280, 39.1838],
[-76.5295, 39.1768],
[-76.5452, 39.1787]
]
});
setCoordinates(coordinates)
设置 image 的坐标并重新渲染地图。
// Add an image source to the map with some initial coordinates
map.addSource('image_source_id', {
type: 'image',
url: 'https://www.mapbox.com/images/foo.png',
coordinates: [
[-76.54, 39.18],
[-76.52, 39.18],
[-76.52, 39.17],
[-76.54, 39.17]
]
});
// Then update the image coordinates
imageSource.setCoordinates([
[-76.5433, 39.1857],
[-76.5280, 39.1838],
[-76.5295, 39.1768],
[-76.5452, 39.1787]
]);
VectorTileSource
继承 Evented，包含 Mapbox Vector Tile格式的矢量瓦片的源。有关选项的详细文档，请参阅 Style Specification 。
map.addSource('some id', {
type: 'vector',
tiles: ['https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt'],
minzoom: 6,
maxzoom: 14
});
Instance Members
setTiles(tiles)
设置设置源瓦片属性并重新渲染地图。
map.addSource('vector_source_id', {
type: 'vector',
tiles: ['https://some_end_point.net/{z}/{x}/{y}.mvt'],
minzoom: 6,
maxzoom: 14
});
const vectorTileSource = map.getSource('vector_source_id');
// Set the endpoint associated with a vector tile source.
vectorTileSource.setTiles(['https://another_end_point.net/{z}/{x}/{y}.mvt']);
setUrl(url)
设置设置源 url 属性并重新渲染地图。
map.addSource('vector_source_id', {
type: 'vector',
url: 'mapbox://mapbox.mapbox-streets-v7'
});
const vectorTileSource = map.getSource('vector_source_id');
// Update vector tile source to a new URL endpoint
vectorTileSource.setUrl("mapbox://mapbox.mapbox-streets-v8");
VideoSource
继承 ImageSource，包含 video 的数据源。有关选项的详细文档，请参阅 Style Specification 。
// add to map
map.addSource('some id', {
type: 'video',
url: [
'https://www.mapbox.com/blog/assets/baltimore-smoke.mp4',
'https://www.mapbox.com/blog/assets/baltimore-smoke.webm'
],
coordinates: [
[-76.54, 39.18],
[-76.52, 39.18],
[-76.52, 39.17],
[-76.54, 39.17]
]
});
// update
const mySource = map.getSource('some id');
mySource.setCoordinates([
[-76.54335737228394, 39.18579907229748],
[-76.52803659439087, 39.1838364847587],
[-76.5295386314392, 39.17683392507606],
[-76.54520273208618, 39.17876344106642]
]);
map.removeSource('some id'); // remove
Instance Members
play()
启用 video 。
// Assuming a video source identified by video_source_id was added to the map
const videoSource = map.getSource('video_source_id');
// Starts the video
videoSource.play();
pause()
禁用 video 。
// Assuming a video source identified by video_source_id was added to the map
const videoSource = map.getSource('video_source_id');
// Pauses the video
videoSource.pause();
getVideo()
返回 HTML video 元素。
// Assuming a video source identified by video_source_id was added to the map
const videoSource = map.getSource('video_source_id');
videoSource.getVideo(); //
setCoordinates(coordinates)
设置 video 的坐标并重新渲染地图。
// Add a video source to the map to map
map.addSource('video_source_id', {
type: 'video',
url: [
'https://www.mapbox.com/blog/assets/baltimore-smoke.mp4',
'https://www.mapbox.com/blog/assets/baltimore-smoke.webm'
],
coordinates: [
[-76.54, 39.18],
[-76.52, 39.18],
[-76.52, 39.17],
[-76.54, 39.17]
]
});
// Then update the video source coordinates by new coordinates
const videoSource = map.getSource('video_source_id');
videoSource.setCoordinates([
[-76.5433, 39.1857],
[-76.5280, 39.1838],
[-76.5295, 39.1768],
[-76.5452, 39.1787]
]);