タイル描画 サンプルコード
オルソ画像 GoogleMaps V3 : 実行例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://maps.google.co.jp/maps/api/js?sensor=false" type="text/javascript"></script>
<script>
// カスタム MapType
function tmsMap() {
}
tmsMap.prototype.tileSize = new google.maps.Size(256,256);
tmsMap.prototype.maxZoom = 21;
tmsMap.prototype.name = "室蘭-航空写真H25";
tmsMap.prototype.alt = "室蘭-航空写真H25";
tmsMap.prototype.getTile = function(tile, zoom, ownerDocument) {
var img = ownerDocument.createElement("img");
img.style.width = this.tileSize.width + "px";
img.style.height = this.tileSize.height + "px";
var y = (1<<zoom) - tile.y - 1;
img.src = "http://neogis.net/muroran/TILE/1.0.0/H25/"
+ zoom + "/" + tile.x + "/" + y + ".jpg";
return img;
};
// グローバル変数
var neogis_tms = new tmsMap();
var map;
// 初期化
function init() {
var map = new google.maps.Map(
document.getElementById("map"), {
zoom: 15,
center: new google.maps.LatLng(42.3146322376, 140.974689588),
mapTypeControlOptions: {
mapTypeIds: ["neogisTMS", google.maps.MapTypeId.ROADMAP]
}
}
);
map.mapTypes.set("neogisTMS", neogis_tms);
map.setMapTypeId("neogisTMS");
}
</script>
<style type="text/css">
#map {
width: 500px;
height: 400px;
border: solid 1px #999;
}
#map #copyright {
padding: 2px;
background: #fff;
}
</style>
</head>
<body onload="init()">
<div id="map" style="width: 500px; height: 400px; border: solid 1px #999;"></div>
<p><a href="http://www.neogis.co.jp/">NEO GIS</a></p>
</body>
</html>
オルソ画像 OpenLayers : 実行例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script>
function init() {
var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
maxResolution:156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508.3427892,-20037508.3427892,20037508.3427892,20037508.3427892),
units: "m",
controls: [
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.Attribution({displayClass: 'prmtcd'})
],
numZoomLevels: 22
}
var map = new OpenLayers.Map('map',options);
map.div.style.backgroundColor = 'rgb(221,238,255)';
var tms = new OpenLayers.Layer.TMS(
"室蘭-航空写真H25",
"http://neogis.net/muroran/TILE/",
{
serviceVersion: '1.0.0',
layername: "H25",
type: "jpg",
numZoomLevels: 22,
isBaseLayer: true
}
);
map.addLayer(tms);
var lonlat = new OpenLayers.LonLat(15693230.659, 5208226.967);
map.setCenter(lonlat, 15);
}
window.onload = init;
</script>
<style type="text/css">
#map {
width: 500px;
height: 400px;
border: solid 1px #999;
}
.prmtcd {
position: absolute;
bottom: 2px;
right: 2px;
font-size: 9pt;
padding: 2px;
}
</style>
</head>
<body onload="init()">
<div id="map" style="width: 500px; height: 400px; border: solid 1px #999;"></div>
<p><a href="http://www.neogis.co.jp/">NEO GIS</a></p>
</body>
</html>
都市計画図 GoogleMaps V3 : 実行例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://maps.google.co.jp/maps/api/js?sensor=false" type="text/javascript"></script>
<script>
// カスタム MapType
function tmsMap() {
}
tmsMap.prototype.tileSize = new google.maps.Size(256,256);
tmsMap.prototype.maxZoom = 21;
tmsMap.prototype.name = "室蘭-都市計画H23";
tmsMap.prototype.alt = "室蘭-都市計画H23";
tmsMap.prototype.getTile = function(tile, zoom, ownerDocument) {
var img = ownerDocument.createElement("img");
img.style.width = this.tileSize.width + "px";
img.style.height = this.tileSize.height + "px";
img.src = "http://neogis.net/muroran/TILE/1.0.0/H23_TOSHI/"
+ zoom + "/" + tile.x + "/" + tile.y + ".png";
return img;
};
// グローバル変数
var neogis_tms = new tmsMap();
var map;
// 初期化
function init() {
var map = new google.maps.Map(
document.getElementById("map"), {
zoom: 15,
center: new google.maps.LatLng(42.3146322376, 140.974689588),
mapTypeControlOptions: {
mapTypeIds: ["neogisXYZ", google.maps.MapTypeId.ROADMAP]
}
}
);
map.mapTypes.set("neogisXYZ", neogis_tms);
map.setMapTypeId("neogisXYZ");
}
</script>
<style type="text/css">
#map {
width: 500px;
height: 400px;
border: solid 1px #999;
}
#map #copyright {
padding: 2px;
background: #fff;
}
</style>
</head>
<body onload="init()">
<div id="map" style="width: 500px; height: 400px; border: solid 1px #999;"></div>
<p><a href="http://www.neogis.co.jp/">NEO GIS</a></p>
</body>
</html>
都市計画図 OpenLayers : 実行例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script>
function init() {
var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
maxResolution:156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508.3427892,-20037508.3427892,20037508.3427892,20037508.3427892),
units: "m",
controls: [
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.Attribution({displayClass: 'prmtcd'})
],
numZoomLevels: 22
}
var map = new OpenLayers.Map('map',options);
map.div.style.backgroundColor = 'rgb(221,238,255)';
var tms = new OpenLayers.Layer.XYZ(
"室蘭-都市計画図H25",
"http://neogis.net/muroran/TILE/1.0.0/H23_TOSHI/${z}/${x}/${y}.png",
{
numZoomLevels: 20
}
);
map.addLayer(tms);
var lonlat = new OpenLayers.LonLat(15693230.659, 5208226.967);
map.setCenter(lonlat, 15);
}
window.onload = init;
</script>
<style type="text/css">
#map {
width: 500px;
height: 400px;
border: solid 1px #999;
}
.prmtcd {
position: absolute;
bottom: 2px;
right: 2px;
font-size: 9pt;
padding: 2px;
}
</style>
</head>
<body onload="init()">
<div id="map" style="width: 500px; height: 400px; border: solid 1px #999;"></div>
<p><a href="http://www.neogis.co.jp/">NEO GIS</a></p>
</body>
</html>