Zh-hant:OpenLayers Simple Example

From OpenStreetMap Wiki
Jump to: navigation, search

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

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

最小的例子 <!DOCTYPE HTML> <title>OpenLayers Simplest Example</title>

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

代碼顯示了如何 -一個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();">
 </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。事實上,如果你有更簡單的想法,那將是很好的。