こいつの続きです。
http://blog.goo.ne.jp/pianyi/e/f7c4c334f5e3199c0d886d708e991832
一応、起動したという前提の基、テーブルを作成しましょう。
★データを保持するテーブルを作成しようっ！
作成するテーブルSQLは下記です。
注意点：
1.テーブル名"Test"は適当に修正してください。
2.OWNER名"postgres"も環境に合わせて修正してください。
3.必ずシーケンスを作ってから、テーブルを作ります。この2つは対で存在させます。
4.シーケンスの命名規約"テーブル名_シリアルキーカラム名_seq"
5.プライマリキーの命名規約"テーブル名_pkey"
******************************ここからSQL******************************
-- Sequence: "Test_gid_seq"
DROP SEQUENCE "Test_gid_seq"; -- 削除は適当に…
CREATE SEQUENCE "Test_gid_seq" -- テーブル名変えたら変更してね
INCREMENT 1
MINVALUE 1
MAXVALUE 9223372036854775807 -- MAXはコピペ
START 10
CACHE 1;
ALTER TABLE "Test_gid_seq" -- ここが規約どおりじゃないとダメ
OWNER TO postgres; -- オーナーは変更してね
-- Table: "Test"
DROP TABLE "Test"; -- 削除は適当に…
CREATE TABLE "Test" -- テーブル名は適当に…
(
gid serial NOT NULL, -- 必須のシーケンスカラム
id character varying(28), -- 何でも良いので属性カラム(無くても良いです)
-- 必要なら名前とかの属性を増やしてください。
data geometry(MultiPolygon), -- ここに図形データが格納されます(カラム名がとても重要)
CONSTRAINT "Test_pkey" PRIMARY KEY (gid ) -- プライマリキーは、シーケンスカラムを指定
)
WITH (
OIDS=FALSE
);
ALTER TABLE "Test"
OWNER TO postgres;
******************************ここまでSQL******************************
geometry型の()内に記述する内容：
MultiPolygon：図形情報の場合(三角、四角のような図形が閉じるもの)
MultiLineString：線情報の場合(点は複数有って、線になるもの)
Point：点情報の場合(1点のみ)
上から、ポリゴン、ライン、ポイント と呼ばれています。
必要なデータ毎に設定してください。
また、geometry型のカラム名は、コーディングでとても重要です。
★HTMLファイルの作成・配置
HTMLファイルを作ります。(ついでにOpenLayersも置きます)
[Apacheインストールフォルダ]\Apache2.2\htdocs\Test\index.html
[Apacheインストールフォルダ]\Apache2.2\htdocs\Test\openlayers\
"Test"はなんでも良いです。URLの一部になります。
"index.html"はそのままがよいでしょう。URLの一部になります。
にしても、このブログでソースを書くと、見にくいなぁ～
******************************ここからindex.html******************************
******************************ここまでindex.html******************************
コレで、HTML(OpenLayers)の指定は終わりです。
さて、HTML(JavaScript)の細かい説明はまた今度…
ついでに、GeoServerの設定方法もまた今度…
簡単に言うと…
1.http://192.168.51.219:8081/geoserver/web/ にアクセス、ログインする
2."Add stores"をクリックする。(ツリーのStores → Add new Store でも可能)
3.Storeを作成する。(Postgresqlへの接続を作ります)
WorkSpaceは"cite"にしたので、HTMLが、"cite"になってます。
WorkSpaceを変更する場合は、「http://www.opengeospatial.net/cite」が変わるので注意
4."Add layers"をクリックする。(ツリーのLayers → Add a new resource でも可能)
5.Layerを作る。
"Add layer from"は、3で作ったStore を選択すること
選択すると、一覧が出てくるので、接続するテーブルを探し、"Publish"をクリック
6."Declared SRS"には、Findボタンを押して、"4326"を検索すること。「EPSG:4326」と表示されるはず。
"Native Bounding Box"には、"Compute from data"をクリックすると、勝手に入ります。
"Lat/Lon Bounding Box"には、"Native Bounding Box"の値をコピーしてください。
"Feature Type Details"は、デフォルトで入りますが、"Reload feature type"リンクをクリックしてください。
ちなみに、テーブルを変更した場合は、"Reload feature type"をクリックするだけで反映されます。
7."Name"で指定したものが、レイヤー名になります。 → HTMLファイルを修正してください。
後は、
http://localhost:8080/Test/
にアクセスすれば、地図が出ます。
右上のボタンを押して、図形の作成、編集、削除、保存を行うことが出来るはずです。
詳しくはまた今度…
今度があれば…
http://blog.goo.ne.jp/pianyi/e/f7c4c334f5e3199c0d886d708e991832
一応、起動したという前提の基、テーブルを作成しましょう。
★データを保持するテーブルを作成しようっ！
作成するテーブルSQLは下記です。
注意点：
1.テーブル名"Test"は適当に修正してください。
2.OWNER名"postgres"も環境に合わせて修正してください。
3.必ずシーケンスを作ってから、テーブルを作ります。この2つは対で存在させます。
4.シーケンスの命名規約"テーブル名_シリアルキーカラム名_seq"
5.プライマリキーの命名規約"テーブル名_pkey"
******************************ここからSQL******************************
-- Sequence: "Test_gid_seq"
DROP SEQUENCE "Test_gid_seq"; -- 削除は適当に…
CREATE SEQUENCE "Test_gid_seq" -- テーブル名変えたら変更してね
INCREMENT 1
MINVALUE 1
MAXVALUE 9223372036854775807 -- MAXはコピペ
START 10
CACHE 1;
ALTER TABLE "Test_gid_seq" -- ここが規約どおりじゃないとダメ
OWNER TO postgres; -- オーナーは変更してね
-- Table: "Test"
DROP TABLE "Test"; -- 削除は適当に…
CREATE TABLE "Test" -- テーブル名は適当に…
(
gid serial NOT NULL, -- 必須のシーケンスカラム
id character varying(28), -- 何でも良いので属性カラム(無くても良いです)
-- 必要なら名前とかの属性を増やしてください。
data geometry(MultiPolygon), -- ここに図形データが格納されます(カラム名がとても重要)
CONSTRAINT "Test_pkey" PRIMARY KEY (gid ) -- プライマリキーは、シーケンスカラムを指定
)
WITH (
OIDS=FALSE
);
ALTER TABLE "Test"
OWNER TO postgres;
******************************ここまでSQL******************************
geometry型の()内に記述する内容：
MultiPolygon：図形情報の場合(三角、四角のような図形が閉じるもの)
MultiLineString：線情報の場合(点は複数有って、線になるもの)
Point：点情報の場合(1点のみ)
上から、ポリゴン、ライン、ポイント と呼ばれています。
必要なデータ毎に設定してください。
また、geometry型のカラム名は、コーディングでとても重要です。
★HTMLファイルの作成・配置
HTMLファイルを作ります。(ついでにOpenLayersも置きます)
[Apacheインストールフォルダ]\Apache2.2\htdocs\Test\index.html
[Apacheインストールフォルダ]\Apache2.2\htdocs\Test\openlayers\
"Test"はなんでも良いです。URLの一部になります。
"index.html"はそのままがよいでしょう。URLの一部になります。
にしても、このブログでソースを書くと、見にくいなぁ～
******************************ここからindex.html******************************
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="./openlayers/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="./openlayers/theme/default/style.mobile.css" type="text/css" />
<style type="text/css">
/* Custom editing toolbar */
.customEditingToolbar {
float: right;
right: 0px;
height: 30px;
width: 200px;
}
.customEditingToolbar div {
float: right;
margin: 5px;
width: 24px;
height: 24px;
}
.olControlNavigationItemActive {
background-image:
url("./openlayers/theme/default/img/editing_tool_bar.png");
background-repeat: no-repeat;
background-position: -103px -23px;
}
.olControlNavigationItemInactive {
background-image:
url("./openlayers/theme/default/img/editing_tool_bar.png");
background-repeat: no-repeat;
background-position: -103px -0px;
}
.olControlDrawFeaturePolygonItemInactive {
background-image:
url("./openlayers/theme/default/img/editing_tool_bar.png");
background-repeat: no-repeat;
background-position: -26px 0px;
}
.olControlDrawFeaturePolygonItemActive {
background-image:
url("./openlayers/theme/default/img/editing_tool_bar.png");
background-repeat: no-repeat;
background-position: -26px -23px;
}
.olControlModifyFeatureItemActive {
background-image:
url(./openlayers/theme/default/img/move_feature_on.png);
background-repeat: no-repeat;
background-position: 0px 1px;
}
.olControlModifyFeatureItemInactive {
background-image:
url(./openlayers/theme/default/img/move_feature_off.png);
background-repeat: no-repeat;
background-position: 0px 1px;
}
.olControlDeleteFeatureItemActive {
background-image:
url(./openlayers/theme/default/img/remove_point_on.png);
background-repeat: no-repeat;
background-position: 0px 1px;
}
.olControlDeleteFeatureItemInactive {
background-image:
url(./openlayers/theme/default/img/remove_point_off.png);
background-repeat: no-repeat;
background-position: 0px 1px;
}
</style>
<script type="text/javascript" charset="utf-8" src="./openlayers/OpenLayers.debug.js"></script>
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
</script>
</head>
<body onload="initialize()">
</body>
</html>
******************************ここまでindex.html******************************
コレで、HTML(OpenLayers)の指定は終わりです。
さて、HTML(JavaScript)の細かい説明はまた今度…
ついでに、GeoServerの設定方法もまた今度…
簡単に言うと…
1.http://192.168.51.219:8081/geoserver/web/ にアクセス、ログインする
2."Add stores"をクリックする。(ツリーのStores → Add new Store でも可能)
3.Storeを作成する。(Postgresqlへの接続を作ります)
WorkSpaceは"cite"にしたので、HTMLが、"cite"になってます。
WorkSpaceを変更する場合は、「http://www.opengeospatial.net/cite」が変わるので注意
4."Add layers"をクリックする。(ツリーのLayers → Add a new resource でも可能)
5.Layerを作る。
"Add layer from"は、3で作ったStore を選択すること
選択すると、一覧が出てくるので、接続するテーブルを探し、"Publish"をクリック
6."Declared SRS"には、Findボタンを押して、"4326"を検索すること。「EPSG:4326」と表示されるはず。
"Native Bounding Box"には、"Compute from data"をクリックすると、勝手に入ります。
"Lat/Lon Bounding Box"には、"Native Bounding Box"の値をコピーしてください。
"Feature Type Details"は、デフォルトで入りますが、"Reload feature type"リンクをクリックしてください。
ちなみに、テーブルを変更した場合は、"Reload feature type"をクリックするだけで反映されます。
7."Name"で指定したものが、レイヤー名になります。 → HTMLファイルを修正してください。
後は、
http://localhost:8080/Test/
にアクセスすれば、地図が出ます。
右上のボタンを押して、図形の作成、編集、削除、保存を行うことが出来るはずです。
詳しくはまた今度…
今度があれば…
