Debianでka-MapのメモプラスOpenLayers とGeoExt: 8月 2008

2008年8月30日土曜日

OpenLayers 1クイックチュートリアル

OpenLayers を触ってみようと思ったのは、あるところで ka-Map が OpenLayers に取り込まれるというのを読んだからです。
開発そのものが取り込まれるのかと勘違いしていましたが、ka-Mapで作成した地図を表示できるということでした。

クイックチュートリアルにしたがって、試しに触ってみました。

OpenLayers は Webページに地図を表示するためのフリーでオープンなJavaScriptライブラリです。
BSDライセンスでリリースされています。

OpenLayers ホームページ
http://openlayers.org/

の Tutorial の Quick Tutorial をみてみると、他サイト（または自サイト）の地図をWebページに表示するようになっています。
インターネットに接続した状態で操作します。

練習用にサイト設定をしてください。

user@debian:~$ mkdir openlayers

私は、apacheのサイト設定を次のように追加しました。

/etc/apache2/sites-available/kamap


---
Alias /openlayers/ "/home/user/openlayers/"
<Directory /home/user/openlayers/>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride None
        Order allow,deny
        allow from all
</Directory>
---

debian:/home/user# a2dissite kamap
Site kamap disabled.
Run '/etc/init.d/apache2 reload' to activate new configuration!
debian:/home/user# a2ensite kamap
Run '/etc/init.d/apache2 reload' to activate new configuration!
debian:/home/user# /etc/init.d/apache2 restart
Restarting web server: apache2 ... waiting ..

/home/user/openlayers に次の内容で quick_tutorial.html ファイルを作成します。


<html>
 <head>
  <title>Quick Tutrial</title>
 </head>
 <body>

 <iframe
  src="http://openlayers.org/viewer/"
  width="450" height="300"
  scrolling="no"
  marginwidth="0" marginheight="0"
  frameborder="0">
 </frame>
 
 </body>
</html>

webブラウザのアドレスバーに

http://localhost/openlayers/quick_tutorial.html

と入力します。
地図が表示されます。

2008年8月27日水曜日

基盤地図情報 6データの確認

鎌倉の地図をちょっと調べてみましょう。
kamakura_pgis.map の tetsudo レイヤの METADATA に次のように追加します。


---
   METADATA
     "group_title" "鉄道"
     "queryable" "true"     #追加
     "fields" "name:名前"   #追加
     rgbColor "255,153,153" #追加
   END
---

Webブラウザのアドレスバーに次のように入力して Enterキーを押します。

http://localhost/ka-map/index_query.html

Kamakura（鎌倉市）の地図を表示して、iアイコン（query）をクリックし、鉄道の線をクリックします。

しばらくすると線の一部が赤くなります。
データが路線の始発から終点までになっていないようです。

地図は見た目を重要視しているようです。
例えば、鉄道に接している行政区を抽出するようなことには向いていないようです。

2008年8月26日火曜日

基盤地図情報 5b神奈川県のPostGISでのマップファイル


MAP
 NAME kanagawa_pgis_map
 STATUS ON
 SIZE 600 300
 EXTENT -83624.557161 -96269.254733 -3366.679476 -36305.074927
 UNITS meters
 IMAGECOLOR 255 255 255
 IMAGETYPE png
 FONTSET "fonts.txt"

 WEB
   IMAGEPATH "/home/user/ka-map/htdocs/tmp/kacache/"
   IMAGEURL "/ka-map/tmp/kacache/"
 END

 LEGEND
   TRANSPARENT TRUE
   LABEL
     TYPE TRUETYPE
     FONT vl-gothic
     COLOR 0 0 0
     ENCODING UTF-8
     SIZE 10
     OFFSET 0 -4
   END
 END

 SCALEBAR
   TRANSPARENT TRUE
 END


 LAYER
   NAME kukaku
   GROUP kukaku
   TYPE POLYGON
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=kanagawa host=localhost user=user password=password"
   DATA "the_geom from gyoseikukaku"
   METADATA
     "group_title" "行政区画"
   END
   CLASS
     NAME "行政区画"
     STYLE
       COLOR 255 255 204
       OUTLINECOLOR 204 204 204
     END
   END
 END

 LAYER
   NAME suigaisen
   GROUP suigaisen
   TYPE LINE
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=kanagawa host=localhost user=user password=password"
   DATA "the_geom from suigai"
   METADATA
     "group_title" "水涯線"
   END
   CLASS
     NAME "水涯線"
     STYLE
       COLOR 102 204 204
       SIZE 1
     END
   END
 END

 LAYER
   NAME kaigansen
   GROUP kaigansen
   TYPE LINE
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=kanagawa host=localhost user=user password=password"
   DATA "the_geom from kaigansen"
   METADATA
     "group_title" "海岸線"
   END
   CLASS
     NAME "海岸線"
     STYLE
       COLOR 102 204 204
       SIZE 1
     END
   END
 END

 LAYER
   NAME kenchiku
   GROUP kenchiku
   TYPE LINE
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=kanagawa host=localhost user=user password=password"
   DATA "the_geom from kenchikua"
   MAXSCALEDENOM 50000
   METADATA
     "group_title" "建築物"
   END
   CLASS
     NAME "建築物"
     STYLE
       COLOR 153 204 153
       SIZE 1
     END
   END
 END

 LAYER
   NAME doro
   GROUP doro
   TYPE LINE
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=kanagawa host=localhost user=user password=password"
   DATA "the_geom from doro"
   MAXSCALEDENOM 100000
   METADATA
     "group_title" "道路"
     "opacity" "50"
     "queryable" "true"
     "fields" "name:名前"
   END
   CLASS
     NAME "道路"
     STYLE
       COLOR 204 204 102
       SIZE 1
     END
   END
   TEMPLATE temp_kamakura_shp.html
 END

 LAYER
   NAME testudo
   GROUP tetsudo
   TYPE LINE
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=kanagawa host=localhost user=user password=password"
   DATA "the_geom from kido"
   METADATA
     "group_title" "鉄道"
     "queryable" "true"
     "fields" "name:名前"
   END
   CLASS
     NAME "鉄道"
     STYLE
       COLOR 51 51 51
       SIZE 1
     END
   END
   TEMPLATE temp_kamakura_shp.html
 END

 LAYER
   NAME kukaku2
   GROUP kukaku2
   TYPE ANNOTATION
   STATUS OFF
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=kanagawa host=localhost user=user password=password"
   DATA "the_geom from gyoseikukaku"
   LABELITEM "name"
   METADATA
     "group_title" "住所1"
     "queryable" "true"
     "searchfield" "name"
     "fields" "name:住所"
   END
   CLASS
     NAME "住所1"
     LABEL
       MINFEATURESIZE 100
       TYPE TRUETYPE
       FONT vl-gothic
       ENCODING UTF-8
       SIZE 8
     END
   END
   TEMPLATE temp_kamakura_shp.html
 END

 LAYER
   NAME kukakuten
   GROUP kukakuten
   TYPE POINT
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=kanagawa host=localhost user=user password=password"
   DATA "the_geom from gyoseiten"
   LABELITEM "name"
   METADATA
     "group_title" "行政区画代表点"
     "queryable" "true"
     "searchfield" "name"
     "fields" "name:住所"
   END
   CLASS
     NAME "行政区画代表点"
     STYLE
       COLOR 255 255 255
       SIZE 1
     END
     LABEL
       MINFEATURESIZE 100
       TYPE TRUETYPE
       FONT vl-gothic
       ENCODING UTF-8
       SIZE 8
     END
   END
   TEMPLATE temp_kamakura_shp.html
 END

END #MAP END

基盤地図情報 5a神奈川県をPostGISで地図表示

5a神奈川県をPostGISで地図表示

シェイプファイルをデータベースに登録します。

template_postgisをテンプレートとして、オーナーがuserでkanagawaというデータベースを作成します。


postgres@debian:~$ createdb -T template_postgis -O user kanagawa
postgres@debian:~$ psql -l
           List of databases
       Name       |  Owner   | Encoding
------------------+----------+----------
 kamakura         | user     | UTF8
 kanagawa         | user     | UTF8
 postgres         | postgres | UTF8
 template0        | postgres | UTF8
 template1        | postgres | UTF8
 template_postgis | postgres | UTF8
 tokyo            | user     | UTF8
(7 rows)

kanagawaデータベースのgeometry_columnテーブルとspatial_ref_sysテーブルのオーナーをuserに変更します。


postgres@debian:~$ psql kanagawa
Welcome to psql 8.3.3, the PostgreSQL interactive terminal.

Type:  \copyright for distribution terms
       \h for help with SQL commands
       \? for help with psql commands
       \g or terminate with semicolon to execute query
       \q to quit

kanagawa=# \d
              List of relations
 Schema |       Name       | Type  |  Owner   
--------+------------------+-------+----------
 public | geometry_columns | table | postgres
 public | spatial_ref_sys  | table | postgres
(2 rows)

kanagawa=# ALTER TABLE geometry_columns OWNER TO user;
ALTER TABLE
kanagawa=# ALTER TABLE spatial_ref_sys OWNER TO user;
ALTER TABLE
kanagawa=# \d
             List of relations
 Schema |       Name       | Type  | Owner
--------+------------------+-------+-------
 public | geometry_columns | table | user
 public | spatial_ref_sys  | table | user
(2 rows)

kanagawa=# \q

shp2pgsqlコマンドを使ってシェイプファイルをデータベースに登録します。
一般ユーザでシェイプファイルのあるディレクトリに移動して、次のように入力します。


user@debian:~$ cd mapdata/kanagawa/
user@debian:~/mapdata/kanagawa$ shp2pgsql -W sjis AdmArea.shp gyoseikukaku > gyoseikukaku.sql
Shapefile type: Polygon
Postgis type: MULTIPOLYGON[2]
user@debian:~/mapdata/kanagawa$ shp2pgsql -W sjis AdmPt.shp gyoseiten > gyoseiten.sql
Shapefile type: Point
Postgis type: POINT[2]
user@debian:~/mapdata/kanagawa$ shp2pgsql -W sjis BldA.shp kenchikua > kenchikua.sql
Shapefile type: Polygon
Postgis type: MULTIPOLYGON[2]
user@debian:~/mapdata/kanagawa$ shp2pgsql -W sjis Cstline.shp kaigansen > kaigansen.sql
Shapefile type: Arc
Postgis type: MULTILINESTRING[2]
user@debian:~/mapdata/kanagawa$ shp2pgsql -W sjis RailCL.shp kido > kido.sql
Shapefile type: Arc
Postgis type: MULTILINESTRING[2]
user@debian:~/mapdata/kanagawa$ shp2pgsql -W sjis RdEdg.shp doro > doro.sql
Shapefile type: Arc
Postgis type: MULTILINESTRING[2]
user@debian:~/mapdata/kanagawa$ shp2pgsql -W sjis WL.shp suigai > suigai.sql
Shapefile type: Arc
Postgis type: MULTILINESTRING[2]


user@debian:~/mapdata/kanagawa$ psql -d kanagawa -f gyoseikukaku.sql
SET
BEGIN
psql:gyoseikukaku.sql:12: NOTICE:  CREATE TABLE will create implicit sequence "gyoseikukaku_gid_seq" for serial column "gyoseikukaku.gid"
psql:gyoseikukaku.sql:12: NOTICE:  CREATE TABLE / PRIMARY KEY will create implicit index "gyoseikukaku_pkey" for table "gyoseikukaku"
CREATE TABLE
                       addgeometrycolumn                       
---------------------------------------------------------------
 public.gyoseikukaku.the_geom SRID:-1 TYPE:MULTIPOLYGON DIMS:2
 
(1 row)

INSERT 0 1
---
COMMIT
user@debian:~/mapdata/kanagawa$ psql kanagawa
Welcome to psql 8.3.3, the PostgreSQL interactive terminal.

Type:  \copyright for distribution terms
       \h for help with SQL commands
       \? for help with psql commands
       \g or terminate with semicolon to execute query
       \q to quit

kanagawa=> \dt
             List of relations
 Schema |       Name       | Type  | Owner
--------+------------------+-------+-------
 public | geometry_columns | table | user
 public | gyoseikukaku     | table | user
 public | spatial_ref_sys  | table | user
(3 rows)

kanagawa=> \d gyoseikukaku
                                  Table "public.gyoseikukaku"
  Column  |         Type          |                         Modifiers                          
----------+-----------------------+------------------------------------------------------------
 gid      | integer               | not null default nextval('gyoseikukaku_gid_seq'::regclass)
 id       | character varying(8)  |
 uuid     | character varying(24) |
 presence | bigint                |
 finished | bigint                |
 orggilvl | character varying(8)  |
 orgmdid  | character varying(8)  |
 type     | character varying(8)  |
 name     | character varying(25) |
 code     | integer               |
 the_geom | geometry              |
Indexes:
    "gyoseikukaku_pkey" PRIMARY KEY, btree (gid)
Check constraints:
    "enforce_dims_the_geom" CHECK (ndims(the_geom) = 2)
    "enforce_geotype_the_geom" CHECK (geometrytype(the_geom) = 'MULTIPOLYGON'::text OR the_geom IS NULL)
    "enforce_srid_the_geom" CHECK (srid(the_geom) = (-1))

kanagawa=> \q

残りのシェイプファイルも登録します。


user@debian:~/mapdata/kanagawa$ psql -d kanagawa -f gyoseiten.sql
user@debian:~/mapdata/kanagawa$ psql -d kanagawa -f kenchikua.sql
user@debian:~/mapdata/kanagawa$ psql -d kanagawa -f kaigansen.sql
user@debian:~/mapdata/kanagawa$ psql -d kanagawa -f kido.sql
user@debian:~/mapdata/kanagawa$ psql -d kanagawa -f doro.sql
user@debian:~/mapdata/kanagawa$ psql -d kanagawa -f suigai.sql

2008年8月24日日曜日

基盤地図情報 4b鎌倉市のPostGISでのマップファイル


MAP
 NAME kamakura_pgis_map
 STATUS ON
 SIZE 600 300
 EXTENT -31337.715508 -77650.134635 -21796.513842 -70055.061952
 UNITS meters
 IMAGECOLOR 255 255 255
 IMAGETYPE png
 FONTSET "fonts.txt"

 WEB
   IMAGEPATH "/home/user/ka-map/htdocs/tmp/kacache/"
   IMAGEURL "/ka-map/tmp/kacache/"
 END

 LEGEND
   TRANSPARENT TRUE
   LABEL
     TYPE TRUETYPE
     FONT vl-gothic
     COLOR 0 0 0
     ENCODING UTF-8
     SIZE 10
     OFFSET 0 -4
   END
 END

 SCALEBAR
   TRANSPARENT TRUE
 END


 LAYER
   NAME kukaku
   GROUP kukaku
   TYPE POLYGON
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=kamakura host=localhost user=user password=password"
   DATA "the_geom from gyoseikukaku"
   LABELITEM "name"
   METADATA
     "group_title" "行政区画"
     "queryable" "true"
     "fields" "name:名前"
   END
   CLASS
     NAME "行政区画"
     STYLE
       COLOR 255 255 204
       OUTLINECOLOR 153 153 153
     END
   END
   TEMPLATE temp_kamakura_shp.html
 END

 LAYER
   NAME kukakusen
   GROUP kukakusen
   TYPE LINE
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=kamakura host=localhost user=user password=password"
   DATA "the_geom from gyoseisen"
   METADATA
     "group_title" "行政区画界線"
   END
   CLASS
     NAME "行政区画界線"
     STYLE
       COLOR 153 153 153
       SIZE 1
     END
   END
 END

 LAYER
   NAME chojisen
   GROUP chojisen
   TYPE LINE
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=kamakura host=localhost user=user password=password"
   DATA "the_geom from chojisen"
   MINSCALE 10000
   MAXSCALE 500000
   METADATA
     "group_title" "町字界線"
   END
   CLASS
     NAME "町字界線"
     STYLE
       COLOR 51 51 51
       SIZE 1
     END
   END
 END

 LAYER
   NAME suigaisen
   GROUP suigaisen
   TYPE LINE
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=kamakura host=localhost user=user password=password"
   DATA "the_geom from suigai"
   METADATA
     "group_title" "水涯線"
   END
   CLASS
     NAME "水涯線"
     STYLE
       COLOR 102 204 204
       SIZE 1
     END
   END
 END

 LAYER
   NAME kaigansen
   GROUP kaigansen
   TYPE LINE
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=kamakura host=localhost user=user password=password"
   DATA "the_geom from kaigansen"
   METADATA
     "group_title" "海岸線"
   END
   CLASS
     NAME "海岸線"
     STYLE
       COLOR 102 204 204
       SIZE 1
     END
   END
 END

 LAYER
   NAME kenchiku
   GROUP kenchiku
   TYPE LINE
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=kamakura host=localhost user=user password=password"
   DATA "the_geom from kenchikua"
   MAXSCALEDENOM 25000
   METADATA
     "group_title" "建築物"
   END
   CLASS
     NAME "建築物"
     STYLE
       COLOR 153 204 153
       SIZE 1
     END
   END
 END

 LAYER
   NAME kenchikusen
   GROUP kenchikusen
   TYPE LINE
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=kamakura host=localhost user=user password=password"
   DATA "the_geom from kenchikul"
   MAXSCALEDENOM 25000
   METADATA
     "group_title" "建築物の外周線"
   END
   CLASS
     NAME "建築物の外周線"
     STYLE
       COLOR 102 204 102
       SIZE 1
     END
   END
 END

 LAYER
   NAME doro
   GROUP doro
   TYPE LINE
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=kamakura host=localhost user=user password=password"
   DATA "the_geom from doro"
   METADATA
     "group_title" "道路"
     "opacity" "50"
   END
   CLASS
     NAME "道路"
     STYLE
       COLOR 204 204 102
       SIZE 1
     END
   END
 END

 LAYER
   NAME testudo
   GROUP tetsudo
   TYPE LINE
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=kamakura host=localhost user=user password=password"
   DATA "the_geom from kido"
   METADATA
     "group_title" "鉄道"
     "queryable" "true"
     "fields" "name:名前"
     rgbColor "255,153,153"
   END
   CLASS
     NAME "鉄道"
     STYLE
       COLOR 51 51 51
       SIZE 1
     END
   END
   TEMPLATE temp_kamakura_shp.html
 END

 LAYER
   NAME kukaku2
   GROUP kukaku2
   TYPE ANNOTATION
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=kamakura host=localhost user=user password=password"
   DATA "the_geom from gyoseikukaku"
   LABELITEM "name"
   METADATA
     "group_title" "住所1"
     "queryable" "true"
     "searchfield" "name"
     "fields" "name:住所"
   END
   CLASS
     NAME "住所1"
     LABEL
       MINFEATURESIZE 40
       TYPE TRUETYPE
       FONT vl-gothic
       ENCODING UTF-8
       SIZE 8
     END
   END
   TEMPLATE temp_kamakura_shp.html
 END

 LAYER
   NAME kukakuten
   GROUP kukakuten
   TYPE POINT
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=kamakura host=localhost user=user password=password"
   DATA "the_geom from gyoseiten"
   LABELITEM "name"
   METADATA
     "group_title" "行政区画代表点"
     "queryable" "true"
     "searchfield" "name"
     "fields" "name:住所"
   END
   CLASS
     NAME "行政区画代表点"
     STYLE
       COLOR 255 255 255
       SIZE 1
     END
     LABEL
       MINFEATURESIZE 40
       TYPE TRUETYPE
       FONT vl-gothic
       ENCODING UTF8
       SIZE 8
     END
   END
   TEMPLATE temp_kamakura_shp.html
 END

 LAYER
   NAME chojiten
   GROUP chojiten
   TYPE POINT
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=kamakura host=localhost user=user password=password"
   DATA "the_geom from chojiten"
   LABELITEM "name"
   METADATA
     "group_title" "町字の代表点"
     "queryable" "true"
     "searchfield" "name"
     "fields" "name:住所"
   END
   CLASS
     NAME "町字の代表点"
     STYLE
       COLOR 255 255 255
       SIZE 1
     END
     LABEL
       MINFEATURESIZE 40
       TYPE TRUETYPE
       FONT vl-gothic
       ENCODING UTF-8
       SIZE 8
     END
   END
   TEMPLATE temp_kamakura_shp.html
 END

END #MAP END

基盤地図情報 4鎌倉市をPostGISで地図表示

鎌倉市をPostGISで地図表示

シェイプファイルをデータベースに登録します。

template_postgisをテンプレートとして、オーナーがuserでkamakuraというデータベースを作成します。


postgres@debian:~$ createdb -T template_postgis -O user kamakura
postgres@debian:~$ psql -l
           List of databases
       Name       |  Owner   | Encoding 
------------------+----------+----------
 kamakura         | user     | UTF8
 postgres         | postgres | UTF8
 template0        | postgres | UTF8
 template1        | postgres | UTF8
 template_postgis | postgres | UTF8
 tokyo            | user     | UTF8
(6 rows)

kamakuraデータベースのgeometry_columnテーブルとspatial_ref_sysテーブルのオーナーをuserに変更します。


postgres@debian:~$ psql kamakura
Welcome to psql 8.3.3, the PostgreSQL interactive terminal.

Type:  \copyright for distribution terms
       \h for help with SQL commands
       \? for help with psql commands
       \g or terminate with semicolon to execute query
       \q to quit

kamakura=# \d
              List of relations
 Schema |       Name       | Type  |  Owner   
--------+------------------+-------+----------
 public | geometry_columns | table | postgres
 public | spatial_ref_sys  | table | postgres
(2 rows)

kamakura=# ALTER TABLE geometry_columns OWNER TO user;
ALTER TABLE
kamakura=# ALTER TABLE spatial_ref_sys OWNER TO user;
ALTER TABLE
kamakura=# \d
             List of relations
 Schema |       Name       | Type  | Owner 
--------+------------------+-------+-------
 public | geometry_columns | table | user
 public | spatial_ref_sys  | table | user
(2 rows)

kamakura=# \q


postgres@debian:~$ exit
logout
user@debian:~$ cd mapdata/kamakura/
user@debian:~/mapdata/kamakura$ shp2pgsql -W sjis AdmArea.shp gyoseikukaku > gyoseikukaku.sql
Shapefile type: Polygon
Postgis type: MULTIPOLYGON[2]
user@debian:~/mapdata/kamakura$ shp2pgsql -W sjis AdmBdry.shp gyoseisen > gyoseisen.sql
Shapefile type: Arc
Postgis type: MULTILINESTRING[2]
user@debian:~/mapdata/kamakura$ shp2pgsql -W sjis AdmPt.shp gyoseiten > gyoseiten.sql
Shapefile type: Point
Postgis type: POINT[2]
user@debian:~/mapdata/kamakura$ shp2pgsql -W sjis BldA.shp kenchikua > kenchikua.sql
Shapefile type: Polygon
Postgis type: MULTIPOLYGON[2]
user@debian:~/mapdata/kamakura$ shp2pgsql -W sjis BldL.shp kenchikul > kenchikul.sql
Shapefile type: Arc
Postgis type: MULTILINESTRING[2]
user@debian:~/mapdata/kamakura$ shp2pgsql -W sjis CommBdry.shp chojisen > chojisen.sql
Shapefile type: Arc
Postgis type: MULTILINESTRING[2]
user@debian:~/mapdata/kamakura$ shp2pgsql -W sjis CommPt.shp chojiten > chojiten.sql
Shapefile type: Point
Postgis type: POINT[2]
user@debian:~/mapdata/kamakura$ shp2pgsql -W sjis Cstline.shp kaigansen > kaigansen.sql
Shapefile type: Arc
Postgis type: MULTILINESTRING[2]
user@debian:~/mapdata/kamakura$ shp2pgsql -W sjis RailCL.shp kido > kido.sql
Shapefile type: Arc
Postgis type: MULTILINESTRING[2]
user@debian:~/mapdata/kamakura$ shp2pgsql -W sjis RdEdg.shp doro > doro.sql
Shapefile type: Arc
Postgis type: MULTILINESTRING[2]
user@debian:~/mapdata/kamakura$ shp2pgsql -W sjis WL.shp suigai > suigai.sql
Shapefile type: Arc
Postgis type: MULTILINESTRING[2]


user@debian:~/mapdata/kamakura$ psql -d kamakura -f gyoseikukaku.sql 
SET
BEGIN
psql:gyoseikukaku.sql:12: NOTICE:  CREATE TABLE will create implicit sequence "gyoseikukaku_gid_seq" for serial column "gyoseikukaku.gid"
psql:gyoseikukaku.sql:12: NOTICE:  CREATE TABLE / PRIMARY KEY will create implicit index "gyoseikukaku_pkey" for table "gyoseikukaku"
CREATE TABLE
                       addgeometrycolumn                       
---------------------------------------------------------------
 public.gyoseikukaku.the_geom SRID:-1 TYPE:MULTIPOLYGON DIMS:2
  
(1 row)

INSERT 0 1
---
COMMIT
user@debian:~/mapdata/kamakura$ psql kamakura
Welcome to psql 8.3.3, the PostgreSQL interactive terminal.

Type:  \copyright for distribution terms
       \h for help with SQL commands
       \? for help with psql commands
       \g or terminate with semicolon to execute query
       \q to quit

kamakura=> \dt
             List of relations
 Schema |       Name       | Type  | Owner 
--------+------------------+-------+-------
 public | geometry_columns | table | user
 public | gyoseikukaku     | table | user
 public | spatial_ref_sys  | table | user
(3 rows)

gyoseikukakuテーブル内のカラムとその他の一覧を表示してみます。


kamakura=> \d gyoseikukaku
                                  Table "public.gyoseikukaku"
  Column  |         Type          |                         Modifiers                          
----------+-----------------------+------------------------------------------------------------
 gid      | integer               | not null default nextval('gyoseikukaku_gid_seq'::regclass)
 id       | character varying(8)  | 
 uuid     | character varying(25) | 
 presence | bigint                | 
 finished | bigint                | 
 orggilvl | character varying(8)  | 
 orgmdid  | character varying(8)  | 
 type     | character varying(16) | 
 name     | character varying(16) | 
 code     | integer               | 
 the_geom | geometry              | 
Indexes:
    "gyoseikukaku_pkey" PRIMARY KEY, btree (gid)
Check constraints:
    "enforce_dims_the_geom" CHECK (ndims(the_geom) = 2)
    "enforce_geotype_the_geom" CHECK (geometrytype(the_geom) = 'MULTIPOLYGON'::text OR the_geom IS NULL)
    "enforce_srid_the_geom" CHECK (srid(the_geom) = (-1))

kamakura=> \q

残りのシェイプファイルも登録します。


user@debian:~/mapdata/kamakura$ psql -d kamakura -f gyoseisen.sql 
user@debian:~/mapdata/kamakura$ psql -d kamakura -f gyoseiten.sql 
user@debian:~/mapdata/kamakura$ psql -d kamakura -f kenchikua.sql 
user@debian:~/mapdata/kamakura$ psql -d kamakura -f kenchikul.sql 
user@debian:~/mapdata/kamakura$ psql -d kamakura -f chojisen.sql 
user@debian:~/mapdata/kamakura$ psql -d kamakura -f chojiten.sql 
user@debian:~/mapdata/kamakura$ psql -d kamakura -f kaigansen.sql 
user@debian:~/mapdata/kamakura$ psql -d kamakura -f kido.sql 
user@debian:~/mapdata/kamakura$ psql -d kamakura -f doro.sql 
user@debian:~/mapdata/kamakura$ psql -d kamakura -f suigai.sql

2008年8月23日土曜日

基盤地図情報 3b神奈川県のマップファイル


MAP
 NAME kanagawa_shp_map
 STATUS ON
 SIZE 600 300
 EXTENT -83624.557161 -96269.254733 -3366.679476 -36305.074927
 UNITS meters
 IMAGECOLOR 255 255 255
 IMAGETYPE png
 FONTSET "fonts.txt"

 WEB
   IMAGEPATH "/home/user/ka-map/htdocs/tmp/kacache/"
   IMAGEURL "/ka-map/tmp/kacache/"
 END

 LEGEND
   TRANSPARENT TRUE
   LABEL
     TYPE TRUETYPE
     FONT vl-gothic
     COLOR 0 0 0
     ENCODING UTF-8
     SIZE 10
     OFFSET 0 -4
   END
 END

 SCALEBAR
   TRANSPARENT TRUE
 END


 LAYER
   NAME kukaku
   GROUP kukaku
   TYPE POLYGON
   STATUS ON
   DATA "../mapdata/kanagawa/AdmArea.shp"
   METADATA
     "group_title" "行政区画"
   END
   CLASS
     NAME "行政区画"
     STYLE
       COLOR 255 255 204
       OUTLINECOLOR 204 204 204
     END
   END
 END

 LAYER
   NAME suigaisen
   GROUP suigaisen
   TYPE LINE
   STATUS ON
   DATA "../mapdata/kanagawa/WL.shp"
   METADATA
     "group_title" "水涯線"
   END
   CLASS
     NAME "水涯線"
     STYLE
       COLOR 102 204 204
       SIZE 1
     END
   END
 END

 LAYER
   NAME kaigansen
   GROUP kaigansen
   TYPE LINE
   STATUS ON
   DATA "../mapdata/kanagawa/Cstline.shp"
   METADATA
     "group_title" "海岸線"
   END
   CLASS
     NAME "海岸線"
     STYLE
       COLOR 102 204 204
       SIZE 1
     END
   END
 END

 LAYER
   NAME kenchiku
   GROUP kenchiku
   TYPE LINE
   STATUS ON
   DATA "../mapdata/kanagawa/BldA.shp"
   MAXSCALEDENOM 50000
   METADATA
     "group_title" "建築物"
   END
   CLASS
     NAME "建築物"
     STYLE
       COLOR 153 204 153
       SIZE 1
     END
   END
 END

 LAYER
   NAME doro
   GROUP doro
   TYPE LINE
   STATUS ON
   DATA "../mapdata/kanagawa/RdEdg.shp"
   MAXSCALEDENOM 100000
   METADATA
     "group_title" "道路"
     "opacity" "50"
     "layer_encoding" "SJIS"
     "queryable" "true"
     "fields" "name:名前"
   END
   CLASS
     NAME "道路"
     STYLE
       COLOR 204 204 102
       SIZE 1
     END
   END
   TEMPLATE temp_kamakura_shp.html
 END

 LAYER
   NAME testudo
   GROUP tetsudo
   TYPE LINE
   STATUS ON
   DATA "../mapdata/kanagawa/RailCL.shp"
   METADATA
     "group_title" "鉄道"
   END
   CLASS
     NAME "鉄道"
     STYLE
       COLOR 51 51 51
       SIZE 1
     END
   END
 END

 LAYER
   NAME kukaku3
   GROUP kukaku3
   TYPE POLYGON
   STATUS ON
   DATA "../mapdata/kanagawa_mlit/N03-071001_14_EC01.shp"
   METADATA
     "group_title" "行政区画3"
     "opacity" "50"
   END
   CLASS
     NAME "行政区画3"
     STYLE
       COLOR 255 153 153
     END
   END
 END

 LAYER
   NAME kukaku2
   GROUP kukaku2
   TYPE ANNOTATION
   STATUS OFF
   DATA "../mapdata/kanagawa/AdmArea.shp"
   LABELITEM "name"
   METADATA
     "group_title" "住所1"
     "layer_encoding" "SJIS"
     "queryable" "true"
     "searchfield" "name"
     "fields" "name:住所"
   END
   CLASS
     NAME "住所1"
     LABEL
       MINFEATURESIZE 100
       TYPE TRUETYPE
       FONT vl-gothic
       ENCODING SJIS
       SIZE 8
     END
   END
   TEMPLATE temp_kamakura_shp.html
 END

 LAYER
   NAME kukakuten
   GROUP kukakuten
   TYPE POINT
   STATUS ON
   DATA "../mapdata/kanagawa/AdmPt.shp"
   LABELITEM "name"
   METADATA
     "group_title" "行政区画代表点"
     "layer_encoding" "SJIS"
     "queryable" "true"
     "searchfield" "name"
     "fields" "name:住所"
   END
   CLASS
     NAME "行政区画代表点"
     STYLE
       COLOR 255 255 255
       SIZE 1
     END
     LABEL
       MINFEATURESIZE 100
       TYPE TRUETYPE
       FONT vl-gothic
       ENCODING SJIS
       SIZE 8
     END
   END
   TEMPLATE temp_kamakura_shp.html
 END

END #MAP END

基盤地図情報 3a神奈川県のデータの内容

神奈川県のデータをみてみます。

user@debian:~/mapdata$ ogrinfo kanagawa
INFO: Open of `kanagawa'
using driver `ESRI Shapefile' successful.
1: RailCL (Line String)
2: AdmPt (Point)
3: RdEdg (Line String)
4: BldA (Polygon)
5: Cstline (Line String)
6: WL (Line String)
7: AdmArea (Polygon)

AdmAreaのデータの概要をみてみます。


user@debian:~/mapdata$ ogrinfo -summary kanagawa AdmArea
INFO: Open of `kanagawa'
      using driver `ESRI Shapefile' successful.

Layer name: AdmArea
Geometry: Polygon
Feature Count: 115
Extent: (-83624.557161, -96269.254733) - (-3366.679476, -36305.074927)
Layer SRS WKT:
PROJCS["JGD2000_Japan_Zone_9",
    GEOGCS["GCS_JGD_2000",
        DATUM["Japanese_Geodetic_Datum_2000",
            SPHEROID["GRS_1980",6378137.0,298.257222101]],
        PRIMEM["Greenwich",0.0],
        UNIT["Degree",0.0174532925199433]],
    PROJECTION["Transverse_Mercator"],
    PARAMETER["False_Easting",0.0],
    PARAMETER["False_Northing",0.0],
    PARAMETER["Central_Meridian",139.833333333333],
    PARAMETER["Scale_Factor",0.9999],
    PARAMETER["Latitude_Of_Origin",36],
    UNIT["Meter",1.0]]
ID: String (8.0)
UUID: String (24.0)
PRESENCE: Real (11.2)
FINISHED: Real (11.2)
ORGGILVL: String (8.0)
ORGMDID: String (8.0)
TYPE: String (8.0)
NAME: String (25.0)
CODE: Integer (8.0)

1 Polygon データということが分かります。
2 経度緯度はメータです。
3 図法は横メルカトール図法です。

各レイヤのデータは次のようになっています。
詳しくは、ogrinfo で確かめてください。

1: RailCL (Line String)
2: AdmPt (Point)
3: RdEdg (Line String)
4: BldA (Polygon)
5: Cstline (Line String)
6: WL (Line String)
7: AdmArea (Polygon)

1 nameは、行政区画 AdmArea、行政区画代表点 AdmPt、町字の代表点 CommPt だけ、データがあり、３つのうちいくつかは重複しています。
name だけレイヤを一番上に持ってきた方が見やすくなります。

2 建築物 BldA は、ある程度拡大してから表示した方が見やすくなります。
一部の地域の建物だけデータがあります。

3 道路縁 RdEdg は、ある程度拡大してから表示し、透過させると下のレイヤが見えるようになり、見やすくなります。

2008年8月22日金曜日

基盤地図情報 2b鎌倉市のマップファイル


MAP
 NAME kamakura_shp2_map
 STATUS ON
 SIZE 600 300
 EXTENT -31337.715508 -77650.134635 -21796.513842 -70055.061952
 UNITS meters
 IMAGECOLOR 255 255 255
 IMAGETYPE png
 FONTSET "fonts.txt"

 WEB
   IMAGEPATH "/home/user/ka-map/htdocs/tmp/kacache/"
   IMAGEURL "/ka-map/tmp/kacache/"
 END

 LEGEND
   TRANSPARENT TRUE
   LABEL
     TYPE TRUETYPE
     FONT vl-gothic
     COLOR 0 0 0
     ENCODING UTF-8
     SIZE 10
     OFFSET 0 -4
   END
 END

 SCALEBAR
   TRANSPARENT TRUE
 END


 LAYER
   NAME kukaku
   GROUP kukaku
   TYPE POLYGON
   STATUS ON
   DATA "../mapdata/kamakura/AdmArea.shp"
   LABELITEM "name"
   METADATA
     "group_title" "行政区画"
   END
   CLASS
     NAME "行政区画"
     STYLE
       COLOR 255 255 204
       OUTLINECOLOR 153 153 153
     END
   END
 END

 LAYER
   NAME kukakusen
   GROUP kukakusen
   TYPE LINE
   STATUS ON
   DATA "../mapdata/kamakura/AdmBdry.shp"
   METADATA
     "group_title" "行政区画界線"
   END
   CLASS
     NAME "行政区画界線"
     STYLE
       COLOR 153 153 153
       SIZE 1
     END
   END
 END

 LAYER
   NAME chojisen
   GROUP chojisen
   TYPE LINE
   STATUS ON
   DATA "../mapdata/kamakura/CommBdry.shp"
   METADATA
     "group_title" "町字界線"
   END
   CLASS
     NAME "町字界線"
     STYLE
       COLOR 51 51 51
       SIZE 1
     END
   END
 END

 LAYER
   NAME suigaisen
   GROUP suigaisen
   TYPE LINE
   STATUS ON
   DATA "../mapdata/kamakura/WL.shp"
   METADATA
     "group_title" "水涯線"
   END
   CLASS
     NAME "水涯線"
     STYLE
       COLOR 102 204 204
       SIZE 1
     END
   END
 END

 LAYER
   NAME kaigansen
   GROUP kaigansen
   TYPE LINE
   STATUS ON
   DATA "../mapdata/kamakura/Cstline.shp"
   METADATA
     "group_title" "海岸線"
   END
   CLASS
     NAME "海岸線"
     STYLE
       COLOR 102 204 204
       SIZE 1
     END
   END
 END

 LAYER
   NAME kenchiku
   GROUP kenchiku
   TYPE LINE
   STATUS ON
   DATA "../mapdata/kamakura/BldA.shp"
   MAXSCALEDENOM 25000
   METADATA
     "group_title" "建築物"
   END
   CLASS
     NAME "建築物"
     STYLE
       COLOR 153 204 153
       SIZE 1
     END
   END
 END

 LAYER
   NAME kenchikusen
   GROUP kenchikusen
   TYPE LINE
   STATUS ON
   DATA "../mapdata/kamakura/BldL.shp"
   MAXSCALEDENOM 25000
   METADATA
     "group_title" "建築物の外周線"
   END
   CLASS
     NAME "建築物の外周線"
     STYLE
       COLOR 102 204 102
       SIZE 1
     END
   END
 END

 LAYER
   NAME doro
   GROUP doro
   TYPE LINE
   STATUS ON
   DATA "../mapdata/kamakura/RdEdg.shp"
   METADATA
     "group_title" "道路"
     "opacity" "50"
   END
   CLASS
     NAME "道路"
     STYLE
       COLOR 204 204 102
       SIZE 1
     END
   END
 END

 LAYER
   NAME testudo
   GROUP tetsudo
   TYPE LINE
   STATUS ON
   DATA "../mapdata/kamakura/RailCL.shp"
   METADATA
     "group_title" "鉄道"
   END
   CLASS
     NAME "鉄道"
     STYLE
       COLOR 51 51 51
       SIZE 1
     END
   END
 END

 LAYER
   NAME kukaku2
   GROUP kukaku2
   TYPE ANNOTATION
   STATUS ON
   DATA "../mapdata/kamakura/AdmArea.shp"
   LABELITEM "name"
   METADATA
     "group_title" "住所1"
     "layer_encoding" "SJIS"
     "queryable" "true"
     "searchfield" "name"
     "fields" "name:住所"
   END
   CLASS
     NAME "住所1"
     LABEL
       MINFEATURESIZE 40
       TYPE TRUETYPE
       FONT vl-gothic
       ENCODING SJIS
       SIZE 8
     END
   END
   TEMPLATE temp_kamakura_shp.html
 END

 LAYER
   NAME kukakuten
   GROUP kukakuten
   TYPE POINT
   STATUS ON
   DATA "../mapdata/kamakura/AdmPt.shp"
   LABELITEM "name"
   METADATA
     "group_title" "行政区画代表点"
     "layer_encoding" "SJIS"
     "queryable" "true"
     "searchfield" "name"
     "fields" "name:住所"
   END
   CLASS
     NAME "行政区画代表点"
     STYLE
       COLOR 255 255 255
       SIZE 1
     END
     LABEL
       MINFEATURESIZE 40
       TYPE TRUETYPE
       FONT vl-gothic
       ENCODING SJIS
       SIZE 8
     END
   END
   TEMPLATE temp_kamakura_shp.html
 END

 LAYER
   NAME chojiten
   GROUP chojiten
   TYPE POINT
   STATUS ON
   DATA "../mapdata/kamakura/CommPt.shp"
   LABELITEM "name"
   METADATA
     "group_title" "町字の代表点"
     "layer_encoding" "SJIS"
     "queryable" "true"
     "searchfield" "name"
     "fields" "name:住所"
   END
   CLASS
     NAME "町字の代表点"
     STYLE
       COLOR 255 255 255
       SIZE 1
     END
     LABEL
       MINFEATURESIZE 40
       TYPE TRUETYPE
       FONT vl-gothic
       ENCODING SJIS
       SIZE 8
     END
   END
   TEMPLATE temp_kamakura_shp.html
 END

END #MAP END

基盤地図情報 2a鎌倉市のデータの内容

鎌倉市のデータをみてみます。

user@debian:~/mapdata$ ogrinfo kamakura
INFO: Open of `kamakura'
using driver `ESRI Shapefile' successful.
1: CommPt (Point)
2: RailCL (Line String)
3: AdmPt (Point)
4: RdEdg (Line String)
5: CommBdry (Line String)
6: BldA (Polygon)
7: Cstline (Line String)
8: BldL (Line String)
9: WL (Line String)
10: AdmBdry (Line String)
11: AdmArea (Polygon)

AdmAreaのデータの概要をみてみます。


user@debian:~/mapdata$ ogrinfo -summary kamakura AdmArea
INFO: Open of `kamakura'
      using driver `ESRI Shapefile' successful.

Layer name: AdmArea
Geometry: Polygon　<-注1
Feature Count: 28
Extent: (-31337.715508, -77650.134635) - (-21796.513842, -70055.061952) <-注2
Layer SRS WKT:
PROJCS["JGD2000_Japan_Zone_9",
    GEOGCS["GCS_JGD_2000",
        DATUM["Japanese_Geodetic_Datum_2000",
            SPHEROID["GRS_1980",6378137.0,298.257222101]],
        PRIMEM["Greenwich",0.0],
        UNIT["Degree",0.0174532925199433]],
    PROJECTION["Transverse_Mercator"], <-注3
    PARAMETER["False_Easting",0.0],
    PARAMETER["False_Northing",0.0],
    PARAMETER["Central_Meridian",139.833333333333],
    PARAMETER["Scale_Factor",0.9999],
    PARAMETER["Latitude_Of_Origin",36],
    UNIT["Meter",1.0]] <-注2
ID: String (8.0)
UUID: String (25.0)
PRESENCE: Real (11.0)
FINISHED: Real (11.0)
ORGGILVL: String (8.0)
ORGMDID: String (8.0)
TYPE: String (16.0)
NAME: String (16.0)
CODE: Integer (8.0)

注釈
1 Polygon データということが分かります。
2 経度緯度はメータです。
3 図法は横メルカトール図法

各レイヤのデータは次のようになっています。
詳しくは、ogrinfo で確かめてください。

次のことに注意して地図を作成しました。
1 nameは、行政区画 AdmArea、行政区画代表点 AdmPt、町字の代表点 CommPt だけ、データがあり、３つのうちいくつかは重複しています。
name だけレイヤを一番上に持ってきた方が見やすくなります。

2 建築物 BldA と建築物の外周線 BldL は、重複しています。
また、ある程度拡大してから表示した方が見やすくなります。
MAXSCALEDENOM 50000 が正常の動作しません。数値は一つ上にしないと描画しませんでした。mapinfoは表示されます。

3 道路縁 RdEdg は、透過させるとしたのレイヤが見えるようになり、見やすくなります。

2008年8月21日木曜日

基盤地図情報 1データの準備

国土地理院が整備している基盤地図情報のデータを使って地図を表示します。
最初に、データの準備をします。

国土地理院のホームページの基盤地図情報リンクボタンから、基盤地図情報の閲覧・ダウンロード->基盤地図情報ダウンロードサービスへ移動します。

国土地理院
http://www.gsi.go.jp/

基盤地図情報
http://www.gsi.go.jp/kiban/index.html

基盤地図情報の閲覧・ダウンロード
http://www.gsi.go.jp/kiban/etsuran.html

基盤地図情報ダウンロードサービス
http://fgd.gsi.go.jp/download/

データをシェイプファイルの変換するために、「基盤地図情報閲覧コンバートソフト」をダウンロードしました。

表の「ファイル形式」の「JPGIS2.0形式」をクリック。

「ダウンロード項目指定」で「基盤地図情報」の「神奈川県」の左側の＋をクリックし、表示された中で「鎌倉市」をチェックしました。
もうひとつ、下のほうの「基盤地図情報（精度レベル25,000）」の「神奈川県」の左側の＋をクリックし、表示されたもの全部にチェックをしました。
「選択して次へ」ボタンをクリックします。
「ダウンロードファイルリスト」の「ダウンロード」ボタンをクリックしてダウンロードしました。
鎌倉市と神奈川県のフォルダを作成して、それぞれに入れてください。

「基盤地図情報閲覧コンバートソフト」
FGDV.zipを解凍します。
FGDV.exeをダブルクリックして起動します。
1 ツールバーの「開く」ボタンをクリックします。
2 基盤地図情報データのあるフォルダを「ファイルの場所」で指定し、「ファイルの種類」を「基盤地図情報（JPGIS）圧縮ファイル（*.zip）」を選び、表示されたファイルを全部選んで「開く」ボタンをクリックします。
3 メニューバーの「コンバート」をクリックし、「シェープファイルへ出力」をクリックします。
4 「変換する要素」で必要なものにチェックをして、「出力先フォルダ」を指定して「OK」ボタンをクリックします。（基準点、標高点は変換しませんでした。）
5 「基盤地図情報ビューアー・コンバータ」ダイアログに結果が表示されるのでコピーして保存し、「OK」ボタンをクリックします。

鎌倉市のデータ
行政区画を　AdmArea へ変換・出力しました
行政区画界線を　AdmBdry へ変換・出力しました
行政区画代表点を　AdmPt へ変換・出力しました
町字界線を　CommBdry へ変換・出力しました
町字の代表点を　CommPt へ変換・出力しました
水涯線を　WL へ変換・出力しました
海岸線を　Cstline へ変換・出力しました
建築物を　BldA へ変換・出力しました
建築物の外周線を　BldL へ変換・出力しました
道路縁を　RdEdg へ変換・出力しました
軌道の中心線を　RailCL へ変換・出力しました

AdmArea.dbfのタイトルが日本語なのでアルファベットにします。
存在期間自 -> presence（「存在期間自,N,8,0」の「,0」を一旦削除後「,0」追加 *これをしないと保存できませんでした）
整備完了日 -> finished（「整備完了日,N,8,0」の「,0」を一旦削除後「,0」追加）
種別 -> type
名称 -> name
行政コード -> code

AdmBdry.dbfのタイトルが日本語なのでアルファベットにします。
存在期間自 -> presence
整備完了日 -> finished
種別 -> type

AdmPt.dbfのタイトルが日本語なのでアルファベットにします。
存在期間自 -> presence（「存在期間自,N,8,0」の「,0」を一旦削除後「,0」追加）
整備完了日 -> finished（「整備完了日,N,8,0」の「,0」を一旦削除後「,0」追加）
種別 -> type
名称 -> name
行政コード -> code

BldA.dbfのタイトルが日本語なのでアルファベットにします。
存在期間自 -> presence（「存在期間自,N,8,0」の「,0」を一旦削除後「,0」追加）
整備完了日 -> finished（「整備完了日,N,8,0」の「,0」を一旦削除後「,0」追加）
種別 -> type
名称 -> name

Bldl.dbfのタイトルが日本語なのでアルファベットにします。
存在期間自 -> presence（「存在期間自,N,8,0」の「,0」を一旦削除後「,0」追加）
整備完了日 -> finished（「整備完了日,N,8,0」の「,0」を一旦削除後「,0」追加）
種別 -> type
名称 -> name

CommBdry.dbfのタイトルが日本語なのでアルファベットにします。
存在期間自 -> presence（「存在期間自,N,8,0」の「,0」を一旦削除後「,0」追加）
整備完了日 -> finished（「整備完了日,N,8,0」の「,0」を一旦削除後「,0」追加）
種別 -> type

CommPt.dbfのタイトルが日本語なのでアルファベットにします。
存在期間自 -> presence（「存在期間自,N,8,0」の「,0」を一旦削除後「,0」追加）
整備完了日 -> finished（「整備完了日,N,8,0」の「,0」を一旦削除後「,0」追加）
種別 -> type
名称 -> name
行政コード -> code

Cstline.dbfのタイトルが日本語なのでアルファベットにします。
存在期間自 -> presence（「存在期間自,N,8,0」の「,0」を一旦削除後「,0」追加）
整備完了日 -> finished（「整備完了日,N,8,0」の「,0」を一旦削除後「,0」追加）
種別 -> type
名称 -> name

RailCL.dbfのタイトルが日本語なのでアルファベットにします。
存在期間自 -> presence（「存在期間自,N,8,0」の「,0」を一旦削除後「,0」追加）
整備完了日 -> finished（「整備完了日,N,8,0」の「,0」を一旦削除後「,0」追加）
種別 -> type
名称 -> name

RdEdg.dbfのタイトルが日本語なのでアルファベットにします。
存在期間自 -> presence（「存在期間自,N,8,0」の「,0」を一旦削除後「,0」追加）
整備完了日 -> finished（「整備完了日,N,8,0」の「,0」を一旦削除後「,0」追加）
種別 -> type
名称 -> name

WL.dbfのタイトルが日本語なのでアルファベットにします。
存在期間自 -> presence（「存在期間自,N,8,0」の「,0」を一旦削除後「,0」追加）
整備完了日 -> finished（「整備完了日,N,8,0」の「,0」を一旦削除後「,0」追加）
種別 -> type
名称 -> name

神奈川県のデータ
行政区画を　AdmArea へ変換・出力しました
行政区画代表点を　AdmPt へ変換・出力しました
水涯線を　WL へ変換・出力しました
海岸線を　Cstline へ変換・出力しました
建築物を　BldA へ変換・出力しました
道路縁を　RdEdg へ変換・出力しました
軌道の中心線を　RailCL へ変換・出力しました
AdmArea.dbfのタイトルが日本語なのでアルファベットにします。
存在期間自 -> presence（「存在期間自,N,8,0」の「,0」を一旦削除後「,0」追加）
整備完了日 -> finished（「整備完了日,N,8,0」の「,0」を一旦削除後「,0」追加）
種別 -> type
名称 -> name
行政コード -> code

AdmPt.dbfのタイトルが日本語なのでアルファベットにします。
存在期間自 -> presence（「存在期間自,N,8,0」の「,0」を一旦削除後「,0」追加）
整備完了日 -> finished（「整備完了日,N,8,0」の「,0」を一旦削除後「,0」追加）
種別 -> type
名称 -> name
行政コード -> code

BldA.dbfのタイトルが日本語なのでアルファベットにします。
存在期間自 -> presence（「存在期間自,N,8,0」の「,0」を一旦削除後「,0」追加）
整備完了日 -> finished（「整備完了日,N,8,0」の「,0」を一旦削除後「,0」追加）
種別 -> type
名称 -> name

Cstline.dbfのタイトルが日本語なのでアルファベットにします。
存在期間自 -> presence（「存在期間自,N,8,0」の「,0」を一旦削除後「,0」追加）
整備完了日 -> finished（「整備完了日,N,8,0」の「,0」を一旦削除後「,0」追加）
種別 -> type
名称 -> name

RailCL.dbfのタイトルが日本語なのでアルファベットにします。
存在期間自 -> presence（「存在期間自,N,8,0」の「,0」を一旦削除後「,0」追加）
整備完了日 -> finished（「整備完了日,N,8,0」の「,0」を一旦削除後「,0」追加）
種別 -> type
名称 -> name

RdEdg.dbfのタイトルが日本語なのでアルファベットにします。
存在期間自 -> presence（「存在期間自,N,8,0」の「,0」を一旦削除後「,0」追加）
整備完了日 -> finished（「整備完了日,N,8,0」の「,0」を一旦削除後「,0」追加）
種別 -> type
名称 -> name

WL.dbfのタイトルが日本語なのでアルファベットにします。
存在期間自 -> presence（「存在期間自,N,8,0」の「,0」を一旦削除後「,0」追加）
整備完了日 -> finished（「整備完了日,N,8,0」の「,0」を一旦削除後「,0」追加）
種別 -> type
名称 -> name

2008年8月20日水曜日

プレゼンテーション 12XML Overlays 地図上に面を描く

XML Overlays ４０ー４３ページ

XML Overlays Drawing Polygons ４３ページ
地図上に面を描きます。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="imagetoolbar" content="no">
<title>XMLOverlay Polygon Sample  - ka-Map!</title>

<!--
自分の環境に合わせて src="" の指定を修正してください。
-->
<script type="text/javascript" src="http://localhost/ka-map/DHTMLapi.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/xhr.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaMap.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaTool.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/wz_dragdrop.js"></script>

<script type="text/javascript" src="http://localhost/ka-map/kaZoomer.js"></script>

<!-- added for XMLOverlay -->
<script type="text/javascript" src="http://localhost/ka-map/xhr.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/excanvas.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/wz_jsgraphics.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/XMLOverlay/kaXmlOverlay.js"></script>
<!-- end added for XMLOverlay -->

<!-- 地図の描画部分。 -->
<script type="text/javascript">
var myKaMap = null;

SET_DHTML();

function myOnLoad()
{
    initDHTMLAPI();

    myKaMap = new kaMap( 'viewport' );

    myKaMap.registerForEvent( KAMAP_MAP_INITIALIZED, null, myMapInitialized );

     //自分の環境に合わせて変更してください
    myKaMap.server = 'http://localhost/ka-map/';

    //kaNavigatorのkaZoomerを設定しています。
    var kaNav = new kaNavigator( myKaMap );
    kaNav.activate();
    myKaZoomer = new kaZoomer(myKaMap);
    drawPage();
    myKaMap.initialize('worldata');

}

function myMapInitialized(){
                printMyOverlay();
}


//ブラウザのサイズに合わせて地図のサイズを決めています。
function drawPage()
{
    var browserWidth = getInsideWindowWidth();
    var browserHeight = getInsideWindowHeight();

    var viewport = getRawObject('viewport');

    viewport.style.width = browserWidth + "px";
    viewport.style.height = browserHeight + "px";

    myKaMap.resize();
}
</script>

<script type="text/javascript">
/*
*  ADDED PART OF CODE FOR OBJECT OVERLAY EXAMPLE
*/
//my point array


var aPoints = new Array();
aPoints[0] = new Array(34.01,-6.50,'Rabat');
aPoints[1] = new Array(41.23,2.11,'Barcelona');
aPoints[2] = new Array(48.52,2.19,'Paris');
aPoints[3] = new Array(41.53,12.29,'Rome');
aPoints[4] = new Array(43.47,11.15,'Florence');
aPoints[5] = new Array(41.11,29.08,'Istanbul');
aPoints[6] = new Array(18.35,-70.26,'Santo Domingo');
aPoints[7] = new Array(46.31,6.38,'Lausanne');

//the function
var canvas = null;
function printMyOverlay () {

                myXmlOverlay = new kaXmlOverlay( myKaMap, 250 ); //z-index

                var line =null;
                var coordinates = "";


                //上記のpoint arrayを順番に読み込んでいます。
                for(i=0;i<aPoints.length;i++){
                        var  latitude = aPoints[i][0];
                        var longuitude = aPoints[i][1];

                        //ポイントを描いています
                        var pointId = i;
                        var my_point =myXmlOverlay.addNewPoint(pointId, longuitude, latitude);
                        var my_symbol = new kaXmlSymbol();
                        my_symbol.size = 12;
                        my_symbol.color = '#ff0000';
                        my_point.onmouseover = myPointClicked;

                        my_point.addGraphic(my_symbol);

                        if (i>0) coordinates += ",";
                        coordinates += longuitude + " " + latitude;
                }
                //ポイントをi順に線で結んでいきます
                my_point = myXmlOverlay.addNewPoint("Line",longuitude, latitude);
                line = new kaXmlLinestring(my_point);
                line.readCoordinates(my_point, coordinates);
                line.color = 'yellow';
                line.stroke = 2;
                my_point.addGraphic(line);

               //閉じている線の内側を塗りつぶしています
               my_point = myXmlOverlay.addNewPoint("myPoly",longuitude, latitude);
               poly = new kaXmlPolygon(my_point);
               poly.readCoordinates(my_point, coordinates);
                poly.color = 'green';
                my_point.addGraphic(poly);
}


function myPointClicked(){
        alert(this.mylabel);
}

/*
*  END OF ADDED CODE
*/
</script>

<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  background-color: #d9d9d9;
  overflow: hidden;
}

#viewport {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  overflow: hidden;
  border: 1px solid #000000;
  cursor: move;
  -moz-box-sizing: border-box;
}

</style>
</head>
<body onload="myOnLoad();" onresize="drawPage();">
<div id="viewport"> </div>
</div>
</body>
</html>

2008年8月19日火曜日

プレゼンテーション 11XML Overlays 地図上に線を描く

XML Overlays ４０ー４４ページ

XML Overlays Drawing Lines ４２ページ
地図上に線を描きます。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="imagetoolbar" content="no">
<title>XMLOverlay Line Sample - ka-Map!</title>

<!--
自分の環境に合わせて src="" の指定を修正してください。
-->
<script type="text/javascript" src="http://localhost/ka-map/DHTMLapi.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/xhr.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaMap.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaTool.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/wz_dragdrop.js"></script>

<script type="text/javascript" src="http://localhost/ka-map/kaZoomer.js"></script>

<!-- added for XMLOverlay -->
<script type="text/javascript" src="http://localhost/ka-map/xhr.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/excanvas.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/wz_jsgraphics.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/XMLOverlay/kaXmlOverlay.js"></script>
<!-- end added for XMLOverlay -->

<!-- 地図の描画部分。 -->
<script type="text/javascript">
var myKaMap = null;
var queryParams = null;
SET_DHTML();


function myOnLoad()
{
    initDHTMLAPI();

    myKaMap = new kaMap( 'viewport' );

         //自分の環境に合わせて変更してください
        myKaMap.server = 'http://localhost/ka-map/';

    myKaMap.registerForEvent( KAMAP_MAP_INITIALIZED, null, myMapInitialized );

    //kaNavigatorのkaZoomerを設定しています。
    var kaNav = new kaNavigator( myKaMap );
    kaNav.activate();
    myKaZoomer = new kaZoomer(myKaMap);
    drawPage();
    myKaMap.initialize( 'worldata');

}

function myMapInitialized(){
                printMyOverlay();
}


//ブラウザのサイズに合わせて地図のサイズを決めています。
function drawPage()
{
    var browserWidth = getInsideWindowWidth();
    var browserHeight = getInsideWindowHeight();

    var viewport = getRawObject('viewport');

    viewport.style.width = browserWidth + "px";
    viewport.style.height = browserHeight + "px";
   
    myKaMap.resize();
}
</script>

<script type="text/javascript">
/*
*  ADDED PART OF CODE FOR OBJECT OVERLAY EXAMPLE
*/
//my point array


var aPoints = new Array();
aPoints[0] = new Array(34.01,-6.50,'Rabat');
aPoints[1] = new Array(41.23,2.11,'Barcelona');
aPoints[2] = new Array(48.52,2.19,'Paris');
aPoints[3] = new Array(41.53,12.29,'Rome');
aPoints[4] = new Array(43.47,11.15,'Florence');
aPoints[5] = new Array(41.11,29.08,'Istanbul');
aPoints[6] = new Array(18.35,-70.26,'Santo Domingo');
aPoints[7] = new Array(46.31,6.38,'Lausanne');

//the function
var canvas = null;
//線を描く関数
function printMyOverlay () {

                myXmlOverlay = new kaXmlOverlay( myKaMap, 250 );　//z-index
                var line =null;
                var coordinates = "";

                   //上記のpoint arrayを順番に読み込んでいます。
                for(i=0;i<aPoints.length;i++){
                        var  latitude = aPoints[i][0];
                        var longuitude = aPoints[i][1];

                        var pointId = i;
                        var my_point =myXmlOverlay.addNewPoint(pointId, longuitude, latitude);

                        if (i>0) coordinates += ",";
                        coordinates += longuitude + " " + latitude;
                }
                   //ポイントをi順に線で結んでいきます
                my_point = myXmlOverlay.addNewPoint("Line",longuitude, latitude);
                line = new kaXmlLinestring(my_point);
                line.readCoordinates(my_point, coordinates);
                line.color = 'yellow';
                line.stroke = 2;
                my_point.addGraphic(line);
}


function myPointClicked(){
        alert(this.mylabel);
}

/*
*  END OF ADDED CODE
*/
</script>

<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  background-color: #d9d9d9;
  overflow: hidden;
}

#viewport {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  overflow: hidden;
  border: 1px solid #000000;
  cursor: move;
  -moz-box-sizing: border-box;
}


</style>
</head>
<body onload="myOnLoad();" onresize="drawPage();">
<div id="viewport"></div>
</div>
</body>
</html>

2008年8月18日月曜日

プレゼンテーション 10XML Overlays 地図上に点を描く

XML Overlays ４０ー４４ページ

XML Overlays Drawing Points ４１ページ
地図上に点を描きます。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>XMLOverlay Point sample - ka-Map!</title>

<!--
自分の環境に合わせて src="" の指定を修正してください。
-->
<script type="text/javascript" src="http://localhost/ka-map/DHTMLapi.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/xhr.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaMap.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaTool.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/wz_dragdrop.js"></script>

<script type="text/javascript" src="http://localhost/ka-map/kaZoomer.js"></script>
<!-- added for XMLOverlay -->
<script type="text/javascript" src="http://localhost/ka-map/excanvas.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/wz_jsgraphics.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/XMLOverlay/kaXmlOverlay.js"></script>
<!-- end added for XMLOverlay -->

<!-- 地図の描画部分。 -->
<script type="text/javascript">
var myKaMap = null;
SET_DHTML();

function myOnLoad()
{
    initDHTMLAPI();

    myKaMap = new kaMap( 'viewport' );

         //自分の環境に合わせて変更してください
        myKaMap.server = 'http://localhost/ka-map/';
        myKaMap.registerForEvent( KAMAP_MAP_INITIALIZED, null, mapInitialized );

    //kaNavigatorのkaZoomerを設定しています。
    var kaNav = new kaNavigator( myKaMap );
    kaNav.activate();
    myKaZoomer = new kaZoomer(myKaMap);
    drawPage();
    myKaMap.initialize('worldata');
}

//ブラウザのサイズに合わせて地図のサイズを決めています。
function drawPage()
{
    var browserWidth = getInsideWindowWidth();
    var browserHeight = getInsideWindowHeight();

    var viewport = getRawObject('viewport');

    viewport.style.width = browserWidth + "px";
    viewport.style.height = browserHeight + "px";

    myKaMap.resize();
}

//点を描く関数を呼び出しています。
function mapInitialized( eventID, mapName )
{
                printMyOverlay();
}
</script>

<script type="text/javascript">
/*
*  ADDED PART OF CODE FOR OBJECT OVERLAY EXAMPLE
*/
//my point array


var aPoints = new Array();
aPoints[0] = new Array(34.01,-6.50,'Rabat');
aPoints[1] = new Array(41.23,2.11,'Barcelona');
aPoints[2] = new Array(48.52,2.19,'Paris');
aPoints[3] = new Array(41.53,12.29,'Rome');
aPoints[4] = new Array(43.47,11.15,'Florence');
aPoints[5] = new Array(41.11,29.08,'Istanbul');
aPoints[6] = new Array(18.35,-70.26,'Santo Domingo');
aPoints[7] = new Array(46.31,6.38,'Lausanne');

var myOverlay;

//点を描く関数
function printMyOverlay () {

        myOverlay = new kaXmlOverlay( myKaMap, 300 );//z-index

        myOverlay.handler_onclick = myPointClicked;
        myOverlay.collision = true;//重なったとき間引き
        myOverlay.col_size = 30;
        var line =null;
        var i;

          //上記のpoint arrayを順番に読み込んでいます。
        for(i=0;i<aPoints.length;i++){

                var  latitude = aPoints[i][0];
                var longuitude = aPoints[i][1];
                var pointId = i;
                var my_point = myOverlay.addNewPoint(pointId, longuitude, latitude);
                var my_symbol = new kaXmlSymbol();
                my_symbol.size = 12;
                my_symbol.color = '#ff0000';

                my_point.addGraphic(my_symbol);

        }

        myOverlay.resetCollisionPoints();
}

//ポインタをクリックしたときに実行される関数
function myPointClicked(p){
        alert(p.pid);
}

//ポインタが重なったときに実行される関数
function myPointOver(t){
        alert(t + " over");
}

var myXmlOverlay;

function ovrFromXml( ovr ) {

        if (ovr) {
        myXmlOverlay = new kaXmlOverlay( myKaMap, 250 );
                myXmlOverlay.handler_onclick = myPointClicked;
        myXmlOverlay.loadXml(ovr);
        }
}

/*
*  END OF ADDED CODE
*/
</script>

<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  background-color: #d9d9d9;
  overflow: hidden;
}

#viewport {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  overflow: hidden;
  border: 1px solid #000000;
  cursor: move;
  -moz-box-sizing: border-box;
}

</style>
</head>
<body onload="myOnLoad();" onresize="drawPage();">
<div id="viewport"> </div>
</div>
</body>
</html>

2008年8月14日木曜日

プレゼンテーション 9ツールチップ

Tooltips ３８ページ
ツールチップ（tooltip）は一般的なグラフィックユーザインターフェイス要素です。
itemにカーソル（ポインタ）を重ねると、itemに関する補足情報が記された小さなボックスが現れます。

foss4g2007/tooltip_example.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>ka-Map!</title>

<!--
自分の環境に合わせて src="" の指定を修正してください。
-->
<script type="text/javascript" src="http://localhost/ka-map/DHTMLapi.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/xhr.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaMap.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaTool.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/wz_dragdrop.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaZoomer.js"></script>

<!-- added for demo -->
<script type="text/javascript" src="http://localhost/ka-map/tools/tooltip/kaToolTip.js"></script>

<!-- 地図の描画部分。 -->
<script type="text/javascript">
var myKaMap = null;
var queryParams = null;
SET_DHTML();


function myOnLoad()
{
    initDHTMLAPI();

        //Ka-Map init
    myKaMap = new kaMap( 'viewport' );

         //自分の環境に合わせて変更してください
        myKaMap.server = 'http://localhost/ka-map/';

    //kaNavigatorのkaZoomerを設定しています。
    var kaNav = new kaNavigator( myKaMap );
    kaNav.activate();
    myKaZoomer = new kaZoomer(myKaMap);
    drawPage();
    myKaMap.initialize('worldata');

        //Demo function
     printMyTips();
}

//ブラウザのサイズに合わせて地図のサイズを決めています。
function drawPage()
{
    var browserWidth = getInsideWindowWidth();
    var browserHeight = getInsideWindowHeight();

    var viewport = getRawObject('viewport');

    viewport.style.width = browserWidth + "px";
    viewport.style.height = browserHeight + "px";

    myKaMap.resize();
}
</script>

<!-- ポイントの描画。ポインタを重ねた時の動作も含まれています。 -->
<script type="text/javascript">
/*
*  ADDED PART OF CODE FOR OBJECT OVERLAY EXAMPLE
*/
//my point array
//Arrayの中身は、経度、緯度、名前、外部リンク、画像の順になってます。
//インターネットにつないでいる状態で、外部リンクが表示されます。
var aPoints = new Array();
aPoints[0] = new Array(34.01,-6.50,'Rabat','http://en.wikipedia.org/wiki/Rabat%2C_Morocco','../foss4g2006/img/300px-Rabat_Mausole_MohammedV.jpg');
aPoints[1] = new Array(41.23,2.11,'Barcelona','http://en.wikipedia.org/wiki/Barcelona%2C_Spain','../foss4g2006/img/240px-Sta-eulalia.jpg');
aPoints[2] = new Array(48.52,2.19,'Paris','http://en.wikipedia.org/wiki/Paris%2C_France','../foss4g2006/img/250px-Aftnn_The_Seine_from_the_Eiffel_Tower.jpg');
aPoints[3] = new Array(41.53,12.29,'Rome','http://en.wikipedia.org/wiki/Roma%2C_Italia','../foss4g2006/img/300px-Castel_Sant_Angelo.jpg');
aPoints[4] = new Array(43.47,11.15,'Florence','http://en.wikipedia.org/wiki/Florence%2C_Italy','../foss4g2006/img/210px-Florence.jpg');
aPoints[5] = new Array(41.11,29.08,'Istanbul','http://en.wikipedia.org/wiki/Istanbul%2C_Turkey','../foss4g2006/img/275px-240774807TYycPB_ph.jpg');
aPoints[6] = new Array(18.35,-70.26,'Santo Domingo','http://en.wikipedia.org/wiki/Santo_Domingo','../foss4g2006/img/300px-Santo_domingo.jpg');
aPoints[7] = new Array(46.31,6.38,'Lausanne','http://en.wikipedia.org/wiki/Lausanne%2C_Switzerland','../foss4g2006/img/250px-Cathedral_on_a_hill_in_Lausanne.jpg');

//the function
var canvas = null;
var toolTip = null;

        function printMyTips () {

                var idx = 50;//canvas zindex
                canvas = myKaMap.createDrawingCanvas(idx);

                toolTip = new kaToolTip( myKaMap);
                var offsetX=-6;//offset to move the image left-right
                var offsetY=-19;//offset to move the image top-bottom
                toolTip.setTipImage(myKaMap.server + 'images/tip-green.png',offsetX,offsetY);

                   //上記のpoint arrayを順番に読み込んでいます。
                for(i=0;i<aPoints.length;i++){
                        var div = document.createElement('div');

                        var img = document.createElement('img');
                        img.src = myKaMap.server + 'images/tip-red.png';

                        img.style.position='absolute';
                        img.style.left='-6px';
                        img.style.top='-19px';

                        //set the event
                        img.onmouseover=myTipClicked;

                        //set the label
                        img.mylabel = aPoints[i][2];

                        //append image the our div
                        div.appendChild(img);

                        //add the object to our map
                        var lon = aPoints[i][0];
                        var lat = aPoints[i][1];
                        myKaMap.addObjectGeo(canvas,lat,lon,div);
                }

        }

//ポインタが重なったときに実行される関数
function myTipClicked(){
        //alert(this.mylabel);
        for(i=0;i<aPoints.length;i++){
                if(aPoints[i][2] == this.mylabel){

                        var myurl = aPoints[i][3];
                        var myimg = aPoints[i][4];
                        var lon = aPoints[i][0];
                        var lat = aPoints[i][1];

                            //ボックス内に書かれるHTMLタグ
                        var textToShow = '';
                        textToShow += '<div style="position:absolute;width:10px;right:10px;top:10px;color:red;border:1px solid black;"><a href="#" onclick="toolTip.move()">X</a></div>';
                        textToShow += '<h1>'+this.mylabel+'</h1>';
                        textToShow += '<a href="' + myurl + '" target="_blank"><img src="' + myimg + '" width="200px"></a>';
                        toolTip.setText( textToShow );

                        toolTip.moveGeo(lat,lon);
                }
        }
}

/*
*  END OF ADDED CODE
*/
</script>

<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  background-color: #d9d9d9;
  overflow: hidden;
}
#viewport {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  overflow: hidden;
  border: 1px solid #000000;
  cursor: move;
  -moz-box-sizing: border-box;
}


</style>

//自分の環境に合わせて href="" の指定を修正してください。
<link rel="stylesheet" href="http://localhost/ka-map/tools/tooltip/tooltip.css" type="text/css" />

</head>
<body onload="myOnLoad();" onresize="drawPage();">
<div id="viewport">
<div id="kaLogo"></div>
</div>
</body>
</html>

2008年8月13日水曜日

プレゼンテーション 8オブジェクトの追加

Adding Objects 36ページ
地図にHTMLエレメントを追加することができます。
JavaScriptが分からないと少し難しいかもしれません。

foss4g2007/object_add_example.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="imagetoolbar" content="no">
<title>ka-Map!</title>

<!--
自分の環境に合わせて src="" の指定を修正してください。
-->
<script type="text/javascript" src="http://localhost/ka-map/DHTMLapi.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/xhr.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaMap.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaTool.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/wz_dragdrop.js"></script>
<script type="text/javascript" src="http://localhost/ka-map/kaZoomer.js"></script>

<!-- 地図の描画部分。 -->
<script type="text/javascript">
var myKaMap = null;
var queryParams = null;
SET_DHTML();//DHTMLapi.jsの準備

function myOnLoad()
{
    initDHTMLAPI();


    myKaMap = new kaMap( 'viewport' );
        //myKaMap.server = '../../htdocs/'; 自分の環境に合わせて変更してください
        myKaMap.server = 'http://localhost/ka-map/';

    //kaNavigatorのkaZoomerを設定しています。
    var kaNav = new kaNavigator( myKaMap );
    kaNav.activate();
    myKaZoomer = new kaZoomer(myKaMap);

    drawPage();
    myKaMap.initialize('worldata');

     printMyTips();
}

//ブラウザのサイズに合わせて地図のサイズを決めています。
function drawPage()
{
    var browserWidth = getInsideWindowWidth();
    var browserHeight = getInsideWindowHeight();

    var viewport = getRawObject('viewport');

    viewport.style.width = browserWidth + "px";
    viewport.style.height = browserHeight + "px";

    myKaMap.resize();
}
</script>

<!-- ポイントの描画。クリックした時の動作も含まれています。 -->
<script type="text/javascript">
/*
*  ADDED PART OF CODE FOR OBJECT OVERLAY EXAMPLE
*/
//my point array
var aPoints = new Array();
aPoints[0] = new Array(34.01,-6.50,'Rabat');
aPoints[1] = new Array(41.23,2.11,'Barcelona');
aPoints[2] = new Array(48.52,2.19,'Paris');
aPoints[3] = new Array(41.53,12.29,'Rome');
aPoints[4] = new Array(43.47,11.15,'Florence');
aPoints[5] = new Array(41.11,29.08,'Istanbul');
aPoints[6] = new Array(18.35,-70.26,'Santo Domingo');
aPoints[7] = new Array(46.31,6.38,'Lausanne');

//the function
var canvas = null;
        function printMyTips () {
                var idx = 50;//canvas zindex
                canvas = myKaMap.createDrawingCanvas(idx);

                //上記のpoint arrayを順番に読み込んでいます。
                for(i=0;i<aPoints.length;i++){
                        var div = document.createElement('div');

                        //imgのプロパティを設定しています。
                        var img = document.createElement('img');
                        img.src = myKaMap.server + 'images/tip-red.png';
                        img.mylabel = aPoints[i][2]; //i番めのaPoints Arrayの3番め 都市名
                        img.style.position='absolute';
                        img.style.left='-6px';
                        img.style.top='-19px';

                        //クリックしたときに呼び出す関数
                        img.onclick=myTipClicked;

                        div.appendChild(img);

                        var lon = aPoints[i][0]; //i番めのaPoints Arrayの1番め 経度
                        var lat = aPoints[i][1]; //i番めのaPoints Arrayの1番め 緯度
                        myKaMap.addObjectGeo(canvas,lat,lon,div);
                }

        }

function myTipClicked(){
        alert(this.mylabel);
}

/*
*  END OF ADDED CODE
*/
</script>

<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  background-color: #d9d9d9;
  overflow: hidden;
}

#viewport {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  overflow: hidden;
  border: 1px solid #000000;
  cursor: move;
  -moz-box-sizing: border-box;
}

</style>
</head>
<!-- ページを読み込んだときに実行される関数 -->
<body onload="myOnLoad();" onresize="drawPage();">
<div id="viewport"></div>
</div>
</body>
</html>

2008年8月12日火曜日

プレゼンテーション 7Webページに地図を挿入　ポイントの追加

Adding A Point ３０ページ
リンクをクリックすると、そのポイントにズームインさせます。


<html>
<head>
<title>practice3 Navigator</title>

<script type="text/javascript" src="http://localhost/ka-map/xhr.js">
</script>
<script type="text/javascript" src="http://localhost/ka-map/kaMap.js">
</script>
<script type="text/javascript" src="http://localhost/ka-map/kaTool.js">
</script>

<script type="text/javascript">
var myKaMap;
var myNav;
var myCanvas; //ここを追加

window.onload = function() {
 myKaMap = new kaMap('mapDiv');
 myKaMap.server = 'http://localhost/ka-map/';
 myKaMap.initialize();

 myNav = new kaNavigator(myKaMap);
 myNav.activate();
}
//ここを追加
function zoomToDMSG() {
 var lon = -75.726061; //1509106.04
 var lat = 45.401306; //-172671.12

 var img = document.createElement('img');
 img.src = 'http://localhost/ka-map/images/kamap.gif';
 img.width = 36;
 img.height = 42;

 myKaMap.addObjectGeo(myCanvas, lon, lat, img);
 myKaMap.zoomTo(lon, lat, 15000000); //ka-Mapで設定した倍率と合わせます。
}
</script>

<style type="text/css">
#mapDiv {
 position: relative;
 height: 200px;
 width: 200px;
 background-color: white;
 border: 1px solid black;
}
</style>

</head>
<body>
<h1>foss4g2007 presentation</h1>

<div id="mapDiv"></div>
<!-- ここを追加 -->gt;
<a href="javascript:zoomToDMSG()"gt;show DMSG Office</agt;

</body>
</html>

プレゼンテーション 6Webページに地図を挿入　パン機能

Add Navigation Controls ２８ページ
次のように、kaNavigatorを追加すると地図の表示部分を移動（パン）できます。


<html>
<head>
<title>practice2 Navigator</title>

<script type="text/javascript" src="http://localhost/ka-map/xhr.js">
</script>
<script type="text/javascript" src="http://localhost/ka-map/kaMap.js">
</script>
<script type="text/javascript" src="http://localhost/ka-map/kaTool.js">
</script>

<script type="text/javascript">
var myKaMap;
var myNav; //ここを追加

window.onload = function() {
 myKaMap = new kaMap('mapDiv');
 myKaMap.server = 'http://localhost/ka-map/';
 myKaMap.initialize();

 myNav = new kaNavigator(myKaMap); //ここを追加
 myNav.activate(); //ここを追加
}
</script>

<style type="text/css">
#mapDiv {
 position: relative;
 height: 200px;
 width: 200px;
 background-color: white;
 border: 1px solid black;
}
</style>

</head>
<body>
<h1>foss4g2007 presentation</h1>

<div id="mapDiv"></div>

</body>
</html>

プレゼンテーション 5Webページに地図を挿入

Using The API ２１ページ
Webページに地図を挿入してみます。
Getting Started... ２２ページ
最初に、Webページを用意します。ka-map/presentation ディレクトリ内に次の内容で practice.html ファイルを作成します。


<html>
 <head>
  <title>practice</title>
 </head>
 <body>
  <h1>foss4g2007 presentation</h1>
 </body>
</html>

２３から２６ページ
次のように追加します。


<html>
<head>
<title>practice</title>

<!--
Add Script ２３ページ
次のようにスクリプトタグをページに追加します。
-->
<script type="text/javascript" src="http://localhost/ka-map/xhr.js">
</script>
<script type="text/javascript" src="http://localhost/ka-map/kaMap.js">
</script>
<script type="text/javascript" src="http://localhost/ka-map/kaTool.js">
</script>

<!--
Initialize The Map ２６ページ
次のように、スクリプトタグを追加します。
-->
<script type="text/javascript">
var myKaMap;

window.onload = function() {
 myKaMap = new kaMap('mapDiv');
 myKaMap.server = 'http://localhost/ka-map/';
 myKaMap.initialize();
}
</script>

<!--
Mandatory and optional styles for the map ２５ページ
次のように、styleタグを追加します。地図の表示形式です。
-->
<style type="text/css">
#mapDiv {
 position: relative;
 height: 200px;
 width: 200px;
 background-color: white;
 border: 1px solid black;
}
</style>

</head>
<body>
<h1>foss4g2007 presentation</h1>

<!--
Add A Map To The Page ２４ページ
次のように、divタグを追加します。ここに地図が挿入されます。
-->
<div id="mapDiv"></div>

</body>
</html>

Try It Out ２７ページ
Webブラウザで表示します。
アドレスバーに次のように入力してください。

http://localhost/ka-map_presen/practice.html

2008年8月11日月曜日

プレゼンテーション 4ka-MapのLAYER Level Metadata

LAYER Level Metadata Experiments １６ページ
"opacity" [1-100] 透過度 1:透過度0 100:透過度100%
*階級区分に試してみました。（tokyo_pgis_color.map）ダミーのレイヤ gyoseikai2 を削除して totalpop レイヤの TRANSPARENCY を削除、METADATA に "opacity" "50" を追加しました。


---
 LAYER
   NAME totalpop
---
#  TRANSPARENCY 50 #削除かコメントアウト
   CLASSITEM "total"
   METADATA
     "group_title" "人口"
     "opacity" "50" #追加
   END
---

"imageformat" [DITHERED|PNG24|PNG|GIF] １７ページ
DITHERED は、アンチエイリアスのラベルや細い線に有効で、PNG24フォーマットですがPNG（8bit）より容量を軽くできます。

"tile_soureces" ["auto"|"cache"|"redraw"|"nocache"]
auto （default）tile.phpが新しいタイル（画像）を描画するか決めます。
cashe すべてのタイルが描画済みなら、要求されたタイルがあるキャッシュをキャッシュディレクトリから指定します。config.phpにブラウザがアクセス可能なキャッシュへのパスを指定する必要があります。
（新しくタイルを生成したり再描画しないということなのか分かりません。）
redraw 再描画間隔を元にクライアントが再要求してタイルを生成します。
データの有効性は、refresh_intervalによって影響されます。

１８ページ
nocache 1 キャッシュやより大きなメタタイルを生成しないで再描画します。
2 マップサーバCGIスタイル置換変数を使用します。

"Refresh_interval" AND "Redraw_interval" １９ページ
redraw_interval キャッシュのデータが無効になる間隔。ka-Mapクライアントがタイルを要求したときにtile sourceが再描画のために置かれます。すべてのレイヤ／グループとredraw_intervalのcurrent timestampが経過します。

refesh_interval レイヤ／グループがクライアントによって自動的に新しくする間隔。指定しないか"0"または"0"以下ならレイヤ／グループは自動的に新しくなりません。
定期的にデータを変えるために、これとtile_source "redraw"やtile_source "nocache" を組み合わせるととても効果的です。

プレゼンテーション 3ka-MapのMAP Level Metadata

MAP Level Metadata １４ページ
ka-Map用MAPオブジェクトのMETADATA設定

"max_extents" "auto" MAPファイルに設定したEXTENTの値からパンやズーム操作しても外れないようになります。
"minx, miny, maxx, maxy"に座標を設定すると、この値から外れないようになります。

"version" "" を変えるとキャッシュを削除することをしなくても自動的に再描画してくれます。

プレゼンテーション 2ka-MapのGROUP

ka-MapのGROUP　１２ページ
1 GROUPは、クライアントが操作できる別々のレイヤを生成します。
2 同じGROUPのレイヤは、１つのタイルに描画されます。
3 GROUPを設定しないレイヤはすべて、自動的にBASE GROUPになります。
4 レイヤの順番は、GROUPを使うことで変えられます。
5 GROUPを増やすとパフォーマンスは低下し、キャッシュは増えます。

１３ページにあるように、新たにGROUPを設定したら、キャッシュ（一時保存ディレクトリとブラウザの）を削除してka-Mapを再読み込みします。

2008年8月10日日曜日

プレゼンテーション 1プレゼンテーションの表示

ka-Map のCVSバージョンには、プレゼンテーションがおまけについています。

ka-map/presentation/foss4g2007/foss4g2007.html

が、ブラウザで開けるようにサイト設定をしてください。
私は、apacheのサイト設定を次のように追加しました。

/etc/apache2/sites-available/kamap


---
Alias /ka-map_presen/ "/home/user/ka-map/presentations/"
<Directory /home/user/ka-map/presentations/>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride None
        Order allow,deny
        allow from all
</Directory>
---

webブラウザのアドレスバーに

http://localhost/ka-map_presen/foss4g2007/foss4g2007.html

と入力します。
スライドになっています。
キー操作は ->次へ、<-前へになっています。

内容は、準備されたデータ gmap75 を使ってka-Mapを操作するようにできているようです。
前半には、ka-Map の特徴が述べられてます。
５ページをみると多くの人たちが関わっているのが分かります。
１１ページから自分が気になるところをピックアップして詳しくみてみました。

確認している機能は結果を載せておきますが、確認していない機能もあります。

2008年8月9日土曜日

PostGISで地図を表示 10東京都の地図グラフ

東京都の人口をグラフで表します。

レイヤ部分を記述します。
円積図のマップファイルのうち、IMAGETYPEを修正し、SYMBOLオブジェクトを削除、totalpopレイヤを次のように修正します。


MAP
 NAME tokyo_pgis_graph_map
 STATUS ON
 SIZE 600 300
 EXTENT 138.85 35.4 140 35.975
 UNITS DD
 IMAGECOLOR 255 255 255
 IMAGETYPE png24 #ここを修正
 FONTSET "fonts.txt"
---
 LAYER
   NAME totalpop
   GROUP totalpop
   TYPE chart
   STATUS ON
   CONNECTIONTYPE POSTGIS
   CONNECTION "dbname=tokyo host=localhost user=user password=password"
   DATA "the_geom FROM (
     SELECT gyoseikai.gid AS gid,
       gyoseikai.gun_seirei AS gun_seirei,
       gyoseikai.shikuchoso AS shikuchoso,
       gyoseikai.code AS code,
       gyoseikai.the_geom AS the_geom,
       population.total AS total,
       population.male AS male,
       population.female AS female,
       population.foreigner AS foreigner
     FROM gyoseikai LEFT OUTER JOIN population ON gyoseikai.code = population.code)
     AS gyosei_pop USING UNIQUE gid USING SRID=-1"
   PROCESSING "chart_type=pie"
   PROCESSING "chart_size=20"
   METADATA
     "group_title" "人口"
   END
   CLASS
     NAME "男"
     STYLE
       SIZE [male]
       COLOR 51 51 255
     END
   END
   CLASS
     NAME "女"
     STYLE
       SIZE [female]
       COLOR 255 51 51
     END
   END
   CLASS
     NAME "外国人"
     STYLE
       SIZE [foreigner]
       COLOR 51 255 51
     END
   END
 END
---

画像で奥多摩町が外国人100%になっていますが、原因は分かりません。
所属未定地は人口がありません。グラフは等分割されました。


  gid | gun_seirei | shikuchoso | code  | total  |  male  | female | foreigner
------+------------+------------+-------+--------+--------+--------+-----------
   39 | 千代田区   |            | 13101 |  48712 |  22590 |  23414 |      2708
   42 | 中央区     |            | 13102 | 113935 |  52248 |  57098 |      4589
   59 | 港区       |            | 13103 | 218410 |  91805 | 104513 |     22092
   58 | 港区       |            | 13103 | 218410 |  91805 | 104513 |     22092
---
    1 | 西多摩郡   | 奥多摩町   | 13308 |   6574 |   3196 |   3360 |        18
---
   74 |            | 所属未定地 |       |        |        |        |

登録: 投稿 (Atom)

ブログ アーカイブ

自己紹介