首先設(shè)置矢量切片數(shù)據(jù)源，可以選擇pbf格式或者geojson格式，其中pbf格式數(shù)據(jù)加密性較好，讀取速度快：

var vector = new ol.layer.VectorTile({  
            source: new ol.source.VectorTile({  
                projection: projection4326,  
                <!-- format: new ol.format.GeoJSON(), -->//geojson格式
                format: new ol.format.MVT(),//pbf格式             
                tileGrid: ol.tilegrid.createXYZ({  
                    extent: ol.proj.get('EPSG:4326').getExtent(),  
                    maxZoom: 32  
                }),  
                tilePixelRatio: 1,
                // 矢量切片服務(wù)地址  
                tileUrlFunction: function(tileCoord){  
                    return 'http://127.0.0.1:8080/geoserver/gwc/service/tms/1.0.0/'  
                        +lyr+'@EPSG%3A4326@pbf/'+(tileCoord[0]-1)  
                        + '/'+tileCoord[1] + '/' + (Math.pow(2,tileCoord[0]-1)+tileCoord[2]) + '.pbf';//pbf矢量切片  
                }
                <!-- tileUrlFunction: function(tileCoord){   -->
                    <!-- return 'http://127.0.0.1:8080/geoserver/gwc/service/tms/1.0.0/'   -->
                        <!-- +lyr+'@EPSG%3A4326@geojson/'+(tileCoord[0]-1)   -->
                        <!-- + '/'+tileCoord[1] + '/' + (Math.pow(2,tileCoord[0]-1)+tileCoord[2]) + '.geojson'; -->
                <!-- }               -->//geojson矢量切片
            })  
            <!-- style:initStyle  --> 
        });

設(shè)置Map對(duì)象赘来，并自定義矢量切片符號(hào)：

//設(shè)置POI圖標(biāo)
        var iconStyle = new ol.style.Style({
                            image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
                              anchor: [0.5, 46],
                              anchorXUnits: 'fraction',
                              anchorYUnits: 'pixels',
                              src: 'https://openlayers.org/en/v4.6.4/examples/data/icon.png'
                            }))
                        }); 
//設(shè)置Map對(duì)象
var map = new ol.Map({  
            layers: [    
                vector  
            ],  
            target: 'map',  
            controls: ol.control.defaults().extend([  
                new ol.control.MousePosition({  
                    className:"ol-mouseposition",  
                    coordinateFormat: ol.coordinate.createStringXY(5)  
                })  
            ]),  
            view: new ol.View({  
                projection: projection4326,  
                minZoom:1,  
                maxZoom:32,  
                center: [-103.774,44.440],  
                zoom: 8  
            })  
        });
//將默認(rèn)樣式切換成自定義符號(hào)
vector.setStyle(iconStyle); 

具體效果如下圖所示：

默認(rèn)樣式效果圖

動(dòng)態(tài)渲染效果圖