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

你可能感兴趣的:(javascript,开发语言,ecmascript)