Geoserver发布图层服务和地图影像服务

最新推荐文章于 2024-08-15 22:15:08 发布

ANNENBERG

最新推荐文章于 2024-08-15 22:15:08 发布

阅读量1.9k

点赞数 1

分类专栏： openlayers geoserver 文章标签： openlayers geoserver

本文链接：https://blog.csdn.net/ANNENBERG/article/details/106999512

版权

openlayers 同时被 2 个专栏收录

27 篇文章 1 订阅

订阅专栏

geoserver

6 篇文章 0 订阅

订阅专栏

首页

主页主要分为左侧的功能目录区，中间Geoserver各项指标统计区和服务类型指示区。我们大多的操作会在功能目录区和Geoserver各项指标区，当然实际使用时，这部分会由功能决定。

使用步骤

Geoserver的使用步骤和ArcGIS Server的使用步骤少有不同，这个不必在意。Geoserver的结构式在工作区中上传发布数据。所以一般情况下，我们先要创建工作区，然后上传数据，最后再发布服务，进行切图等操作。

具体操作

创建工作区
创建工作区可以在主页指标区点击“创建工作区”，进行创建，还可以点击功能区的工作区，进入如下页面，点击顶部的“添加工作区”，填入相应的信息即可完成创建。

注意
Name为工作空间名称，命名空间 URI为你发布服务后调用服务时用的，测试环境可以用localhost或127.0.0.1代替，但在生产环境请使用完全限定域名（fqdn）。

创建完成

添加数据
打开数据存储功能，点击“添加新的数据存储”即可。

Geoserver支撑很多类型，我们选择shapefile

进入添加矢量数据源页面后，点击浏览，浏览到Geoserver安装目录下的data_url文件夹中，然后找到要发布的shapefile文件，点击即可。

字符集使用utf-8（GeoServer发布shapfile字段名和值乱码问题解决：DBF charset为GBK或者GB2312均可）,填入相应的名称和url并保存。

完整如下

发布服务
上传完数据源，页面自动跳转到发布页面，

点击发布，页面跳转值编辑图层页面，

在定义SRS的查找中查找4326，然后点击查找到的结果

接下来分别点击边框栏中的“从数据中计算”和“Compute from native bounds”

最后点击保存即可发布成服务。

浏览
服务发布完即可在Layer Preview中看到刚才发布的数据，点击“OpenLayers“即可用OpenLayers进行浏览。

在OpenLayer中打开的效果。

地图影像切片

代码中加载影像地图的各个参数配置获取方式：localhost/geowebcache/

基于Tomcat部署的Geoserver配置Geowebcache，并转发ArcGIS切片

1、将GeowebCache的war包解压到tomcat的webapp下，打开war包中的WEB-INF中的web.xml文件，同时创建一个你想保存geowencache的切片的空文件夹，例如我命名叫arcgis

web.xml文件中添加<context-param>节点，param-value是你所建的文件夹

2、在重启动tomcat 之后我们在arcgis文件夹中可以看到：

3、打开geowebcache.xml文件，在<layers>…</layers>节点中添加如下节点：

4、配置完以后如果无法启动geowebcache，日志报错，找到geowebcache-core-context文件，往里面添加：

<bean id="gwcArcGIGridsetConfigutation" class="org.geowebcache.arcgis.layer.ArcGISCacheGridsetConfiguration"/>

5、加完之后可以在geowebcache的list中查看到自己添加的瓦片

6、重启一下服务，刷新一下，代码如下

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="imagetoolbar" content="no">
<title>ChaoYangRoadVector EPSG:2436_ChaoYangRoadVector image/png</title>
<style type="text/css">
body { font-family: sans-serif; font-weight: bold; font-size: .8em; }
body { border: 0px; margin: 0px; padding: 0px; }
#map { width: 85%; height: 85%; border: 0px; padding: 0px; }
#info iframe {border: none;}
.ol-scale-value {top: 24px; right: 8px; position: absolute; }
.ol-zoom-value {top: 40px; right: 8px; position: absolute; }
</style>
<script src="../rest/web/openlayers3/ol.js"></script>
<link rel='stylesheet' href='../rest/web/openlayers3/ol.css' type='text/css'>
<script type="text/javascript">
function init(){
function ScaleControl(opt_options) {
  var options = opt_options || {};

  var element = document.createElement('div');
  element.setAttribute('id', 'scale');
  element.className = 'ol-scale-value';

  ol.control.Control.call(this, {
    element: element,
    target: options.target
  });

};
ol.inherits(ScaleControl, ol.control.Control);
ScaleControl.prototype.setMap = function(map) {
  map.on('postrender', function() {
    var view = map.getView();
    var resolution = view.getResolution();
    var dpi = 96.0;
    var mpu = map.getView().getProjection().getMetersPerUnit();
    var scale = resolution * mpu * 39.37 * dpi;

    if (scale >= 9500 && scale <= 950000) {
        scale = Math.round(scale / 1000) + 'K';
    } else if (scale >= 950000) {
        scale = Math.round(scale / 1000000) + 'M';
    } else {
        scale = Math.round(scale);
    } 
    document.getElementById('scale').innerHTML =  'Scale = 1 : ' + scale;
  }, this);
  ol.control.Control.prototype.setMap.call(this, map);
}

function ZoomControl(opt_options) {
  var options = opt_options || {};

  var element = document.createElement('div');
  element.setAttribute('id', 'zoom');
  element.className = 'ol-zoom-value';

  ol.control.Control.call(this, {
    element: element,
    target: options.target
  });

};
ol.inherits(ZoomControl, ol.control.Control);
ZoomControl.prototype.setMap = function(map) {
  map.on('moveend', function() {
    var view = map.getView();
    document.getElementById('zoom').innerHTML =  'Zoom level = ' + view.getZoom();
  }, this);
  ol.control.Control.prototype.setMap.call(this, map);
}

var gridsetName = 'EPSG:2436_ChaoYangRoadVector';
var gridNames = ['EPSG:2436_ChaoYangRoadVector:0', 'EPSG:2436_ChaoYangRoadVector:1', 'EPSG:2436_ChaoYangRoadVector:2', 'EPSG:2436_ChaoYangRoadVector:3', 'EPSG:2436_ChaoYangRoadVector:4', 'EPSG:2436_ChaoYangRoadVector:5', 'EPSG:2436_ChaoYangRoadVector:6', 'EPSG:2436_ChaoYangRoadVector:7'];
var baseUrl = '../service/wmts';
var style = '';
var format = 'image/png';
var infoFormat = 'text/html';
var layerName = 'ChaoYangRoadVector';
var projection = new ol.proj.Projection({
code: 'EPSG:2436',
units: '',
axisOrientation: 'neu'
});
var resolutions = [38.21834518669038, 19.109040301413938, 9.554387858775717, 4.777061637456608, 2.3886631106595546, 0.5971657776648887, 0.2984505969011938, 0.1492252984505969];
baseParams = ['VERSION','LAYER','STYLE','TILEMATRIX','TILEMATRIXSET','SERVICE','FORMAT'];

params = {
  'VERSION': '1.0.0',
  'LAYER': layerName,
  'STYLE': style,
  'TILEMATRIX': gridNames,
  'TILEMATRIXSET': gridsetName,
  'SERVICE': 'WMTS',
  'FORMAT': format
};

function constructSource() {
  var url = baseUrl+'?'
  for (var param in params) {
    if (baseParams.indexOf(param.toUpperCase()) < 0) {
      url = url + param + '=' + params[param] + '&';
    }
  }
  url = url.slice(0, -1);

  var source = new ol.source.WMTS({
    url: url,
    layer: params['LAYER'],
    matrixSet: params['TILEMATRIXSET'],
    format: params['FORMAT'],
    projection: projection,
    tileGrid: new ol.tilegrid.WMTS({
      tileSize: [256,256],
      extent: [-5123300.0,286890.90678181313,531792.1005842015,1.00023E7],
      origin: [-5123300.0, 1.00023E7],
      resolutions: resolutions,
      matrixIds: params['TILEMATRIX']
    }),
    style: params['STYLE'],
    wrapX: true
  });
  return source;
}

var layer = new ol.layer.Tile({
  source: constructSource()
});

var view = new ol.View({
  center: [0, 0],
  zoom: 2,
  resolutions: resolutions,
  projection: projection,
  extent: [-5123300.0,286890.90678181313,531792.1005842015,10002300.0]
});

var map = new ol.Map({
  controls: ol.control.defaults({attribution: false}).extend([
    new ol.control.MousePosition(),
    new ScaleControl(),
    new ZoomControl()
  ]),
  layers: [layer],
  target: 'map',
  view: view
});
map.getView().fit([499475.1334838867,293614.9572753906,524636.3444824219,327119.98010253906], map.getSize());

window.setParam = function(name, value) {
  if (name == "STYLES") {
    name = "STYLE"
  }
  params[name] = value;
  layer.setSource(constructSource());
  map.updateSize();
} 

map.on('singleclick', function(evt) {
  document.getElementById('info').innerHTML = '';

  var source = layer.getSource();
  var resolution = view.getResolution();
  var tilegrid = source.getTileGrid();
  var tileResolutions = tilegrid.getResolutions();
  var zoomIdx, diff = Infinity;

  for (var i = 0; i < tileResolutions.length; i++) {
      var tileResolution = tileResolutions[i];
      var diffP = Math.abs(resolution-tileResolution);
      if (diffP < diff) {
          diff = diffP;
          zoomIdx = i;
      }
      if (tileResolution < resolution) {
        break;
      }
  }
  var tileSize = tilegrid.getTileSize(zoomIdx);
  var tileOrigin = tilegrid.getOrigin(zoomIdx);

  var fx = (evt.coordinate[0] - tileOrigin[0]) / (resolution * tileSize[0]);
  var fy = (tileOrigin[1] - evt.coordinate[1]) / (resolution * tileSize[1]);
  var tileCol = Math.floor(fx);
  var tileRow = Math.floor(fy);
  var tileI = Math.floor((fx - tileCol) * tileSize[0]);
  var tileJ = Math.floor((fy - tileRow) * tileSize[1]);
  var matrixIds = tilegrid.getMatrixIds()[zoomIdx];
  var matrixSet = source.getMatrixSet();

  var url = baseUrl+'?'
  for (var param in params) {
    if (param.toUpperCase() == 'TILEMATRIX') {
      url = url + 'TILEMATRIX='+matrixIds+'&';
    } else {
      url = url + param + '=' + params[param] + '&';
    }
  }

  url = url
    + 'SERVICE=WMTS&REQUEST=GetFeatureInfo'
    + '&INFOFORMAT=' +  infoFormat
    + '&TileCol=' +  tileCol
    + '&TileRow=' +  tileRow
    + '&I=' +  tileI
    + '&J=' +  tileJ;

  if (url) {
    document.getElementById('info').innerHTML = 'Loading... please wait...';
    var xmlhttp = new XMLHttpRequest();    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
           if (xmlhttp.status == 200) {
               document.getElementById('info').innerHTML = xmlhttp.responseText;
           }
           else {
              document.getElementById('info').innerHTML = '';
           }
        }
    }
  xmlhttp.open('GET', url, true);
  xmlhttp.send();
  }
});
}
</script>
</head>
<body onload="init()">
<div id="params"></div>
<div id="map"></div>
<div id="info"></div>
</body>
</html>

adminGoeserver-geowebcache=secured