【Mapbox GL JS 入门】（7）Sources 数据源

最新推荐文章于 2024-04-12 14:43:06 发布

GIS程序媛—椰子

最新推荐文章于 2024-04-12 14:43:06 发布

阅读量2.1k

点赞数 2

文章标签： javascript 开发语言 ecmascript

原文链接：https://docs.mapbox.com/mapbox-gl-js/api

版权

简介

除了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
// <canvas id="canvasID" width="400" height="400"></canvas>
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(); // <canvas id="canvasID" width="400" height="400"></canvas>

setCoordinates(coordinates)

设置画布的坐标并重新渲染地图。

CanvasSourceOptions

将画布源类型添加到地图的选项

Properties

animate

数据类型：(boolean?)
描述：画布源是否已设置动画。如果画布是静态的（不需要在每帧上重新读取像素），那么animate应该设置为false以提高性能。

canvas

数据类型：((string | HTMLCanvasElement))
描述：从中读取像素的画布源。可以是表示画布元素ID的字符串，也可以是HTMLCanvasElement本身。

coordinates

数据类型：(Array<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(); // <video crossorigin="Anonymous" loop="">...</video>

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]
]);