こいつの続きです。
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/
にアクセスすれば、地図が出ます。
右上のボタンを押して、図形の作成、編集、削除、保存を行うことが出来るはずです。
詳しくはまた今度…
今度があれば…