TMS方式
栅格
<!DOCTYPE html>
<html>
<head>
<title>openLayers使用TMS方式加载栅格切片服务</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<style>
html, body {
overflow: hidden;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var url = "http://192.168.1.253:8181/geoserver/gwc/service/tms/1.0.0/zykj%3Asizhen2@EPSG%3A4326@png/";
var resolutions = [];
for (var i = 0; i < 19; i++) {
resolutions[i] = Math.pow(2, 18 - i);
}
var projection = new ol.proj.get("EPSG:4326");
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source:new ol.source.OSM(),id:"电子地图",visible:true}),
new ol.layer.Tile({
source: new ol.source.XYZ({
projection: projection,
tileGrid: ol.tilegrid.createXYZ({
extent: projection.getExtent()}),
tileUrlFunction: function (tileCoord, pixelRatio, proj) {
return url + (tileCoord[0] - 1) + '/' + tileCoord[1] + '/' + (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) + '.png';
}
})
})
],
view: new ol.View({
projection: projection,
center: [119.232926, 31.922242],
zoom: 10
})
});
</script>
</body>
</html>
shp
<!DOCTYPE html>
<html>
<head>
<title>openLayers使用TMS方式加载shp切片服务</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<style>
html,body{
overflow: hidden;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#map{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var url="http://192.168.1.253:8181/geoserver/gwc/service/tms/1.0.0/zykj%3Achina@EPSG%3A4326@png/";
var resolutions = [];
for (var i = 0; i < 19; i++) {
resolutions[i] = Math.pow(2, 18 - i);
}
var projection=new ol.proj.get("EPSG:4326");
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
projection: projection,
tileGrid: ol.tilegrid.createXYZ({
extent: projection.getExtent()}),
tileUrlFunction: function (tileCoord, pixelRatio, proj) {
return url+(tileCoord[0]-1)+ '/'+tileCoord[1] + '/' + (Math.pow(2,tileCoord[0]-1)+tileCoord[2]) + '.png';
}
})
})
],
view: new ol.View({
projection: projection,
center:[119.232926,31.922242],
zoom:10
})
});
</script>
</body>
</html>