資料是GIS的靈魂，沒有資料也就談不上GIS了，資料分為向量資料和柵格資料，柵格資料也有一些短處，缺乏靈活性、實時性，資料完整性受損是比較突出的問題，向量資料不同於柵格資料，比較靈活，資料完整，將兩者結合誕生出—>向量切片，不要被向量這個詞迷惑，向量切片是不可被編輯的，不可編輯不代表不能獲取其屬性資訊。

向量資料的優點:

向量切片可以以三種形式呈現：GeoJSON、TopoJSON 和 MapBox Vector Tile(.mvt)，向量切片技術繼承了向量資料和切片地圖的雙重優勢，有如下優點：

   1、 對於柵格切片，更靈活，更細粒度的資料劃分，要素級別；
   2、 資料資訊接近無損，但體積更小，請求指定地物的資訊，直接在客戶端獲取，無需再次請求伺服器；
   3、樣式可改變和定製（重點），向量切片可以在客戶端或者伺服器端渲染，可以按照使用者賦予的樣式渲染；
   4、對於原始向量資料，更小巧，採用了重新編碼，並進行了切分，只返回請求區域和相應級別的資料；
   5、資料更新快，或者說是實時的，當資料庫中的空間資料變化後，再次請求的資料是改變後的，在客戶端渲染後既是最新的情況；
   6、 更靈活，可以只是返回每個專題資料的圖層，而不是像柵格切片把很多專題資料渲染在一個底圖中。
詳細介紹參考

https://blog.csdn.net/qingyafan/article/details/53367204

一、採用geojson載入方式

        //投影1 Geoserver和OpenLayer都支援的4326座標系
        var projection4326 = new ol.proj.Projection({
            code: 'EPSG:4326',
            units: 'degrees',
            axisOrientation: 'neu'
        });
        var layerProjection = "4326";
        //引數設定：圖層名稱 / 投影座標系 / 初始化樣式
        var layer = "cite:beijing1";
        var initStyle = new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new ol.style.Stroke({
                    color: 'red',
                    width: 2
                }),
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })         
        });
        var vector = new ol.layer.VectorTile({
            title: "北京市道路-VectorTile",
            style: initStyle,
            projection: projection4326,
            　　　　　//向量切片資料
            source: new ol.source.VectorTile({
                　　　　　　　projeciton: projection4326,
                format: new ol.format.GeoJSON(),
                tileGrid: ol.tilegrid.createXYZ({
                    　　　　　　　　　　extent: ol.proj.get('EPSG:4326').getExtent(),
                    　　　　　　　　　　maxZoom: 22
                }),
                　　　　　　　tilePixelRatio: 1,
                　　　　　　　//發出獲取切片的請求
                　　　　　　　tileUrlFunction: function (tileCoord) {
                           return 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/'
                        + layer + '@EPSG%3A' + layerProjection + '@geojson/' + (tileCoord[0] - 1)
                        + '/' + tileCoord[1] + '/' + (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) + '.geojson';

                }
            　　　　　　})
        　　　　});
       
 

二、採用pbf方式載入

        //投影1 Geoserver和OpenLayer都支援的4326座標系
        var projection4326 = new ol.proj.Projection({
            code: 'EPSG:4326',
            units: 'degrees',
            axisOrientation: 'neu'
        });
        var layerProjection = "4326";
        //引數設定：圖層名稱 / 投影座標系 / 初始化樣式
        var initStyle = new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new ol.style.Stroke({
                    color: 'red',
                    width: 2
                }),
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })         
        });
 //圖層名
        var layerName = 'cite:university';
        //切片資源1 基於4326座標系統
        var source4326 = new ol.source.VectorTile ({
                title: "國內大學分佈-VectorTile",
                format: new ol.format.MVT(),
                projection: projection4326,
                //切片格網直接有4326座標系統的座標範圍與縮放大小指定,因此每一級的都是固定的
                tileGrid: ol.tilegrid.createXYZ({
                    extent: ol.proj.get('EPSG:4326').getExtent(),
                    maxZoom: 22
                }),
                tilePixelRatio: 1,
                tileUrlFunction: function (tileCoord) {
                    return 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/' + layerName + '@EPSG%
 
[email protected]/' + (tileCoord[0] - 1)
                        + '/' + tileCoord[1] + '/' + (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) + '.pbf';
                }
            })
        var vectorTile = new ol.layer.VectorTile
            ({
                style: initStyle,
                projection: projection4326,
                source: source4326
            });

三、效果圖

1、獲取屬性資訊

2、整體效果