GIS之矢量切片地图
最近通过TileMill结合OSM下载的矢量数据制作北京市地图，不同主题风格的地图已经完美告一段落，总结之余，觉得矢量切片会是一个更好方案，结合网上有效方法实践如下：
- 主要参考的博客文：http://www.cnblogs.com/ATtuing/p/9217029.html
- 如果本身熟悉TileMill 的CartoCSS 样式编写，基于mapbox.js开发定义样式时，只需要关注mapbox的style中的filter结构即可
- 自己部署geoserver发布的矢量切片时需要注意：直接复制到服务器路径下后，调用时，需要根据geoserver切片规则写调用文件,下面以openlayer示例如下：
<!DOCTYPE html>
<html>
<head>
<title>Vector Tile Info</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<style>
#map {
position: relative;
}
#info {
z-index: 1;
opacity: 0;
position: absolute;
bottom: 0;
left: 0;
margin: 0;
background: rgba(0,60,136,0.7);
color: white;
border: 0;
transition: opacity 100ms ease-in;
}
</style>
</head>
<body>
<div id="map" class="map">
</div>
<script>
var projection4326 = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'degrees',
});
var initStyle = new ol.style.Style({stroke: new ol.style.Stroke({color: 'rgb(163,204,25)',width: 5})});
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: [116.3672,40.1789],
zoom:10,
projection:projection4326
}),
layers: [new ol.layer.VectorTile({
style: initStyle,
projection: projection4326,
source: new ol.source.VectorTile({
format: new ol.format.MVT(),
projection: projection4326,
tileGrid: ol.tilegrid.createXYZ({extent: ol.proj.get('EPSG:4326').getExtent(), maxZoom:15}),
tilePixelRatio:1,
tileUrlFunction:function(tileCoord){
var url="http://localhost:8090/geo_cache/osm_beijing";
var z = tileCoord[0]-1;
var x = tileCoord[1];
var y = (Math.pow(2,tileCoord[0]-1)+tileCoord[2]);
var tempFile = Math.sqrt(fileDel[z]); //边数
var tryx = Math.ceil((x+1)/tempFile) - 1; //x所在列（关键点）
var tryy = Math.ceil((y+1)/tempFile) - 1; //y所在行（关键点）
var file = tryx.toString() + '_' + tryy.toString();
return url+"/EPSG_4326_"+(z<10?'0'+z.toString():z.toString())+"/"+file+"/"+fix(x)+"_"+fix(y)+".pbf";
}
})
})]
});
var fileDel=calFileNum(0,15);
//--------计算文件数方法-------------//
function calFileNum(minZoom,maxZoom){
var fileDelta = new Array(maxZoom-minZoom+1);//每个文件夹的边数组
for(var i=0;i<=maxZoom;i++){
if(i%2==0){ //偶数
fileDelta[i] = Math.pow(2,i+2);
}
else{ //奇数
fileDelta[i] = fileDelta[i-1];
}
}
return fileDelta;
}
function fix(num){
var tmp=num.toString().length;
if(tmp%2==0){ //偶数
return num.toString();
}
else{ //奇数
return '0'+num.toString();
}
}
</script>
</body>
</html>转载自：https://blog.csdn.net/YH20090580118/article/details/80926921
