Zh-hant:OpenLayers Simple Example

From OpenStreetMap Wiki
Jump to navigation Jump to search

部署在自己的網站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。事實上,如果你有更簡單的想法,那將是很好的。