mapbox架构
1. mapbox整体架构
2 .map 对象
3. Marker
3.1 option
option是初始化marker是需要的一些参数：
const ele = document.createElement(‘div’);
ele.setAttribute(‘class’, ‘map-label’);
ele.innerHTML = r.name;
const option = {
element: ele,
anchor: ‘bottom’,
offset: [0, -10]
}
const marker = new mapboxgl.Marker(option);
4. Popup
5. Source
5.1 vector、raster和raster-dem
vector、raster和raster-dem是在API和style里面没有对应上的，主要是一些栅格或者矢量的切片或者服务调用。
// raster——xyz切片
map.addSource(‘XYZLabel’, {
“type”: “raster”,
“tiles”: [‘http://www.google.cn/maps/vt?lyrs=h@189&gl=cn&x={x}&y={y}&z={z}’],
“tileSize”: 256
});
// raster——wms
map.addSource(‘wmsLayer’, {
“type”: “raster”,
“tiles”: [‘http://39.106.122.204:8086/geoserver/railway/wms?service=WMS&version=1.1.0&request=GetMap&layers=railway:layer_base&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE’],
“tileSize”: 256
});
// raster——tms
map.addSource(‘gugong’, {
‘type’: ‘raster’,
‘scheme’: ‘tms’,
‘tiles’: [‘http://localhost:8086/geoserver/gwc/service/tms/1.0.0/jtmet%3Agugong@EPSG%3A900913@png/{z}/{x}/{y}.png’]
});
// vector
map.addSource(“states”, {
type: “vector”,
url: “mapbox://mapbox.us_census_states_2015”
});
// raster-dem
map.addSource(‘dem’, {
;
6. layer
