도움이 필요합니다. Geoserver와 WMS의 개념을 처음 접했고 아주 기본적인 도움을 찾고 있습니다. Geoserver를 다운로드하여 설치하고, 레이어 등을 설치하는 작업을하고 있지만,이 정보를 내 웹 사이트로 가져 오는 방법을 모릅니다. 필자가 언급 한 바와 같이 내가 처음 뭘하고 있는지 전혀 모르겠다. 단계별 도움을 얻기 위해 웹 검색을 시도했지만 shapefiles를 업로드하고 저장하면 어떻게해야할지 또는 무엇을 해야할지 놓칠 수있다. 지오 서버.Geoserver 및 WMS
정보의 올바른 방향으로 도움이나 조언을 주시면 감사하겠습니다.
감사
스티브
Geoserver가 자신의 웹 서버 (부두)를 사용하거나 실행할 수 있습니다, 또는 톰캣에 대한 ".WAR 아카이브"등. 즉, 웹 서버에 배포하려면 웹 사이트를 호스팅하는 실제 컴퓨터에 소프트웨어를 설치해야합니다 (일반적인 방법은 웹 서버가 이미 tomcat을 실행하고있을 때 .war 아카이브를 배포하는 것입니다).
geoserver의 임무는 WMS 프로토콜에서 제공하는 사양에 따라지도 타일을 렌더링하는 것입니다. 실제 웹 사이트에 이러한 타일을 포함하고 맵으로 표시하려면 전체 사용자 상호 작용을 처리하는 OpenLayers와 같은 클라이언트 응용 프로그램이 필요합니다.
http://docs.geoserver.org/stable/en/user/installation/war.html
나는 relet에 동의합니다. Geoserver 웹 인터페이스 (왼쪽 하단)에서 "미리보기"버튼을 클릭하기 만하면됩니다. 여기서 오픈 레이어로 레이어를 미리 볼 수 있습니다. 레이어가 보이면 페이지의 HTML + JS 코드를 살펴보십시오. 거기에서 복사 & 붙여 넣기를 시작할 수 있습니다 ...
테스트 웹 페이지를 만든 다음 해당 테스트 페이지에서 사용중인 레이어를 호출했습니다.
자료 = 새로운 OpenLayers.Layer.WMS ("CMA 정보 - 거리" "http://test.com/geoserver/test/gwc/service/wms" {층 "Base_test"투명 : 사실, 형식 "이미지/GIF"완충액 : 0} 타일 : 당신은 당신이 그것을 그 후
를 저장하기 위해 직장을 선택하라는 메시지가 을 geoserver하는 모양 파일을 추가 사실 }
);
Base.isBaseLayer = true;
Base.setOpacity(1);
Base.setVisibility(true);
Base.displayOutsideMaxExtent = 0;
map.addLayers([Base]);
//map.setOptions(zoomLevel = 19);
는 레이어로 이동 클릭 는 데이터 를 추가 한 장소를 선택하여 새 레이어를 를 추가하고, 예컨대 EPSG SRS 지정 : 4326
을 계산 경계 상자
및 게시를 클릭합니다.
다음 Geoserver의 그것의 데이터 레이어 (지도에 대한 대부분의 이미지)를 구성 할 때 OPenlayer이
그래서, 당신은 URL이라고 무엇을 사용하여 제공됩니다 그냥 을 발표하고 clicke 레이어를 찾기 미리보기를 레이어로 이동 엔드 포인트. 응용 프로그램에서 이미지 (타일)를 요청하고지도를 만드는 위치에 대한 링크입니다.Postgis 데이터베이스의 KML, Shapefiles를 사용하는 경우에도 상관 없습니다. 서버는이를 처리하고 해당 엔드 포인트를 통해 비주얼 정보를 사용할 수있게합니다.
웹에서 가장 많이 사용되는 것은 OpenLayers이며, 마녀는 간단한 HTML을 사용하여 하드 프로세스를 관리 할 수있는 Javascript 라이브러리입니다.
내가 함께 일하는 좋은 사례는 here입니다. 내가 우는 소리 hightlighting있어
주 라인 :
var ccounties = new OpenLayers.Layer.WMS(
"Counties of Colorado - Untiled",
"http://thisawsomesite.com:8080/geoserver/wms",
{
width: '426',
srs: 'EPSG:4269',
layers: 'geosolutions:Counties',
height: '512',
styles: '',
format:'image/png'**
},
{singleTile: true, ratio: 1}
);
map.addLayer(ccounties);
http://thisawsomesite.com:8080/geoserver/wms ->이 당신에게 타일을 줄 것이다 geoserver 서버의 URL입니다. WMS는 데이터를 해당 이미지로 변환하는 서비스입니다.
layers : 'geosolutions : Counties', -> 이것은 "geosolutions"작업 영역에서 "카운티"레이어를 원하는 요청을 통해 geoserver에게 알려줍니다. 아주 간단하지, 안 그래?
** styles : ''-> 여기서 내가 만든 스타일의 이름을 알려줍니다.
형식 : 'image/png' ->이 형식은 이미지 형식입니다 (image/png 또는 image/jpeg가 가장 많이 사용되지만 더 많습니다). jpeg는 일반적으로 작지만 png는 투명도/불투명도 설정이 필요할 때 사용할 수있는 옵션입니다.
srs입니다. 나는 그것이 여기에 필요하다는 것을 기억하지 못한다. 이것이 남아 있다면 기본지도 투영이 이루어져야합니다.
OpenLayers 응용 프로그램을 만드는 방법을 잘 모를 경우 Geoserver는 가지고있는 계층의 예를 제공합니다. 왼쪽 메뉴에서 레이어 미리보기로 이동하고 간단한 예제를 보려면 "OpenLayers"를 클릭하십시오. 해당 링크 바로 옆의 메뉴에서 정보를 검색하는 여러 가지 옵션이 있음을 알 수 있습니다.
다른 링크는 유용 찾을 수 있습니다 :
dev.openlayers.org/releases/OpenLayers-2.13.1/examples/getfeatureinfo-control.html dev.openlayers.org/releases/OpenLayers-2.13.1/examples/ dev.openlayers.org/apidocs/files/OpenLayers-js.html
이 정보가 도움이되기를 바랍니다. See'ya
지도를 작성하려는 HTML 페이지에 OpenLayers/javascript 코드를 추가해야 할 필요가 있음을 이미 입증했습니다. 아래는 페이지에 맵을 추가하는 몇 가지 기본 OpenLayers 코드가있는 HTML 페이지입니다.
보고/사용하는 비트는 다음과 OpenLayers/javascript에서 태그입니다. Geoserver와 작업 공간 및 레이어 이름을 URL로 대체해야합니다. bounds와 maxResolution은 England와 Wales로 설정되어 있으며 투영법은 British National Grid로 설정되어 있으므로 관심 영역으로 변경해야 할 수 있습니다.
자바 스크립트에 익숙하지 않은 분은 http://www.w3schools.com/js/default.asp과 함께 OpenLayers 설명서를 읽어보십시오.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="Description" content="Central-Geo">
<title>Map Test Page</title>
<style type="text/css" media="screen">
html, body, div, header, footer, aside, nav, article, section { margin: 0; padding: 0; }
header, footer, aside, nav, article, section { display: block; }
body { color: #333; font: 12px Helvetica, Arial, sans-serif; line-height: 18px; }
h2 { color: #333; }
a { color: #337810; }
p { margin: 0 0 18px; }
#container { width: 760px; margin: 0 auto;}
/* Header */
header { background: #006666; border-bottom: 2px solid #aaa; }
header h1 { color: #fff; margin: 0 0 3px; padding: 24px 18px 0; }
header p { color: #ccc; font-size: 11px; font-weight: bold; padding: 0 18px; }
/* Content Style */
nav { border-bottom: 1px solid #ccc; margin-right: 18px; }
nav ul { padding: 0 18px 9px; }
#extra { margin-left: 18px; }
#extra small { font-size: 11px; line-height: 18px; }
#content { border-bottom: 1px solid #ccc; margin-left: 18px; }
#content p, #extra p { padding-right: 18px; }
/* Content Positioning and Size */
nav { float: right; width: 175px; }
#content { float: left; width: 540px; }
#extra { float: left; width: 540px; } /* Footer */
footer { background: #666; border-bottom: 2px solid #aaa; clear: left; width: 100%; }
footer a { color: #fff; }
footer p { color: #ccc; margin: 0; padding: 0 18px 10px; }
footer ul { border-bottom: 1px solid #999; list-style: none; margin: 0 18px 6px; padding: 10px 0 6px; }
footer li { display: inline; font-size: 11px; font-weight: bold; padding-right: 5px; }
.map { height: 400px; width: 100%: margin: 0; padding: 0}
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<header>
<h1>Test Map Page heading</h1>
<p class="description">A test page for a map</p>
</header>
<div id="wrapper">
<section id="content">
<h2>Map Heading Goes Here</h2>
<div id="map" class="map">
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var bounds = new OpenLayers.Bounds(
92599.19919326127, 1484.4293913718284,
695626.1392662271, 670208.9526868482
);
var options = {
maxExtent: bounds,
maxResolution: 1700,
projection: "EPSG:27700",
};
var map = new OpenLayers.Map('map', options);
var wms = new OpenLayers.Layer.WMS(
"Geoserver layers ", "http://urltoyourgeoserver/geoserver/yourworkspace/wms",
{'layers': 'yourlayer',
styles: '',
format:'image/png'});
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</div>
</div>
<nav>
<h2>Navigation Here</h2>
<ul>
<li><a href="">Navigation 1</a></li>
<li><a href="">Navigation 2</a></li>
<li><a href="">Navigation 3</a></li>
<li><a href="">Navigation 4</a></li>
<li><a href="">Navigation 5</a></li>
<li><a href="">Navigation 6</a></li>
</ul>
</nav>
<section id="extra">
<h2>Extra Stuff Goes Here</h2>
<p>Sometimes this would be called a <em>sidebar</em>, but it doesn't always have to be on the side to be called a <em>sidebar</em>. Sidebars can be on tops of things, below things, but they are usually beside things – hence it being a called a sidebar.</p>
<p><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</small></p>
</section>
<footer>
<ul>
<li><a href="">Navigation 1</a></li>
<li><a href="">Navigation 2</a></li>
<li><a href="">Navigation 3</a></li>
<li><a href="">Navigation 4</a></li>
<li><a href="">Navigation 5</a></li>
<li><a href="">Navigation 6</a></li>
</ul>
<p>Footer stuff goes here. Copyright, disclaimers – stuff like that.</p>
</footer>
</div>