加载底图

var map = new mapboxgl.Map({
            container: 'map', // container id
            style: {
                "version": 8,
                //"sprite": "http://localhost:8080/mapboxTest/sprite",
                //"glyphs": "http://localhost:8080/mapboxTest/mapbox本地化/font/{fontstack}/{range}.pbf",
                "sources": {
                    "osm-tiles": {
                        "type": "raster",
                        'tiles': [
                            "http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
                        ],
                        'tileSize': 256
                    }
                },
                "layers": [{
                    "id": "simple-tiles",
                    "type": "raster",
                    "source": "osm-tiles",
                    "minzoom": 0,
                    "maxzoom": 22
                }]
            },
            //center: [116.39547280003353, 39.90533832710483],
            center: [121.49531000112344, 31.116395398832502],
            zoom: 9
        });

添加矢量切片数据源

 map.addSource('custom-go-vector-tile-source-shanghaitaxi', {
                type: 'vector',
                'tileSize': 512, scheme: "xyz",
                tiles: ['http://127.0.0.1:9008/tileserver/tile/test/shanghaitaxi2/{x}/{y}/{z}']
            });

添加图层

根据字段的不同设置不同的颜色

map.addLayer({
                "id": "custom-go-vector-tile-layer-shanghaitaxi",
                "type": "circle",
                "source": "custom-go-vector-tile-source-shanghaitaxi",
                "source-layer": "shanghaitaxi2",
                "paint": {
                    'circle-stroke-color': '#000',
                    'circle-stroke-width': 1,
                   // 'circle-color': '#FF0000'
                    "circle-color": [
                        'case',
                        ['>=', ['get', 'speed'], 80], 
                        '#FF0000',
                        ['<', ['get', 'speed'], 40], 
                        '#ADFF2F', 
                        '#DA70D6', 
                    ]
                }
            });

image.png