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’, {

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/4fbd4ea0a4134851879d707ed4564d50.webp
“type”: “raster-dem”,

“url”: “mapbox://mapbox.terrain-rgb”

});

6. layer