ラベル Feature Style の投稿を表示しています。 すべての投稿を表示
ラベル Feature Style の投稿を表示しています。 すべての投稿を表示

2008年10月6日月曜日

OpenLayers 13 Feature Style 地図記号を表示

無料で使えるEPSフリー素材集【EPSフリー素材.jp】
http://freesozai.jp/

から学校関係の地図記号をmapsignという名前のフォルダを作ってそこにダウンロードしました。
mkg_013から017の低解像度を選びました。

Eclipseで地図記号を次のようにインポートします。
0 プロジェクトウィンドウのOpenLayersprojを右クリックして「新規」-「フォルダ」をクリックします。
「フォルダー」画面で「フォルダー名」を「mapsign」と入力し「終了」ボタンをクリックします。
1 プロジェクトウィンドウのOpenLayersprojを右クリックしてインポートをクリックします。
2 「選択」画面で「一般」-「ファイル・システム」を選んで「次へ」ボタンをクリックします。
3 「ファイル・システム」画面の「次のディレクトリから」欄右側の「参照」ボタンをクリックします。
4 (私の場合は)デスクトップのmapsignフォルダを選んで「OK」ボタンをクリックします。
5 「すべて選択ボタン」をクリックします。
6 「宛て先フォルダー」欄右側の「参照」ボタンをクリックします。
7 「OpenLayersproj」-「mapsign」を選んで「OK」ボタンをクリックします。
8 「選択」画面で「終了」ボタンをクリックします。

feature_style_unique.html を参考に地図を作成します。
0 feature_style_unique.html をダブルクリックして開きます。
1 プロジェクトビューのOpenLayersprojフォルダを右クリックして、新規->HTMLファイルをクリックします。
2 HTMLファイルウィンドウでファイル名をfeature_style_mapsign.htmlと入力し、終了ボタンをクリックします。
3 エディタのタブをエディタビュー内の下へドラッグすると2段になってみやすくなります。
4 charsetをUTF-8にして、<title>をFeature Style Map Signにします。
5 feature_style_basic.htmlの内容をコピーしてfeature_style_mapsign.html ファイルに貼り付け修正します。

6 kanagawa_mlit_pgis_school.map の elementary_school レイヤように次のように修正します。

---
var style_markRed = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
style_markRed.graphicWidth = 15; //画像の幅
style_markRed.graphicHeight = 15; //画像の高さ
style_markRed.graphicOpacity = 1; //画像の透明度
style_markRed.graphicXOffset = -(style_markRed.graphicWidth/2);
//画像を横方向に画像幅の半分ずらす
style_markRed.graphicYOffset = -style_markRed.graphicHeight;
//画像を縦方向に画像高さ分のずらす
style_markRed.externalGraphic = "./mapsign/junior_school.png"; //画像のパス

7他のレイヤも同様に追加します。

LAYER NAME extarnalGraphic
juniorhigh_school ./mapsign/junior_school.png
high_school ./mapsign/high_school.png
technical_college ./mapsign/tec_college.png
college ./mapsign/2college.png
university ./mapsign/university.png

technical_college、college、universityは、画像の幅と高さを "25" にすると見やすくなります。

8 Webブラウザを起動して、アドレスバーに次のように入力します。

http://localhost/openlayers/OpenLayersproj/feature_style_mapsign.html

2008年10月1日水曜日

OpenLayers 12c Feature Style Markerで表示 HTMLファイル


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Feature Style Unique</title>
<link rel="stylesheet" href="theme/default/style.css" type="text/css" />
<style type="text/css">
#map {
width: 512px;
height: 512px;
border: 1px solid black;
}
</style>
<script src="lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer1, layer3, layer4, layer5, layer6, layer7, layer8;
//layer2, layer9, layer10
function init(){
OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";
map = new OpenLayers.Map('map', {
maxResolution: 'auto',
// displayProjection: new OpenLayers.Projection("EPSG:2451"),
units: 'meters',
maxExtent: new OpenLayers.Bounds(-31337.715508,-77650.134635,-21796.513842,-70055.061952)
// maxExtent: new OpenLayers.Bounds(-83624.557161,-96269.254733,-3366.679476,-36305.074927)
}
);
layer1 = new OpenLayers.Layer.WMS( "Kamakura Chojikai Sen WMS",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kamakura_pgis.map',
layers: 'chojisen,kenchiku,doro,tetsudo',
// transparent: true,
format: 'image/png'
},
{
projection: 'EPSG:2451'
}
);

/* layer2 = new OpenLayers.Layer.WMS( "Kanagawa Gyosei Kukaku Sen WMS",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_pgis.map',
layers: 'kukaku',
format: 'image/png'
},
{
projection: 'EPSG:2451'
}
);
*/
var style_markRed = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
//Markerのプロパティ
style_markRed.graphicWidth = 15; //画像の幅
style_markRed.graphicHeight = 15; //画像の高さ
style_markRed.graphicXOffset = -(style_markRed.graphicWidth/2); //画像を横方向に画像幅の半分ずらす
style_markRed.graphicYOffset = -style_markRed.graphicHeight; //画像を縦方向に画像高さ分のずらす
style_markRed.externalGraphic = "./img/marker.png"; //画像のパス
layer3 = new OpenLayers.Layer.WFS( "Kanagawa mlit WFS Elementary School",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_mlit_pgis_school.map',
typename: 'elementary_school'
},
{
style: style_markRed,
visibility: false,
projection: 'EPSG:4612'
}
);

var style_markBlue = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
//Markerのプロパティ
style_markBlue.graphicWidth = 15;
style_markBlue.graphicHeight = 15;
style_markBlue.graphicXOffset = -(style_markBlue.graphicWidth/2);
style_markBlue.graphicYOffset = -style_markBlue.graphicHeight;
style_markBlue.externalGraphic = "./img/marker-blue.png";
layer4 = new OpenLayers.Layer.WFS( "Kanagawa mlit WFS Junior High School",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_mlit_pgis_school.map',
typename: 'juniorhigh_school'
},
{
style: style_markBlue,
visibility: false,
projection: 'EPSG:4612'
}
);

var style_markGold = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
//Markerのプロパティ
style_markGold.graphicWidth = 15;
style_markGold.graphicHeight = 15;
style_markGold.graphicXOffset = -(style_markGold.graphicWidth/2);
style_markGold.graphicYOffset = -style_markGold.graphicHeight;
style_markGold.externalGraphic = "./img/marker-gold.png";
layer5 = new OpenLayers.Layer.WFS( "Kanagawa mlit WFS High School",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_mlit_pgis_school.map',
typename: 'high_school'
},
{
style: style_markGold,
visibility: false,
projection: 'EPSG:4612'
}
);

var style_lightsyan = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
//Pointのプロパティ
style_lightsyan.fillColor = "#99ffff";
style_lightsyan.strokeColor = "#33ffff";
style_lightsyan.fillOpacity = 0.2;
style_lightsyan.graphicOpacity = 1;
style_lightsyan.pointRadius = 3;
layer6 = new OpenLayers.Layer.WFS( "Kanagawa mlit WFS Technical College",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_mlit_pgis_school.map',
typename: 'technical_college'
},
{
style: style_lightsyan,
visibility: false,
projection: 'EPSG:4612'
}
);

var style_lightmagenta = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
//Pointのプロパティ
style_lightmagenta.fillColor = "#ff99ff";
style_lightmagenta.strokeColor = "#ff33ff";
style_lightmagenta.fillOpacity = 0.2;
style_lightmagenta.graphicOpacity = 1;
style_lightmagenta.pointRadius = 3;
layer7 = new OpenLayers.Layer.WFS( "Kanagawa mlit WFS College",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_mlit_pgis_school.map',
typename: 'college'
},
{
style: style_lightmagenta,
visibility: false,
projection: 'EPSG:4612'
}
);

var style_markGreen = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
//Markerのプロパティ
style_markGreen.graphicWidth = 15;
style_markGreen.graphicHeight = 15;
style_markGreen.graphicXOffset = -(style_markGreen.graphicWidth/2);
style_markGreen.graphicYOffset = -style_markGreen.graphicHeight;
style_markGreen.externalGraphic = "./img/marker-green.png";
layer8 = new OpenLayers.Layer.WFS( "Kanagawa mlit WFS University",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_mlit_pgis_school.map',
typename: 'university'
},
{
style: style_markGreen,
visibility: false,
projection: 'EPSG:4612'
}
);

map.addLayers([layer1, layer3, layer4, layer5, layer6, layer7, layer8]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<h1 id="title">Feature Style Unique</h1>

<div id="map"></div>
</body>
</html>

OpenLayers 12b Feature Style Markerで表示 マップファイル


MAP
NAME kanagawa_mlit_pgis_school_map
STATUS ON
SIZE 600 300
EXTENT 138.91 35.12 139.84 35.68
# EXTENT -83624.557161 -96269.254733 -3366.679476 -36305.074927
UNITS dd
IMAGECOLOR 255 255 255
IMAGETYPE png
FONTSET "fonts.txt"
PROJECTION
"init=epsg:4612"
# "init=epsg:2451"
END

WEB
IMAGEPATH "/home/user/ka-map/htdocs/tmp/kacache/"
IMAGEURL "/ka-map/tmp/kacache/"
METADATA
"wms_title" "Kamakura mlit School Map WMS Server"
"wms_srs" "EPSG:2451 EPSG:4612"
"wms_onlineresource" "http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/kanagawa_mlit_pgis_school.map"
"wms_encoding" "utf-8"
"wms_feature_info_mime_type" "text/html"
"wfs_title" "Kamakura mlit School Map WFS Server"
"wfs_srs" "EPSG:2451 EPSG:4612"
"wfs_onlineresource" "http://localhost/cgi-bin/mapserv?map=/home/user/mapfile/kanagawa_mlit_pgis_school.map"
"wfs_encoding" "utf-8"
"wfs_feature_info_mime_type" "text/html"
END
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

SYMBOL
NAME 'circle'
TYPE ELLIPSE
FILLED TRUE
POINTS
1 1
END
END


LAYER
NAME gyoseikai
GROUP gyoseikai
TYPE POLYGON
STATUS ON
DUMP TRUE
# DATA "../mapdata/kanagawa_mlit/N03-071001_14_EC01.shp"
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=user password=password"
DATA "the_geom from gyoseikai"
# MINSCALE 1000
# MAXSCALE 1000000000
LABELITEM "cn2"
METADATA
"group_title" "行政界"
"wms_title" "Kanagawa mlit Map WMS Gyoseikai Layer"
# "layer_encoding" "SJIS"
"searchfield" "cn2"
"fields" "con:郡政令,cn2:市区町村"
END
CLASS
NAME "行政界"
# NAME "City Boundaries"
STYLE
OUTLINECOLOR 153 153 153
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_tokyo_shp.html
END

LAYER
NAME gun_seirei
GROUP gun_seirei
TYPE ANNOTATION
STATUS ON
# DATA "../mapdata/kanagawa_mlit/N03-071001_14_EC01.shp"
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=user password=password"
DATA "the_geom from gyoseikai"
LABELITEM "con"
METADATA
"group_title" "郡政令"
# "layer_encoding" "SJIS"
"queryable" "true"
"searchfield" "con"
"fields" "con:郡政令,cn2:市区町村"
END
CLASS
NAME "郡政令"
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_tokyo_shp.html
END

LAYER
NAME railroad
GROUP railroad
TYPE line
STATUS ON
DUMP TRUE
# DATA "../mapdata/railroad_mlit/N02-07_EB02.shp"
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=user password=password"
DATA "the_geom from railroad1"
# MINSCALE 1000
# MAXSCALE 1000000000
LABELITEM "lin"
METADATA
"group_title" "鉄道"
"wms_title" "Railroad Map WMS Layer"
"wms_srs" "EPSG:4612"
"wfs_title" "Railroad Map WFS Layer"
"wfs_srs" "EPSG:4612"
# "layer_encoding" "SJIS"
"searchfield" "lin"
"fields" "lin:鉄道,opc:会社"
END
CLASS
NAME "鉄道"
STYLE
COLOR 102 204 204
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_railroad.html
END

LAYER
NAME elementary_school
GROUP elementary_school
TYPE POINT
STATUS ON
DUMP TRUE
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=user password=password"
DATA "the_geom from (select * from publicfacilities where pci = '16001' and aac = '14204') as kanagawaquery using unique gid using srid = -1"
# MINSCALE 1000
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000
LABELITEM "na0"
METADATA
"group_title" "小学校"
"wfs_title" "PF Elementary School Kanagawa mlit WFS Layer"
"wfs_srs" "EPSG:4612"
"gml_featureid" "gid"
"gml_include_items" "all"
"gml_exclude_items" ""
"searchfield" "na0"
"fields" "na0:小学校,ads:住所"
END
CLASS
NAME "小学校"
STYLE
SYMBOL 'circle'
COLOR 153 255 153
SIZE 5
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_facilities_pgis.html
END

LAYER
NAME juniorhigh_school
GROUP juniorhigh_school
TYPE POINT
STATUS ON
DUMP TRUE
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=user password=password"
DATA "the_geom from (select * from publicfacilities where (pci = '16002' or pci = '16203') and aac = '14204') as kanagawaquery using unique gid using srid = -1"
# MINSCALE 1000
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000
LABELITEM "na0"
METADATA
"group_title" "中学校"
"wfs_title" "PF Junior High School Kanagawa mlit WFS Layer"
"wfs_srs" "EPSG:4612"
"gml_featureid" "gid"
"gml_include_items" "all"
"gml_exclude_items" ""
"searchfield" "na0"
"fields" "na0:中学校,ads:住所"
END
CLASS
NAME "中学校"
STYLE
SYMBOL 'circle'
COLOR 153 153 255
SIZE 5
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_facilities_pgis.html
END

LAYER
NAME high_school
GROUP high_school
TYPE POINT
STATUS ON
DUMP TRUE
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=user password=password"
DATA "the_geom from (select * from publicfacilities where pci = '16004' and aac = '14204') as kanagawaquery using unique gid using srid = -1"
# MINSCALE 1000
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000
LABELITEM "na0"
METADATA
"group_title" "高等学校"
"wfs_title" "PF High School Kanagawa mlit WFS Layer"
"wfs_srs" "EPSG:4612"
"gml_featureid" "gid"
"gml_include_items" "all"
"gml_exclude_items" ""
"searchfield" "na0"
"fields" "na0:高等学校,ads:住所"
END
CLASS
NAME "高等学校"
STYLE
SYMBOL 'circle'
COLOR 255 153 153
SIZE 5
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_facilities_pgis.html
END

LAYER
NAME technical_college
GROUP technical_college
TYPE POINT
STATUS ON
DUMP TRUE
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=user password=password"
DATA "the_geom from (select * from publicfacilities where pca = '16005' and aac = '14204') as kanagawaquery using unique gid using srid = -1"
# MINSCALE 1000
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000
LABELITEM "na0"
METADATA
"group_title" "高等専門学校"
"wfs_title" "PF Technical College Kanagawa mlit WFS Layer"
"wfs_srs" "EPSG:4612"
"gml_featureid" "gid"
"gml_include_items" "all"
"gml_exclude_items" ""
"searchfield" "na0"
"fields" "na0:高等専門学校,ads:住所"
END
CLASS
NAME "高等専門学校"
STYLE
SYMBOL 'circle'
COLOR 151 255 255
SIZE 5
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_facilities_pgis.html
END

LAYER
NAME college
GROUP college
TYPE POINT
STATUS ON
DUMP TRUE
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=user password=password"
DATA "the_geom from (select * from publicfacilities where pci = '16006' and aac = '14204') as kanagawaquery using unique gid using srid = -1"
# MINSCALE 1000
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000
LABELITEM "na0"
METADATA
"group_title" "短期大学"
"wfs_title" "PF College Kanagawa mlit WFS Layer"
"wfs_srs" "EPSG:4612"
"gml_featureid" "gid"
"gml_include_items" "all"
"gml_exclude_items" ""
# "layer_encoding" "SJIS"
"searchfield" "na0"
"fields" "na0:短期大学,ads:住所"
END
CLASS
NAME "短期大学"
STYLE
SYMBOL 'circle'
COLOR 255 153 255
SIZE 5
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_facilities_pgis.html
END

LAYER
NAME university
GROUP university
TYPE POINT
STATUS ON
DUMP TRUE
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=user password=password"
DATA "the_geom from (select * from publicfacilities where pci = '16007' and aac = '14204') as kanagawaquery using unique gid using srid = -1"
# MINSCALE 1000
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000
LABELITEM "na0"
METADATA
"group_title" "大学"
"wfs_title" "PF University Kanagawa mlit WFS Layer"
"wfs_srs" "EPSG:4612"
"gml_featureid" "gid"
"gml_include_items" "na0,the_geom"
"gml_exclude_items" ""
"searchfield" "na0"
"fields" "na0:大学,ads:住所"
END
CLASS
NAME "大学"
STYLE
SYMBOL 'circle'
COLOR 51 255 51
SIZE 5
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_facilities_pgis.html
END

END #MAP END

OpenLayers 12a Feature Style Markerで表示

公共施設のデータを使って、Point表示をMarkerに変更します。

国土数値情報の公共施設の説明から、小分類コードしたがって学校に関するデータをレイヤ別に表示します。

公共施設小分類コード 〈ファイル名称:PubFacMiclassCd〉
コード 対応する内容
16001 小学校
16002 中学校
16003 中等教育学校
16004 高等学校
16005 高等専門学校
16006 短期大学
16007 大学
16008 盲学校
16009 ろう学校
16010 養護学校
16011 幼稚園

kanagawa_mlit_pgis_pf.map の学校(school)レイヤを変更します。

1 kanagawa_mlit_pgis_pf.map をコピーしてファイル名を kanagawa_mlit_pgis_school.map にします。

user@debian:~/mapfile$ cp kanagawa_mlit_pgis_pf.map kanagawa_mlit_pgis_school.map

2 学校(school)レイヤを除いた次のレイヤを削除します。
building
national_office
local_office
police
fire_station
hospital
post

3 学校(school)レイヤを次のように変更します。

---
LAYER
NAME elementary_school
GROUP elementary_school
TYPE POINT
STATUS ON
DUMP TRUE
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=user password=password"
DATA "the_geom from (select * from publicfacilities where pci = '16001' and aac = '14204') as kanagawaquery using unique gid using srid = -1" #1
# MINSCALE 1000
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000
LABELITEM "na0"
METADATA
"wfs_title" "PF Elementary School Kanagawa mlit WFS Layer" #2
"wfs_srs" "EPSG:4612"
"gml_featureid" "gid"
"gml_include_items" "all"
"gml_exclude_items" ""
"group_title" "小学校"
"searchfield" "na0"
"fields" "na0:小学校,ads:住所"
END
CLASS
NAME "小学校"
---

#1 SQLクエリを使用して「鎌倉市」の「小学校」のデータを抽出します。

select * from publicfacilities where pci = '16001' and acc = '14204'
サブクエリで select文で publicfacilitiesテーブルのうち、pci列が16001でaac列が14204のデータの要素をすべて抽出します。

#2 WFS の設定。
"wfs_title" "PF Elementary School Kanagawa mlit WFS Layer"

各レイヤの相違部分
LAYER NAME GROUP pci wfs_title
erementary_school 16001 PF Elementary School Kanagawa mlit WFS Layer
juniorhigh_school 16002 PF Junior High School Kanagawa mlit WFS Layer
juniorhigh_school 16003 PF Junior High School Kanagawa mlit WFS Layer
where (pci = '16002' or pci = '16003') and aac = '14204'
high_school 16004 PF High School Kanagawa mlit WFS Layer
technical_college 16005 PF Technical College Kanagawa mlit WFS Layer
college 16006 PF College Kanagawa mlit WFS Layer
university 16007 PF University Kanagawa mlit WFS Layer


feature_style_basic.html を参考に地図を作成します。
0 feature_style_basic.html をダブルクリックして開きます。
1 プロジェクトビューのOpenLayersprojフォルダを右クリックして、新規->HTMLファイルをクリックします。
2 HTMLファイルウィンドウでファイル名をfeature_style_unique.htmlと入力し、終了ボタンをクリックします。
3 エディタのタブをエディタビュー内の下へドラッグすると2段になってみやすくなります。
4 charsetをUTF-8にして、<title>をFeature Style Uniqueにします。
5 feature_style_basic.htmlの内容をコピーしてfeature_style_unique.html ファイルに貼り付け修正します。
#1 表示レイヤの定義を修正します。
#2 範囲を鎌倉市に合わせて変更します。
#3 layer1 の鎌倉市の丁字界線はコメントアウトははずします。
#3 layer2 の神奈川県の行政区画線はコメントアウトします。

---
<title>Feature Style Unique</title>
<link rel="stylesheet" href="theme/default/style.css" type="text/css" />
<style type="text/css">
#map {
width: 512px;
height: 512px;
border: 1px solid black;
}
</style>
<script src="lib/OpenLayers.js"></script>
<script type="text/javascript">
// #1表示レイヤの定義を修正
var map, layer1, layer3, layer4, layer5, layer6, layer7, layer8;

function init(){
OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";
map = new OpenLayers.Map('map', {
maxResolution: 'auto',
units: 'meters',
// #2 範囲を鎌倉市に合わせて変更
maxExtent: new OpenLayers.Bounds(-31337.715508,-77650.134635,-21796.513842,-70055.061952)
}
);
// #3 layer1 の鎌倉市の丁字界線はコメントアウトははずします。
// layer2 の神奈川県の行政区画線はコメントアウトします。
layer1 = new OpenLayers.Layer.WMS( "Kamakura Chojikai Sen WMS",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kamakura_pgis.map',
layers: 'chojisen',
// transparent: true,
format: 'image/png'
},
{
projection: 'EPSG:2451'
}
);

/* layer2 = new OpenLayers.Layer.WMS( "Kanagawa Gyosei Kukaku Sen WMS",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_pgis.map',
layers: 'kukaku',
format: 'image/png'
},
{
projection: 'EPSG:2451'
}
);
*/
---

6 kanagawa_mlit_pgis_school.map の elementary_school レイヤように次のように追加します。

---
var style_markRed = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
style_markRed.graphicWidth = 15; //画像の幅
style_markRed.graphicHeight = 15; //画像の高さ
style_markRed.graphicXOffset = -(style_markRed.graphicWidth/2);
//画像を横方向に画像幅の半分ずらす
style_markRed.graphicYOffset = -style_markRed.graphicHeight;
//画像を縦方向に画像高さ分のずらす
style_markRed.externalGraphic = "./img/marker.png"; //画像のパス
layer3 = new OpenLayers.Layer.WFS( "Kanagawa mlit WFS Elementary School",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_mlit_pgis_school.map',
typename: 'elementary_school'
},
{
style: style_markRed,
visibility: false,
projection: 'EPSG:4612'
}
);
---

7他のレイヤも同様に追加します。

LAYER NAME style extarnalGraphic name
juniorhigh_school style_markRed ./img/marker.png Kanagawa mlit WFS Junior High School
high_school style_markBlue ./img/marker.png Kanagawa mlit WFS High School
university style_markGreen ./img/marker.png Kanagawa mlit WFS University

次のレイヤは円で表示しました。(鎌倉市にはデータがありませんでした。)

LAYER NAME style fillColor strokeColor name
technical_college style_lightsyan #99ffff #33ffff Kanagawa mlit WFS Technical College
college style_lightmagenta #ff99ff #ff33ff Kanagawa mlit WFS College

8 地図表示部分を次のようにします。

---
map.addLayers([layer1, layer3, layer4, layer5, layer6, layer7, layer8]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<h1 id="title">Feature Style Unique</h1>

<div id="map"></div>

</body>
</html>

9 Webブラウザを起動して、アドレスバーに次のように入力します。

http://localhost/openlayers/OpenLayersproj/feature_style_unique.html

2008年9月29日月曜日

OpenLayers 11c Feature Style 色と大きさを変える HTMLファイル


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Feature Style Basic</title>
<link rel="stylesheet" href="theme/default/style.css" type="text/css" />
<style type="text/css">
#map {
width: 512px;
height: 512px;
border: 1px solid black;
}
</style>
<script src="lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer2, layer3, layer4, layer5, layer6, layer7, layer8, layer9, layer10;
// layer1,
function init(){
OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";
map = new OpenLayers.Map('map', {
maxResolution: 'auto',
units: 'meters',
maxExtent: new OpenLayers.Bounds(-83624.557161,-96269.254733,-3366.679476,-36305.074927)
}
);
/* layer1 = new OpenLayers.Layer.WMS( "Kamakura Chojikai Sen WMS",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kamakura_pgis.map',
layers: 'chojisen,kenchiku,doro,tetsudo',
format: 'image/png'
},
{
projection: 'EPSG:2451'
}
);
*/
layer2 = new OpenLayers.Layer.WMS( "Kanagawa Gyosei Kukaku Sen WMS",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_pgis.map',
layers: 'kukaku',
format: 'image/png'
},
{
projection: 'EPSG:2451'
}
);

var style_lightgreen = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
//Pointのプロパティ、塗りつぶし、輪郭、大きさ
style_lightgreen.fillColor = "#99ff99";
style_lightgreen.strokeColor = "#33ff33";
style_lightgreen.pointRadius = 3;
layer3 = new OpenLayers.Layer.WFS( "Kanagawa mlit WFS Building",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_mlit_pgis_pf.map',
typename: 'building'
},
{
style: style_lightgreen,
visibility: false,
projection: 'EPSG:4612'
}
);

var style_lightblue = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
//Pointのプロパティ、塗りつぶし、輪郭、大きさ
style_lightblue.fillColor = "#9999ff";
style_lightblue.strokeColor = "#3333ff";
style_lightblue.pointRadius = 3;
layer4 = new OpenLayers.Layer.WFS( "Kanagawa mlit WFS National Office",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_mlit_pgis_pf.map',
typename: 'national_office'
},
{
style: style_lightblue,
visibility: false,
projection: 'EPSG:4612'
}
);

var style_lightred = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
//Pointのプロパティ、塗りつぶし、輪郭、大きさ
style_lightred.fillColor = "#ff9999";
style_lightred.strokeColor = "#ff3333";
style_lightred.pointRadius = 3;
layer5 = new OpenLayers.Layer.WFS( "Kanagawa mlit WFS Local Office",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_mlit_pgis_pf.map',
typename: 'local_office'
},
{
style: style_lightred,
visibility: false,
projection: 'EPSG:4612'
}
);

var style_lightsyan = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
//Pointのプロパティ、塗りつぶし、輪郭、大きさ
style_lightsyan.fillColor = "#99ffff";
style_lightsyan.strokeColor = "#33ffff";
style_lightsyan.pointRadius = 3;
layer6 = new OpenLayers.Layer.WFS( "Kanagawa mlit WFS Police",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_mlit_pgis_pf.map',
typename: 'police'
},
{
style: style_lightsyan,
visibility: false,
projection: 'EPSG:4612'
}
);

var style_lightmagenta = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
//Pointのプロパティ、塗りつぶし、輪郭、大きさ
style_lightmagenta.fillColor = "#ff99ff";
style_lightmagenta.strokeColor = "#ff33ff";
style_lightmagenta.pointRadius = 3;
layer7 = new OpenLayers.Layer.WFS( "Kanagawa mlit WFS Fire Station",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_mlit_pgis_pf.map',
typename: 'fire_station'
},
{
style: style_lightmagenta,
visibility: false,
projection: 'EPSG:4612'
}
);

var style_green = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
//Pointのプロパティ、塗りつぶし、輪郭、大きさ
style_green.fillColor = "#33ff33";
style_green.strokeColor = "#00ff00";
style_green.pointRadius = 3;
layer8 = new OpenLayers.Layer.WFS( "Kanagawa mlit WFS School",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_mlit_pgis_pf.map',
typename: 'school'
},
{
style: style_green,
visibility: false,
projection: 'EPSG:4612'
}
);

var style_orange = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
//Pointのプロパティ、塗りつぶし、輪郭、大きさ
style_orange.fillColor = "#ff9933";
style_orange.strokeColor = "#ff6600";
style_orange.pointRadius = 3;
layer9 = new OpenLayers.Layer.WFS( "Kanagawa mlit WFS Hospital",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_mlit_pgis_pf.map',
typename: 'hospital'
},
{
style: style_orange,
visibility: false,
projection: 'EPSG:4612'
}
);

var style_red = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
//Pointのプロパティ、塗りつぶし、輪郭、大きさ
style_red.fillColor = "#ff0000";
style_red.strokeColor = "#ff0000";
style_red.pointRadius = 3;
layer10 = new OpenLayers.Layer.WFS( "Kanagawa mlit WFS Post",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_mlit_pgis_pf.map',
typename: 'post'
},
{
style: style_red,
visibility: false,
projection: 'EPSG:4612'
}
);

map.addLayers([layer2, layer3, layer4, layer5, layer6, layer7, layer8, layer9, layer10]);
// map.addLayer(layer1);
// map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<h1 id="title">Feature Style Basic</h1>

<div id="map"></div>

</body>
</html>

OpenLayers 11b Feature Style 色と大きさを変える マップファイル


MAP
NAME kanagawa_mlit_pgis_pf_map
STATUS ON
SIZE 600 300
EXTENT 138.91 35.12 139.84 35.68
# EXTENT -83624.557161 -96269.254733 -3366.679476 -36305.074927
UNITS dd
IMAGECOLOR 255 255 255
IMAGETYPE png
FONTSET "fonts.txt"
PROJECTION
"init=epsg:4612"
# "init=epsg:2451"
END

WEB
IMAGEPATH "/home/nob61/ka-map/htdocs/tmp/kacache/"
IMAGEURL "/ka-map/tmp/kacache/"
METADATA
"wfs_title" "Kamakura mlit Map WFS Server"
"wfs_srs" "EPSG:4621 EPSG:2451"
# "wfs_srs" "EPSG:4612"
"wfs_onlineresource" "http://localhost/cgi-bin/mapserv?map=/home/nob61/mapfile/kanagawa_mlit_pgis_pf.map"
"wfs_encoding" "utf-8"
"wfs_feature_info_mime_type" "text/html"
END
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

SYMBOL
NAME 'circle'
TYPE ELLIPSE
FILLED TRUE
POINTS
1 1
END
END


LAYER
NAME gyoseikai
GROUP gyoseikai
TYPE POLYGON
STATUS ON
DUMP TRUE
# DATA "../mapdata/kanagawa_mlit/N03-071001_14_EC01.shp"
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=nob61 password=balanced"
DATA "the_geom from gyoseikai"
# MINSCALE 1000
# MAXSCALE 1000000000
LABELITEM "cn2"
METADATA
"group_title" "行政界"
"searchfield" "cn2"
"fields" "con:郡政令,cn2:市区町村"
END
CLASS
NAME "行政界"
# NAME "City Boundaries"
STYLE
OUTLINECOLOR 153 153 153
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_tokyo_shp.html
END

LAYER
NAME gun_seirei
GROUP gun_seirei
TYPE ANNOTATION
STATUS ON
# DATA "../mapdata/kanagawa_mlit/N03-071001_14_EC01.shp"
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=nob61 password=balanced"
DATA "the_geom from gyoseikai"
LABELITEM "con"
METADATA
"group_title" "郡政令"
"queryable" "true"
"searchfield" "con"
"fields" "con:郡政令,cn2:市区町村"
END
CLASS
NAME "郡政令"
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_tokyo_shp.html
END

LAYER
NAME railroad
GROUP railroad
TYPE line
STATUS ON
DUMP TRUE
# DATA "../mapdata/railroad_mlit/N02-07_EB02.shp"
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=nob61 password=balanced"
DATA "the_geom from railroad1"
# MINSCALE 1000
# MAXSCALE 1000000000
LABELITEM "lin"
METADATA
"group_title" "鉄道"
"wfs_title" "Railroad Map WFS Layer"
"wfs_srs" "EPSG:4612"
"searchfield" "lin"
"fields" "lin:鉄道,opc:会社"
END
CLASS
NAME "鉄道"
STYLE
COLOR 102 204 204
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_railroad.html
END

LAYER
NAME building
GROUP building
TYPE POINT
STATUS ON
DUMP TRUE
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=nob61 password=balanced"
DATA "the_geom from (select * from publicfacilities where pca = '3') as kanagawaquery using unique gid using srid = -1"
# MINSCALE 1000
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000
LABELITEM "na0"
METADATA
"group_title" "建物"
"wfs_title" "PF Building Kanagawa mlit WFS Layer"
"wfs_srs" "EPSG:4612"
"gml_featureid" "gid"
"gml_include_items" "all"
"gml_exclude_items" ""
"searchfield" "na0"
"fields" "na0:建物,ads:住所"
END
CLASS
NAME "建物"
STYLE
SYMBOL 'circle'
COLOR 153 255 153
SIZE 5
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_facilities_pgis.html
END

LAYER
NAME national_office
GROUP national_office
TYPE POINT
STATUS ON
DUMP TRUE
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=nob61 password=balanced"
DATA "the_geom from (select * from publicfacilities where pca = '11') as kanagawaquery using unique gid using srid = -1"
# MINSCALE 1000
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000
LABELITEM "na0"
METADATA
"group_title" "国の機関"
"wfs_title" "PF National Office Kanagawa mlit WFS Layer"
"wfs_srs" "EPSG:4612"
"gml_featureid" "gid"
"gml_include_items" "all"
"gml_exclude_items" ""
"searchfield" "na0"
"fields" "na0:国の機関,ads:住所"
END
CLASS
NAME "国の機関"
STYLE
SYMBOL 'circle'
COLOR 153 153 255
SIZE 5
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_facilities_pgis.html
END

LAYER
NAME local_office
GROUP local_office
TYPE POINT
STATUS ON
DUMP TRUE
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=nob61 password=balanced"
DATA "the_geom from (select * from publicfacilities where pca = '12') as kanagawaquery using unique gid using srid = -1"
# MINSCALE 1000
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000
LABELITEM "na0"
METADATA
"group_title" "地方公共団体"
"wfs_title" "PF Local Office Kanagawa mlit WFS Layer"
"wfs_srs" "EPSG:4612"
"gml_featureid" "gid"
"gml_include_items" "all"
"gml_exclude_items" ""
"searchfield" "na0"
"fields" "na0:地方公共団体,ads:住所"
END
CLASS
NAME "地方公共団体"
STYLE
SYMBOL 'circle'
COLOR 255 153 153
SIZE 5
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_facilities_pgis.html
END

LAYER
NAME police
GROUP police
TYPE POINT
STATUS ON
DUMP TRUE
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=nob61 password=balanced"
DATA "the_geom from (select * from publicfacilities where pca = '14') as kanagawaquery using unique gid using srid = -1"
# MINSCALE 1000
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000
LABELITEM "na0"
METADATA
"group_title" "警察機関"
"wfs_title" "PF Police Kanagawa mlit WFS Layer"
"wfs_srs" "EPSG:4612"
"gml_featureid" "gid"
"gml_include_items" "all"
"gml_exclude_items" ""
"searchfield" "na0"
"fields" "na0:警察機関,ads:住所"
END
CLASS
NAME "警察機関"
STYLE
SYMBOL 'circle'
COLOR 151 255 255
SIZE 5
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_facilities_pgis.html
END

LAYER
NAME fire_station
GROUP fire_station
TYPE POINT
STATUS ON
DUMP TRUE
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=nob61 password=balanced"
DATA "the_geom from (select * from publicfacilities where pca = '15') as kanagawaquery using unique gid using srid = -1"
# MINSCALE 1000
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000
LABELITEM "na0"
METADATA
"group_title" "消防署"
"wfs_title" "PF Fire Station Kanagawa mlit WFS Layer"
"wfs_srs" "EPSG:4612"
"gml_featureid" "gid"
"gml_include_items" "all"
"gml_exclude_items" ""
"searchfield" "na0"
"fields" "na0:消防署,ads:住所"
END
CLASS
NAME "消防署"
STYLE
SYMBOL 'circle'
COLOR 255 153 255
SIZE 5
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_facilities_pgis.html
END

LAYER
NAME school
GROUP school
TYPE POINT
STATUS ON
DUMP TRUE
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=nob61 password=balanced"
DATA "the_geom from (select * from publicfacilities where pca = '16') as kanagawaquery using unique gid using srid = -1"
# MINSCALE 1000
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000
LABELITEM "na0"
METADATA
"group_title" "学校"
"wfs_title" "PF School Kanagawa mlit WFS Layer"
"wfs_srs" "EPSG:4612"
"gml_featureid" "gid"
"gml_include_items" "na0,the_geom"
"gml_exclude_items" ""
"searchfield" "na0"
"fields" "na0:学校,ads:住所"
END
CLASS
NAME "学校"
STYLE
SYMBOL 'circle'
COLOR 51 255 51
SIZE 5
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_facilities_pgis.html
END

LAYER
NAME hospital
GROUP hospital
TYPE POINT
STATUS ON
DUMP TRUE
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=nob61 password=balanced"
DATA "the_geom from (select * from publicfacilities where pca = '17') as kanagawaquery using unique gid using srid = -1"
# MINSCALE 1000
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000
LABELITEM "na0"
METADATA
"group_title" "病院"
"wfs_title" "PF Hospital Kanagawa mlit WFS Layer"
"wfs_srs" "EPSG:4612"
"gml_featureid" "gid"
"gml_include_items" "all"
"gml_exclude_items" ""
"searchfield" "na0"
"fields" "na0:病院,ads:住所"
END
CLASS
NAME "病院"
STYLE
SYMBOL 'circle'
COLOR 255 153 51
SIZE 5
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_facilities_pgis.html
END

LAYER
NAME post
GROUP post
TYPE POINT
STATUS ON
DUMP TRUE
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=nob61 password=balanced"
DATA "the_geom from (select * from publicfacilities where pca = '18') as kanagawaquery using unique gid using srid = -1"
# MINSCALE 1000
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000
LABELITEM "na0"
METADATA
"group_title" "郵便局"
"wfs_title" "PF Post Kanagawa mlit WFS Layer"
"wfs_srs" "EPSG:4612"
"gml_featureid" "gid"
"gml_include_items" "all"
"gml_exclude_items" ""
"searchfield" "na0"
"fields" "na0:郵便局,ads:住所"
END
CLASS
NAME "郵便局"
STYLE
SYMBOL 'circle'
COLOR 255 0 0
SIZE 5
END
LABEL
MINFEATURESIZE 40
TYPE TRUETYPE
FONT vl-gothic
ENCODING UTF-8
SIZE 8
POSITION uc
END
END
PROJECTION
"init=epsg:4612"
END
TEMPLATE temp_facilities_pgis.html
END

END #MAP END

OpenLayers 11a Feature Style 色と大きさを変える

公共施設のデータを使って、Point表示を変更します。

国土数値情報の公共施設の説明から、大分類コードしたがってデータをレイヤ別に表示します。

公共施設大分類コード 〈ファイル名称:PubFacMaclassCd〉
コード 対応する内容
3 建物
9 その他
11 国の機関
12 地方公共団体
13 厚生機関
14 警察機関
15 消防署
16 学校
17 病院
18 郵便局
19 福祉施設

データが多いので、その他、厚生機関、福祉施設を除いたデータを使用しました。
kanagawa_mlit_pgis.map の公共施設(piblic_facilities)レイヤを変更します。

kanagawa_mlit_pgis.map をコピーしてファイル名を kanagawa_mlit_pgis_pf.map にします。

user@debian:~/mapfile$ cp kanagawa_mlit_pgis.map kanagawa_mlit_pgis_pf.map

公共施設(piblic_facilities)レイヤを次のように変更します。

---
LAYER
NAME building
GROUP building
TYPE POINT
STATUS ON
DUMP TRUE
CONNECTIONTYPE POSTGIS
CONNECTION "dbname=kanagawa_mlit host=localhost user=user password=password"
DATA "the_geom from (select * from publicfacilities where pca = '3') as kanagawaquery using unique gid using srid = -1" #1
# MINSCALE 1000 #2
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000
LABELITEM "na0"
METADATA
"wfs_title" "PF Building Kanagawa mlit WFS Layer" #3
"wfs_srs" "EPSG:4612"
"gml_featureid" "gid"
"gml_include_items" "all"
"gml_exclude_items" ""
"group_title" "建物" #4
"searchfield" "na0"
"fields" "na0:建物,ads:住所"
END
CLASS
NAME "建物"
---

#1 SQLクエリを使用して「建物」のデータを抽出します。

select * from publicfacilities where pca = '3'
サブクエリで select文で publicfacilitiesテーブルのうち、pca列が3のデータの要素をすべて抽出します。

as kanagawaquery
任意の名前:kanagawaquery

using unique gid
行を特定する一意な番号の列:gid

using srid = -1
空間参照形の指定:(マップファイルでプロジェクションを指定している場合) -1

#2 指定していると OpenLayers で表示できないときがあります。
# MINSCALE 1000
# MAXSCALE 1000000000
# MAXSCALEDENOM 100000

#3 WFS の設定。
"wfs_title" "PF Building Kanagawa mlit WFS Layer" #3
"wfs_srs" "EPSG:4612"
"gml_include_items" "all"
"gml_exclude_items" ""

#4 ka-Mapの設定なのでなくても OK。
"group_title" "建物" #4
("queryable" "true")
"searchfield" "na0"
"fields" "na0:建物,ads:住所"



各レイヤの相違部分
LAYER NAME GROUP pca wfs_title
building 3 PF Building Kanagawa mlit WFS Layer
national_office 11 PF National Office Kanagawa mlit WFS Layer
local_office 12 PF Local Office Kanagawa mlit WFS Layer
police 14 PF Police Kanagawa mlit WFS Layer
fire_station 15 PF Fire Station Kanagawa mlit WFS Layer
school 16 PF School Kanagawa mlit WFS Layer
hospital 17 PF Hospital Kanagawa mlit WFS Layer
post 18 PF Post Kanagawa mlit WFS Layer

*WEB オブジェクトの WFS の設定で"wfs_srs" の設定を各レイヤのプロジェクションの設定を最初に記述して "EPSG:4621 EPSG:2451" の順番でないと GetFeature で各レイヤの情報を得られませんでした。
地図表示には、"EPSG:2451 EPSG:4621" の順番でないと表示しません。


以前作成した wfs_kanagawamlit.html と wms_meter.html を参考に地図を作成します。
0 wfs_kanagawamlit.html と wms_meter.html をダブルクリックして開きます。
1 プロジェクトビューのOpenLayersprojフォルダを右クリックして、新規->HTMLファイルをクリックします。
2 HTMLファイルウィンドウでファイル名をfeature_style_basic.htmlと入力し、終了ボタンをクリックします。
3 エディタのタブをエディタビュー内の下へドラッグすると2段になってみやすくなります。
4 charsetをUTF-8にして、<title>をFeature Style Basicにします。
5 wms_meter.html の次の前半部分の内容をコピーしてfeature_style_basic.html ファイルに貼り付け修正します。

---
<title>Feature Style Basic</title>
<link rel="stylesheet" href="theme/default/style.css" type="text/css" />
<style type="text/css">
#map {
width: 512px;
height: 512px;
border: 1px solid black;
}
</style>
<script src="lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer2, layer3, layer4, layer5, layer6, layer7, layer8, layer9, layer10; //layer1,

function init(){
OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url="; //追加
map = new OpenLayers.Map('map', {
maxResolution: 'auto',
units: 'meters',
maxExtent: new OpenLayers.Bounds(-83624.557161,-96269.254733,-3366.679476,-36305.074927)
}
);
/* layer1 = new OpenLayers.Layer.WMS( "Kamakura Chojikai Sen WMS",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kamakura_pgis.map',
layers: 'chojisen',
transparent: true,
format: 'image/png'
},
{
projection: 'EPSG:2451'
}
);
*/
layer2 = new OpenLayers.Layer.WMS( "Kanagawa Gyosei Kukaku Sen WMS",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_pgis.map',
layers: 'kukaku',
format: 'image/png'
},
{
projection: 'EPSG:2451'
}
);
---

layer1 の鎌倉市の丁字界線はコメントアウトします。

6 kanagawa_mlit_pgis_pf.map の building レイヤように次のように追加します。

---
var style_lightgreen = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
//Pointのプロパティ デフォルトで円
style_lightgreen.fillColor = "#99ff99"; //塗りつぶし 薄い緑
style_lightgreen.strokeColor = "#33ff33"; //輪郭 やや薄い緑
style_lightgreen.pointRadius = 3; //大きさ
layer3 = new OpenLayers.Layer.WFS( "Kanagawa mlit WFS Building",
"http://localhost/cgi-bin/mapserv?",
{
map: '/home/nob61/mapfile/kanagawa_mlit_pgis_pf.map',
typename: 'building'
},
{
style: style_lightgreen, //上記定義スタイル
visibility: false, //初期設定表示
projection: 'EPSG:4612'
}
);
---

school レイヤの表示には時間がかかります。kanagawa_mlit_pgis_pf.map の school レイヤの gml_include_items を次のようにしてデータ量を減らしてみてください。

"gml_include_items" "na0, adr, the_geom"

7他のレイヤも同様に追加します。

LAYER NAME style fillColor strokeColor name
national_office style_lightblue #9999ff #3333ff Kanagawa mlit WFS National Office
local_office style_lightred #ff9999 #ff3333 Kanagawa mlit WFS Local Office
police style_lightsyan #99ffff #33ffff Kanagawa mlit WFS Police
fire_station style_lightmagenta #ff99ff #ff33ff Kanagawa mlit WFS Fire Station
school style_green #33ff33 #00ff00 Kanagawa mlit WFS School
hospital style_orange #ff9933 #ff6600 Kanagawa mlit WFS Hospital
post style_red #ff0000 #ff0000 Kanagawa mlit WFS Post

8 地図表示部分を次のようにします。

---
map.addLayers([layer2, layer3, layer4, layer5, layer6, layer7, layer8, layer9, layer10]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<h1 id="title">Feature Style Basic</h1>

<div id="map"></div>

</body>
</html>

9 Webブラウザを起動して、アドレスバーに次のように入力します。

http://localhost/openlayers/OpenLayersproj/feature_style_basic.html