GeoServer調用矢量切片

本文轉載自查看原文 2020-07-31 09:18 675 GIS前端開發/ 解決問題

背景

　　項目需要顯示矢量作為底圖，開始是用了url的方式加載geojson數據，但是最近發現ol加載geojson數據很慢：

　　這么點數據要加載這么久，之前倒是沒發現這種問題。

解決方案

　　矢量切片。

步驟

①GeoServer官網下載切片插件

我用的版本是2.14.3

②下載后的文件解壓后復制到此路徑：C:\Program Files (x86)\GeoServer 2.14.3\webapps\geoserver\WEB-INF\lib下，重啟GeoServer，進入編輯圖層可以看到：

③點擊Tile Caching目錄下的Tile Layers,選擇圖層，選中新增的圖片格式:

　　然后返回Tile Layers，找到要切片的圖層，點擊Select One,說明已經成功：

源碼：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5   <title>GeoJSON 矢量切片</title>
 6   <link rel="stylesheet" href="css/ol.css" type="text/css">
 7   <link rel="stylesheet" href="css/ol-ext.css" type="text/css">
 8 
 9 
10   <style>
11     
12   </style>
13   <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
14   <script src="scripts/jquery.min.js"></script>
15   <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
16 
17   <script src="scripts/ol.js"></script>
18   <script src="scripts/ol-ext.js"></script>
19 
20   
21 </head>
22 
23 <body>
24   <div id="map" class="map"></div>
25   <script>
26     // 創建一個視圖
27     var coordinate = [120.3993,31.08125];
28     // var coor = ol.proj.transform(coordinate, 'EPSG:4326', 'EPSG:3857');
29     
30     var view = new ol.View({
31       center: coordinate,
32       zoom: 6,
33         minZoom: 0,
34         maxZoom: 25,
35         projection: 'EPSG:4326',
36     });
37 
38       var projection4326 = new ol.proj.Projection({
39         code: 'EPSG:4326',
40         units: 'degrees',
41         axisOrientation: 'neu'
42     });
43 
44     var BaseMapVectorLayerTile = new ol.layer.VectorTile({
45         title: "baseMap_Tile",
46         style:  new ol.style.Style({
47         stroke: new ol.style.Stroke({
48             color: '#888888',//#38D0F0
49             width: 2
50         }),
51         fill: new ol.style.Fill({
52             color: 'white'
53         }),
54         text: new ol.style.Text({ //文本樣式
55             font: 'bold 12px serif',
56             overflow: true,
57             fill: new ol.style.Fill({
58                 color: '#000'
59             }),
60             stroke: new ol.style.Stroke({
61                 color: '#fff',
62                 width: 3
63             })
64         })
65     }),
66         projection: projection4326,
67         //矢量切片數據
68         source: new ol.source.VectorTile({
69             projeciton: projection4326,
70             format: new ol.format.GeoJSON(),
71             tileGrid: ol.tilegrid.createXYZ({
72                 extent: ol.proj.get('EPSG:4326').getExtent(),
73                 maxZoom: 25
74             }),
75             tilePixelRatio: 1,
76             //發出獲取切片的請求
77             tileUrlFunction: function (tileCoord) {
78                 return 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/test%3ACHN_adm1@EPSG%3A4326@geojson/' + (tileCoord[0] - 1)
79                     + '/' + tileCoord[1] + '/' + (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) + '.geojson';
80             }
81         })
82     });
83     // 創建第一個地圖
84     var map = new ol.Map({
85       layers: [
86         new ol.layer.Tile({ source: new ol.source.OSM() }),
87         BaseMapVectorLayerTile,
88       ],
89       view: view,
90       target: 'map'
91     });
92 
93   </script>
94 </body>
95 
96 </html>