Zh-hant:OpenLayers Simple Example

部署在自己的網站OpenStreetMap的slippymap這個簡單的例子可以幫助如果你正在部署自己的滑爽地圖。這DHTML的snippit會帶來OpenLayers的JavaScript庫，並用它來顯示一個OSM的地圖！

注：OpenStreetMap的服務平鋪圖像請注意，瓷磚圖像的OpenStreetMap服務器。雖然OSM的支持目前這種用法，我們提供任何擔保。有可能停機（計劃內或計劃外），瓷磚的URL可能會改變。如果你期望的用戶負載沉重，那麼你應該討論與大家第一（聯繫）。你應該考慮創建自己的瓷磚，其他指令後，或成立自己的魷魚緩存瓷磚。這將減少對你的依賴，將緩解為OSM服務器的帶寬使用率。圖像本身（我們的地圖），當然隨著時間的推移改變太多，不一定好。說明更好。複製以下到一個新的HTML文件，並在瀏覽器中查看它。

最小的例子

<!DOCTYPE HTML>
<html>
  <head>
    <title>OpenLayers Simplest Example</title>
  </head>
  <body>
    ...
    <div id="demoMap" style="height:250px"></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>

代碼顯示了如何 -一個DIV的ID初始化一個Map對象 -添加OpenStreetMap的層 -迫使瓷磚顯示調用zoomToMaxExtent的，你也可以致電zoomToExtent，但你需要在正確的投影邊界對象...

一個更廣泛一點的例子

<!DOCTYPE HTML>
<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();
        var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
        var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
        var position       = new OpenLayers.LonLat(13.41,52.52).transform( fromProjection, toProjection);
        var zoom           = 15; 
        map.addLayer(mapnik);
        map.setCenter(position, zoom );
      }
    </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);

此外/${z}/${x}/${y}.png網址模板已要求自2009年6月27日。更改為適當的URL和numZoomLevels。

限制的範圍和縮放級別這限制了牛津附近的區域，縮放級別13-16的地圖。添加較低的縮放，添加新的決議數組號碼（每一個雙下）。

  var fromProjection = new OpenLayers.Projection("EPSG:4326"); // transform from WGS 1984
  var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
  var extent = new OpenLayers.Bounds(-1.32,51.71,-1.18,51.80).transform(fromProjection,toProjection);
  function init() {
    var options = {
      restrictedExtent : extent,
      controls: [
        new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.PanZoomBar(),
        new OpenLayers.Control.Attribution()
      ]
    };
    map = new OpenLayers.Map("Map", options);
    var newLayer = new OpenLayers.Layer.OSM(
      "New Layer", 
      "URL_TO_TILES/${z}/${x}/${y}.png", 
      {
        zoomOffset: 13,
        resolutions: [19.1092570678711,9.55462853393555,4.77731426696777,2.38865713348389]
      }
    );
    map.addLayer(newLayer);
    map.setCenter(new OpenLayers.LonLat(-1.25,51.75).transform(fromProjection,toProjection), 0); // 0=relative zoom level
  }

改變歸屬的文字和刻度線的位置您可以覆蓋歸屬文字和刻度線的位置，使用的字體，在樣式部分添加以下幾行

div.olControlAttribution, div.olControlScaleLine {
  font-family: Verdana;
  font-size: 0.7em;
  bottom: 3px;
}

服務OpenLayers.js

您可以從自己的服務器服務OpenLayers.js腳本，只要下載該腳本，例如：

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

然後在你的HTML中的腳本在URL的地方相對文件參考

使用其他轉換Proj4js

這個例子讓您使用WGS84坐標導航在sphericalMercator預計OSM的地圖。如果您在不同的投影坐標，你可以添加Proj4js執行reprojections。

添加proj4js.js腳本

http://svn.osgeo.org/metacrs/proj4js/trunk/lib/proj4js-combined.js 您的網頁（後OpenLayers的庫！）

添加您的投影確定指標（這些都是索取從proj4的項目，你需要的記錄\ PROJ\ NAD\ EPSG

見 http://svn.osgeo.org/metacrs/proj4js/trunk/lib/defs 示例

例如的EPSG：28992（新路）

  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";

然後，您可以使用的EPSG：transformfunction在28992的坐標，這EPSG代碼，而不是WGS84坐標

像這樣：

  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

制定這個例子嗎？

隨意編輯此頁與改進。這個例子最初創建由哈里·伍德（誰比誰編輯此頁）。它是更基本的故意，只有一個定義層，不支持URL（永久）等，所以這些功能不一定是改善的params。事實上，如果你有更簡單的想法，那將是很好的。

Zh-hant:OpenLayers Simple Example

Navigation menu

Search