According to the English document translation of mapbox, please forgive me for translation deviations or deficiencies.
1. Geometry Geometric
figures can be points, lines, polygons, etc.
The data structure is as follows:
the geometric figure of the example is a point
"geometry": {
"type": "Point",
"coordinates": [-77.0323, 38.9131]
},
2. Feature geospatial feature
Geospatial feature is a set or a set of geometric figures (point, line, polygon, etc.), which is determined by two attributes: properties and geometry, properties are attributes, that is, some data information, geometry is geometry Graphics, that is, the shape and location information of this feature.
feature structure:
The features in the example have a dot.
features: [{
'type': 'Feature',
'properties': {
},
'geometry': {
'type': 'Point',
'coordinates': []
}
}]
3. source source data
source is the source data, which provides the data to be displayed for the map.
Data format:
the first mysource is a vector tile, and the second mysource1 is a geometric feature set.
mysource:{
type: 'vector',
url: 'mapbox://myusername.tilesetid'
}
//或者
mysource1:{
"type": "geojson",//一种对地理数据结构进行编码的格式
"data": {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.0323, 38.9131]
},
"properties": {
"title": "Mapbox DC",
"marker-symbol": "monument"
}
}
}
The function addSource(id,source) used to add source data to the map
map.addSource('my-data', mySource1);
Remarks: Adding source to the map or to the layer layer cannot be displayed. You need to add some styles to the feature, such as color width and the like.
4. style layer style layer
style layer exists in the style of the map, when it is rendered, the data source it refers to should also be displayed on the map.
layer structure
mylayer: {
"id": "rivers",
"type": "line",
"source": "mapbox://mapbox.mapbox-streets-v8",
"source-layer": "waterway",
"paint": {
"line-color": "#ffc0cb"}
}
map.addLayer(mylayer), you can add it on the map
5. The relationship between attributes
图层layer:{
数据源source：{
特征feature：{
几何geometry：{
点/线/多边形/......
}
}
}
}