geoserver如何发布切片就不写了,大家都可以查到。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport'
content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href=' css/leaflet.css' rel='stylesheet' />
<script src="js/leaflet-src.js"></script>
<script src="js/leaflet.vectorgrid1.2.0.js"></script>
<!-- <link rel="stylesheet" href="http://openlayers.org/en/v3.11.1/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.11.1/build/ol.js"></script> -->
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<div id="map" style="height: 100%; 100%"></div>
</body>
</html>
js
//添加一个map
var map = L.map('map', {
crs : L.CRS.EPSG4326,
center : {
lon : 105,
lat : 30
},
zoom:3
});
/*********WMTS服务,需要leaflet-tilelayer-wmts-src.js提供支持***********/
var url = 'http://127.0.0.1:8080/geoserver/gwc/service/wmts';
var emap = new L.TileLayer.WMTS(url, {
layer : "test:gj",
tilematrixSet : "EPSG:4326",
tileSize : 256
});
map.addLayer(emap);
/*********WMS服务***********/
var wmsLayer = L.tileLayer.wms('http://127.0.0.1:8080/geoserver/gwc/service/wms?', {
layers: 'test:gj'
}).addTo(map);
/*********TMS服务***********/
var tmsLayer = L.tileLayer('http://127.0.0.1:8080/geoserver/gwc/service/tms/1.0.0/test:gj@EPSG:4326@png/{z}/{x}/{y}.png', {
tms: true
}).addTo(map);
/*********openlayers3调用geoserver的pbf数据***********/
var vectortileAdminLayer = new ol.layer.VectorTile({
// 矢量切片的数据源
source: new ol.source.VectorTile({
format: new ol.format.MVT(),
tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
tilePixelRatio: 1,
// 矢量切片服务地址
url: 'http://127.0.0.1:8080/geoserver/gwc/service/tms/1.0.0/test:gj@EPSG:4326@pbf/{z}/{x}/{-y}.pbf'
}),
// 对矢量切片数据应用的样式
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgb(140,137,129)'
}),
stroke: new ol.style.Stroke({
color: 'rgb(220, 220, 220)',
1
})
})
});
/***leaflet1.0使用geoserver发布的pbf数据,需要leaflet.vectorgrid.js***/
var localUrl = "http://127.0.0.1:8080/geoserver/gwc/service/tms/1.0.0/test:gj@EPSG:4326@pbf/{z}/{x}/{-y}.pbf";
var localVectorTileOptions = {
rendererFactory: L.canvas.tile,
attribution: 'mycontributors',
vectorTileLayerStyles: vectorTileStyling,
};
var localPbfLayer = L.vectorGrid.protobuf(localUrl, localVectorTileOptions).addTo(map);