ホーム » GeoServer (ページ 2)

GeoServer」カテゴリーアーカイブ

GeoServer上のラインをOpenLayersに色分け表示

GeoServer上に鉄道のデータをインポート

これを鉄道会社の種別(1~5)ごとに色分けしてOpenLayers上に表示

当初はOpenLayersのスタイルで対応を行おうとしたが、どうもこれはOpenLayers.Layer.WMSには使えないみたい

結局、GeoServerの機能でスタイルを作成してレイヤにスタイルを設定して解決

以下のスタイルを作成
[code]
<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0"
xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd"
xmlns="http://www.opengis.net/sld"
xmlns:ogc="http://www.opengis.net/ogc"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<NamedLayer>
<Name>railroad ex</Name>
<UserStyle>
<Title>SLD Cook Book: railroad ex</Title>
<FeatureTypeStyle>
<Rule>
<Name>rail-1</Name>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>n02_002</ogc:PropertyName>
<ogc:Literal>1</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">#009933</CssParameter>
<CssParameter name="stroke-width">2</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
</FeatureTypeStyle>
<FeatureTypeStyle>
<Rule>
<Name>rail-2</Name>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>n02_002</ogc:PropertyName>
<ogc:Literal>2</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">#0055CC</CssParameter>
<CssParameter name="stroke-width">3</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
</FeatureTypeStyle>
<FeatureTypeStyle>
<Rule>
<Name>rail-3</Name>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>n02_002</ogc:PropertyName>
<ogc:Literal>3</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">#FF0000</CssParameter>
<CssParameter name="stroke-width">6</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
</FeatureTypeStyle>
<FeatureTypeStyle>
<Rule>
<Name>rail-4</Name>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>n02_002</ogc:PropertyName>
<ogc:Literal>4</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">#FF0000</CssParameter>
<CssParameter name="stroke-width">6</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
</FeatureTypeStyle>
<FeatureTypeStyle>
<Rule>
<Name>rail-5</Name>
<ogc:Filter>
<ogc:PropertyIsEqualTo>
<ogc:PropertyName>n02_002</ogc:PropertyName>
<ogc:Literal>5</ogc:Literal>
</ogc:PropertyIsEqualTo>
</ogc:Filter>
<LineSymbolizer>
<Stroke>
<CssParameter name="stroke">#FF0000</CssParameter>
<CssParameter name="stroke-width">6</CssParameter>
</Stroke>
</LineSymbolizer>
</Rule>
</FeatureTypeStyle>
</UserStyle>
</NamedLayer>
</StyledLayerDescriptor>
[/code]
上記のスタイルをレイヤに関連付けて対応
スクリーンショット 2014-01-15 18.07.18

念の為、OpenLayersのスタイルについて

参考サイト

[code]
new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
strokeColor: "white",
strokeWidth: 1
}, {
rules: [
new OpenLayers.Rule({
filter: new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.LESS_THAN,
property: "shape_area",
value: 3000
}),
symbolizer: {
fillColor: "olive"
}
}),
new OpenLayers.Rule({
elseFilter: true,
symbolizer: {
fillColor: "navy"
}
})
]
})
})
[/code]

スタイルの変更
スタイルはGeoServer上で予めレイヤに設定する。
以下の書式でJavaScript側からも変更が可能
※GeoServer上でrailroad2というスタイルを作成済み
[code]
railroad = new OpenLayers.Layer.WMS(
"Tokyo:railroad", "../geoserver/Tokyo/wms",
{
STYLES: ‘railroad2’,
LAYERS: ‘Tokyo:VIEW_RAILROAD’,
format: ‘image/png’,
transparent: true,
viewparams: ‘road_type:2’
},
{
singleTile: true,
ratio: 1,
isBaseLayer: false,
yx : {‘EPSG:4326’ : true}
}
);
[/code]

OpenLayersに電子国土(背景)とGeoServer上の行政ポリゴンを表示

以下はソース
[code]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>K4map sample1-0</title>
<script type="text/javascript" src="http://portal.cyberjapan.jp/sys/OpenLayers-2.11/OpenLayers.js" charset="UTF-8"></script>
<script type="text/javascript" src="./lib/webtis_v4.js" charset="UTF-8"></script>
<link rel="stylesheet" href="http://portal.cyberjapan.jp/sys/v4/css/webtis.css" type="text/css">
<link rel="stylesheet" href="./css/theme/default/style.css" type="text/css">
<script type="text/javascript">
var cyber;

/*
var initCX = 139.1932638; // 初期中心:黒檜山(群馬県赤城山の最高峰)
var initCY = 36.56036769; // 初期中心:黒檜山(群馬県赤城山の最高峰)
var initScale = 16; // ここでは1~18までの数値、18を入れると白紙になる
*/
var initScale = 6; // ここでは1~18までの数値、18を入れると白紙になる
//初期の経度
var initCX = 139.4;
//初期の緯度
var initCY = 35.4;
//初期のズームレベル
//※ここで設定するズームレベルはデータセットの最小ズームレベルが0になる
//※デフォルトデータセットでは「ズームレベル5」が0になる
var initZoomLv = 0;

//真球メルカトル投影(電子国土WebシステムVer.4もこれに準拠)を定義
var projection900913 = new OpenLayers.Projection("EPSG:900913");
//真球メルカトル投影(電子国土WebシステムVer.4もこれに準拠)を定義
var projection3857 = new OpenLayers.Projection("EPSG:3857");
//等経緯度投影を定義
var projection4326 = new OpenLayers.Projection("EPSG:4326");

function init(){

//真球メルカトル投影のときの最大範囲(単位はm)
var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508);

//真球メルカトル投影のときの最大範囲に範囲を制限
var restrictedExtent = maxExtent.clone();

//真球メルカトル投影のときの最大解像度
var maxResolution = 156543.0339;

//地図表示画面のオプション設定
var options = {
//「controls」を設定することで、デフォルトのコントロールを破棄してコントロールを再設定
controls: [
//地図マウスイベントのハンドル設定。
new OpenLayers.Control.Navigation({mouseWheelOptions: {interval: 100}}),

//左上のパンズームバーを設定
new OpenLayers.Control.PanZoomBar(),

//キーボードをデフォルトに設定
new OpenLayers.Control.KeyboardDefaults(),

//国土地理院著作表示
//※OpenLayrsサイトを作るときは必ずこれを書くこと
new OpenLayers.Control.Attribution()
],

//背景地図の地理座標系
projection: projection900913,

//表示の地理座標系
displayProjection: projection4326,

//背景地図の単位
units: "m",

//背景地図の最大解像度
maxResolution: maxResolution,

//背景地図の最大範囲
maxExtent: maxExtent,

//背景地図の表示制限範囲
restrictedExtent: restrictedExtent
};

//OpenLayers APIのMapクラスからインスタンスを作成
cyber = new OpenLayers.Map(‘cambus’, options);

//スケールバーコントロール表示(最大ピクセル150、下段単位無、EPSG:900913)
cyber.addControl(new OpenLayers.Control.ScaleLine({maxWidth:150,bottomOutUnits: "", bottomInUnits: "",geodesic:true}));

//背景地図のデフォルトデータセットを定義
var dataSet = {
5:{dataId:"JAIS"},
6:{dataId:"JAIS"},
7:{dataId:"JAIS"},
8:{dataId:"JAIS"},
9:{dataId:"BAFD1000K"},
10:{dataId:"BAFD1000K"},
11:{dataId:"BAFD1000K"},
12:{dataId:"BAFD200K"},
13:{dataId:"BAFD200K"},
14:{dataId:"BAFD200K"},
15:{dataId:"DJBMM"},
16:{dataId:"DJBMM"},
17:{dataId:"DJBMM"},
18:{dataId:"FGD"}
};

//電子国土WebシステムVer.4背景地図レイヤーインスタンスを作成。
//上で定義したデータセットを利用
webtisMap = new webtis.Layer.BaseMap("webtismap",{dataSet:dataSet});

//背景地図レイヤーをMapに追加
cyber.addLayer(webtisMap);

untiled = new OpenLayers.Layer.WMS(
"Tokyo:N03-13_13_130401 – Untiled", "../geoserver/Tokyo/wms",
{
LAYERS: ‘Tokyo:N03-13_13_130401’,
STYLES: ”,
format: ‘image/png’,
transparent: true
},
{
opacity: 0.5,
singleTile: true,
ratio: 1,
isBaseLayer: false,
yx : {‘EPSG:4326’ : true}
}
);

cyber.addLayer(untiled);

//初期の中心座標を指定(経緯度で入力して、内部的に真球メルカトル座標に変換して表示)
cyber.setCenter(new OpenLayers.LonLat(initCX,initCY).transform(projection4326,projection900913), initZoomLv);
}
</script>
</head>
<body onload="init();">
<div id="cambus" style="width:1000px;height:600px;"></div>
</body>
</html>
[/code]

表示例

スクリーンショット 2014-01-15 13.09.06

GeoServerの設定

http://localhost:8080/geoserver/web/をブラウザで表示

スクリーンショット 2014-01-14 01.08.47

アカウント admin/geoserverでGeoServerにログイン

スクリーンショット 2014-01-14 01.22.59

最初にデフォルトでインストール済のデータを表示してみる

GeoServerの管理サイトを開き、Data-Layer Previewを選択

スクリーンショット 2014-01-14 01.53.25

スクリーンショット 2014-01-14 01.53.36

tasmaniaのOpenLayersを選択するとデータが表示される

スクリーンショット 2014-01-14 01.54.05

Shapeファイルを表示

東京の行政Shapeファイルを表示してみる

ディレクトリGEOSERVER_DATA_DIR\DATA\Tokyoを作成

※GEOSERVER_DATA_DIRはデフォルト(未設定)では「C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\geoserver\data」に設定されている
任意の場所に設定するときは環境変数で設定

GEOSERVER_DATA_DIR\DATA\TokyoにShape(N03-13_13_130401.shp)ファイルをコピー

ワークスペースの作成

DATA-Workspacesを選択してWorkspace画面を表示

スクリーンショット 2014-01-14 07.24.48

create workspaceを選択、名称とURIを入力(名称とURIは任意でよい?)

スクリーンショット 2014-01-14 07.25.50

workspaceが正しく作成されるとworkspaceの一覧に表示される

スクリーンショット 2014-01-14 07.26.45

作成したworkspaceを選択してworkspaceの編集ページを表示

スクリーンショット 2014-01-14 07.28.18

WCF、WFS、WMSのチェックをONにする(必要ないかも)

Storeの追加

DATA-Stores-Add New Storeを選択

スクリーンショット 2014-01-14 07.30.51

ShapeFileを選択し、ShapeFileの情報を入力

Workspaceには先ほど作成したWorkspaceを選択

データソースにはShapeファイルの名称を設定

ShapeFile LocationにはShapeファイルのフルパスを設定

スクリーンショット 2014-01-14 07.36.22

保存すると追加したレイヤが表示される。

スクリーンショット 2014-01-14 07.43.00

publishをクリックしてレイヤ情報を編集

Declare SRSを設定

compute from data、compute from native boundsをクリックしてBounding Boxesを更新

clip_3

スクリーンショット 2014-01-14 08.31.23

スクリーンショット 2014-01-14 08.31.32

GeoServerをインストール(その2)

サービスマネージャーでTOMCATの動作を確認した後にTOMCATの管理サイトを開く

ブラウザでhttp://localhost:8080/を開いて管理サイト(?)を開く

tomcat1

ページ上部の「Server Status」をクリックすると以下のページを表示

スクリーンショット 2014-01-13 21.36.08

「Manager APP」をクリックすると以下のページを表示

スクリーンショット 2014-01-13 21.36.29

スクリーンショット 2014-01-13 21.36.37

「Manager APP」をクリックすると以下のページを表示

スクリーンショット 2014-01-13 21.37.08

スクリーンショット 2014-01-13 21.37.19

GeoServerを以下よりダウンロード

GeoServer HOME-ダウンロード-Stable-Web Arciveよりgeoserver-2.4.3-war.zipをダウンロード、解凍

GeoServerにはインストーラー、バイナリ、Web Archiveがある。ここでは既にTOMCAT、JREはインストール済なのでWeb Archiveをダウンロード

TOMCATのアップロードファイルサイズの最大を60MBに設定
C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\manager\WEB-INF\web.xmlを変更
変更前


  
  52428800
  52428800
  0

変更後



62914560
62914560
0

TOMCATの管理画面を開いてgeoserver-2.4.3-war.zipより解凍されたgeoserver.warを指定して配備ボタンを押す

スクリーンショット 2014-01-14 00.26.51

完了するとアプリケーションの一覧にgeoserverが追加されている

スクリーンショット 2014-01-14 01.01.38

GeoServerをインストール

Windows2008にGEoServerをインストール

参考にしたサイト

http://www.youtube.com/watch?v=YEOA8WWWVCw

サーブレットのコンテナにはTOMCATを使用。

(HTTPサーバーもTOMCATのそれを使用する予定)

JREのインストール

JAVA SEのダウンロードページを開いてJREをダウンロード

本来はJRE(jre-7u45-windows-x64.exe)でよいと思うが念の為にJDK、SERVER JREもダウンロード

jre-7u45-windows-x64.exeを実行してデフォルトの設定で以下のインストール

C:\Program Files\Java\jre7\bin

環境変数JRE_HOMEにインストール先を設定

通常JDKをインストールしたときはJAVA_HOMEを設定するが、JREをインストールしたときはJRE_HOMEを設定

JAVA_HOMEにJREのインストール先を設定するとTOMCATでエラーになる

TOMCATのインストール

TOMCAT8はRCなのでTOMCAT7をダウンロード

(7.0.47の32-bit/64-bit Windows Service Installer。apache-tomcat-7.0.47.exe)

apache-tomcat-7.0.47.exeを実行してインストール開始

tomcat_install01

tomcat_install02

tomcat_install03

tomcat_install04

tomcat_install05

tomcat_install06

tomcat_install07

TOMCAT管理者のアカウントはadmin/admin

環境変数の設定

CATALINA_HOMEにTOMCATのインストール先のディレクトリを設定

GeoServerを創める

とりあえずGeoServer関連の資料のリンク

http://blog.godo-tys.jp/category/geoserver/

http://live.osgeo.org/ja/overview/geoserver_overview.html

http://www.ibm.com/developerworks/jp/opensource/library/os-geoserver/

http://blog.godo-tys.jp/2013/06/09/2220/

http://docs.geoserver.org/latest/en/user/installation/windows/index.html

http://jira.codehaus.org/browse/GEOS