JA:OpenLayers Simple Example

From OpenStreetMap Wiki
Jump to navigation Jump to search
OpenLayers Simple Example - Other languages

Deploy an OpenStreetMap slippymap on my own website

This simple example may help if you are JA:独自のスリッピーマップの提供. This DHTML snippit will bring in the OpenLayers javascript library and use it to show an OSM map!

注意: OpenStreetMap はタイルイメージをサービスしています

タイルイメージは OpenStreetMap servers サーバー から取っていることに注意してください。OSM は今のところこのような使用法に対応していますが、何も保証はしません。 (計画的、非計画的に関わらず)ダウンタイムがあるかもしれませんし、タイルの URL は変わるかもしれません。

If you are expecting heavy user load, then you should discuss with everyone first (Contact). You should consider following the other instructions on creating your own tiles, or set up your own squid cache for tiles. This will reduce the dependency for you, and will ease bandwidth usage for the OSM servers.

もちろんイメージ自身(地図)も時間が経つにつれて変わりますし、not necessarily for the better.

手順

以下を新しい HTML ファイルにコピーして、ブラウザで表示させます。

最小の例

<html><body>
  <div id="demoMap"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("demoMap");
    map.addLayer(new OpenLayers.Layer.OSM());
    map.zoomToMaxExtent();
  </script>
</body></html>

このコードは、次の例で示すような高さ・幅の指定がないので、全てのブラウザで正しく動作するわけではないことに注意してください; 但し、Firefox では動作します。 このコードでは以下のことをする方法を示しています:

  • DIV の id で地図オブジェクトを初期化する
  • OpenStreetMap レイヤーを追加する
  • zoomToMaxExtent を呼び出すことで強制的に地図を表示する; zoomToExtent を呼び出すこともできますが、そのためには正しい投影法の境界オブジェクトが必要です…

少しだけ拡張した例

<html>
  <head>
    <title>OpenLayers Demo</title>
    <style type="text/css">
      html, body, #basicMap {
          width: 100%;
          height: 100%;
          margin: 0;
      }
    </style>
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script>
      function init() {
        map = new OpenLayers.Map("basicMap");
        var mapnik = new OpenLayers.Layer.OSM();
        map.addLayer(mapnik);
        map.setCenter(new OpenLayers.LonLat(13.41,52.52) // Center of the map
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
          ), 15 // Zoom level
        );
      }
    </script>
  </head>
  <body onload="init();">
    <div id="basicMap"></div>
  </body>
</html>

拡張

その他のタイルセット

独自のタイルイメージ(例えば Mapnik)を表示させたい場合、単に以下のレイヤー定義を使います: 

 var newLayer = new OpenLayers.Layer.OSM("New Layer", "URL_TO_TILES/${z}/${x}/${y}.png", {numZoomLevels: 19});
 map.addLayer(newLayer);

2009 年 6 月 27 日から、/${z}/${x}/${y}.png URL テンプレートの追加が必要になりました。

URL と numZoomLevels は適切に変更してください。

OpenLayers.js を自身のサーバーに置く

OpenLayers.js スクリプトをあなた自身のサーバーに置くこともできます; 単にこのスクリプトをダウンロードします。つまり: 

$wget http://www.openlayers.org/api/OpenLayers.js

それから HTML 内のスクリプトで指定している URL を、スクリプトをおいた位置にします。

その他の変換のために Proj4js を使う

The example lets you use WGS84 coordinates to navigate in a sphericalMercator projected OSM map. If your coordinates are in a different projection, you can add Proj4js to perform reprojections.

http://svn.osgeo.org/metacrs/proj4js/trunk/lib/proj4js-combined.js から proj4js.js スクリプトをあなたのページに (OpenLayers ライブラリの 後に !)追加します。

投影法の定義を追加します (these are obtainable from the Proj4 project, you need the a record from \proj\nad\epsg

例については http://svn.osgeo.org/metacrs/proj4js/trunk/lib/defs を参照してください。

Example for EPSG:28992 (new RD)

Proj4js.defs["EPSG:28992"] = "+title=Amersfoort / RD New +proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +no_defs";

Then, you can use EPSG:28992 coordinates and this epsg code in the transformfunction instead of WGS84


like so: 

map.setCenter(
    new OpenLayers.LonLat(155000,465000) // Center of the map
        .transform(
            new OpenLayers.Projection("EPSG:28992"), // transform from new RD 
            new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
        ),
    15); // Zoom level

この例を開発する?

Feel free to edit this page with improvements.

This example was originally created by Harry Wood (and anyone else who edits this page). It is intentionally more basic, with only one layer defined, and no support for URL params (permalink) etc. So adding these features is not necessarily an improvement. In fact, if you have ideas for making this even more simple, that would be good.

関連

Retrieved from "https://wiki.openstreetmap.org/w/index.php?title=JA:OpenLayers_Simple_Example&oldid=2706431"