环境搭建
CentOS7 部署GeoServer2.92
https://www.cnblogs.com/think8848/p/5992736.html
geoserver 数据目录的结构
https://blog.csdn.net/qq_36178899/article/details/81181993
Geoserver 安装及CORS跨域资源访问配置
https://blog.csdn.net/jin80506/article/details/79903845
官网下载三种格式，war、bin、window install
一般取bin的方式就可以了，在window下部署即可，需要设置java环境变量
加入tomcat跨域
加入geoserver跨域
资料下载：
链接：https://pan.baidu.com/s/18nyOlrGycWEUaDqamfTlfA
提取码：aakz
arcsde数据连接
arcsde服务连接即可
shp以及其它的数据亦可作为数据源
参数可以参考Geoserver的用户手册
https://docs.geoserver.org/latest/en/user/
矢量切片制作发布
GEOServer-OpenLayer-矢量切片1：制作矢量切片
https://blog.csdn.net/cyoubo/article/details/77969323
利用geoserver发布矢量切片服务，进行切图到本地以及使用leaflet加载显示
https://blog.csdn.net/jin80506/article/details/79904053
矢量地图方案的进一步探讨
https://www.cnblogs.com/naaoveGIS/p/10255487.html
项目角度谈矢量切片运用以及Geoserver处理自定义规格矢量切片方案
https://www.cnblogs.com/naaoveGIS/p/8589204.html
矢量切片leaflet加载
注意，leaflet可以定义底图坐标系，geoserver发布图层对应请求的坐标系要与底图相对应，否则会产生偏移或请求失败的问题
需要特别注意的是请求切片规则名称要与geoserver中定义的一致
GeoServer发布矢量切片及其调用方式(mapbox/leaflet)
https://blog.csdn.net/geol200709/article/details/84946420
leaflet加载国家天地图服务
https://blog.csdn.net/dahongdahong/article/details/49685653
leaflet加载天地图
https://www.cnblogs.com/yeyinfu/p/7316910.html
坐标系统及投影概述
https://www.cnblogs.com/suyanteng/p/4895132.html
矢量切片相关概念
【GISER && Painter】矢量切片(Vector tile)
https://www.cnblogs.com/escage/p/6387529.html
GIS 矢量切片（Vector Tile）-地图定制化的时代已经悄悄来临
https://blog.csdn.net/qingyafan/article/details/53367204
WebGIS中矢量切图的初步研究
http://www.cnblogs.com/naaoveGIS/p/4982549.html
GEOServer-OpenLayer-矢量切片3：PBF格式格式展示（tms服务）
https://blog.csdn.net/cyoubo/article/details/78030680
相关参考资料：
GeoServer个人笔记
http://blog.51cto.com/13665344/2163949
搭建简易Web GIS网站：使用GeoServer+PostgreSQL+PostGIS+OpenLayers3
https://www.cnblogs.com/kkyyhh96/p/6379515.html
leaflet加载vectortile示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo-leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin="" />
<style rel="stylesheet">
body,
html,
#map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin=""></script>
<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.js"></script>
<script>
//var map = L.map('map').setView([22.65964, 114.09885], 12);
var map = L.map('map', {
crs: L.CRS.EPSG4326
}).setView([32.00558, 118.74470], 15);
L.tileLayer('http://t2.tianditu.com/vec_c/wmts?tk=41885e24968119d58586cee0eb2f9cd8&layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
maxZoom: 20,
tileSize: 256,
zoomOffset: 1
}).addTo(map );
L.tileLayer('http://t0.tianditu.gov.cn/cva_c/wmts?tk=41885e24968119d58586cee0eb2f9cd8&layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
maxZoom: 20,
tileSize: 256,
zoomOffset: 1
}).addTo(map );
//L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
// attribution: '© <a href="https://carto.com/attributions">CARTO</a> contributors'
//}).addTo(map);
//参数设置
var baseUrl = 'http://laptop:8080';
var workspace = 'sde';
var layerName = 'b';
var epsg = '4326';
var format = 'application/vnd.mapbox-vector-tile'; // application/vnd.mapbox-vector-tile
var vectorLayerUrl = baseUrl + "/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS" +
"&VERSION=1.0.0&LAYER=" + workspace + ":" + layerName + "&STYLE=&TILEMATRIX=EPSG:4326:{z}" +
"&TILEMATRIXSET=EPSG:4326&FORMAT=" + format +
"&TILECOL={x}&TILEROW={y}";
// 使用 TMS 的方式
//vectorLayerUrl = baseUrl + '/geoserver/gwc/service/tms/1.0.0/' + workspace + ":" + layerName + "@EPSG%3A" + epsg + "@pbf/{z}/{x}/{y}.pbf";
L.vectorGrid.protobuf(vectorLayerUrl, getVectorOptions('name')).addTo(map);
function getVectorOptions(fieldName) {
return {
layerURL: vectorLayerUrl,
rendererFactory: L.canvas.tile,
vectorTileLayerStyles: getVectorStyles(layerName, fieldName),
//tms: true, // 如果是 TMS 方式，则必须开启
};
}
function getVectorStyles(layerName, fieldName) {
var style = {};
style[layerName] = function (properties, zoom) {
var p = properties[fieldName];
return {
color: '#800026',
fillOpacity: 0.5,
//fillOpacity: 1,
stroke: true,
fill: true,
//opacity: 0.2,
weight: 3,
}
};
return style;
}
</script>
</body>
</html>
网友评论