您的位置：首页 > 其它

Leaflet调用geoserver发布的矢量切片

2017-03-17 13:49 423 查看

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%; width: 100%"></div>
</body>
</html>

//添加一个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)',
width: 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);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： leaflet geoserver 矢量切片

相关文章推荐

新的分享

章节导航