タイル描画 サンプルコード

オルソ画像 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>