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>

0 件のコメント: