如何使用openlayer3

不同的瓷磚供應商我要尋找的詳細步驟來實現這種瓷磚供應商https://leaflet-extras.github.io/leaflet-providers/preview/ 或http://mapstyle.petschge.de/如何使用openlayer3

我是新手我在哪裏，不知道如何去執行現有的代碼如下所示

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title>Simple map</title> 
    <link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css" type="text/css"> 
    <style> 

    </style> 
</head> 
<body> 
<!--html element which contains the map--> 
<div id="map" class="map"></div> 

<script src="http://openlayers.org/en/v3.0.0/build/ol.js" type="text/javascript"></script> 
<!--our app code--> 
<script> 
    var map = new ol.Map({ 
     target: 'map', // The DOM element that will contains the map 
     renderer: 'canvas', // Force the renderer to be used 
     layers: [ 
      // Add a new Tile layer getting tiles from OpenStreetMap source 
      new ol.layer.Tile({ 
       source: new ol.source.OSM() 
      }) 
     ], 
     // Create a view centered on the specified location and zoom level 
     view: new ol.View({ 
      center: ol.proj.transform([103.986908, 1.353199], 'EPSG:4326', 'EPSG:3857'), 
      zoom: 18, 
      rotation: 68*Math.PI/180 
     }) 
    }); 
</script> 


</body> 
</html>

上面的代碼將只顯示使用OSM層尋找一種方式來改變地圖它，請幫助

來源

2016-01-04 DhanaLaxshmi

您可以使用任何瓦片地圖服務器爲您的T來源。只需使用tile服務器的url創建一個XYZ tile源而不是OSM源。

var map = new ol.Map({ 
    target: 'map', // The DOM element that will contains the map 
    renderer: 'canvas', // Force the renderer to be used 
    layers: [ 
     // Add a new Tile layer getting tiles from OpenStreetMap source 
     new ol.layer.Tile({ 
      source: new ol.source.XYZ(
        { 
         urls : ["http://a.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png","http://b.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png","http://c.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png"] 
        }) 
     }) 
    ], 
    // Create a view centered on the specified location and zoom level 
    view: new ol.View({ 
     center: ol.proj.transform([103.986908, 1.353199], 'EPSG:4326', 'EPSG:3857'), 
     zoom: 10, 
     rotation: 68*Math.PI/180 
    }) 
});

如果您不喜歡上面的瓷磚，請使用下面的一個網址。

["http://a.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png","http://b.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png","http://c.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png"] 
["http://a.tile.openstreetmap.org/{z}/{x}/{y}.png","http://b.tile.openstreetmap.org/{z}/{x}/{y}.png","http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"] 
["http://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png","http://otile2.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png","http://otile3.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png","http://otile4.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png"] 
["http://a.tile.stamen.com/watercolor/{z}/{x}/{y}.png","http://b.tile.stamen.com/watercolor/{z}/{x}/{y}.png","http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.png","http://d.tile.stamen.com/watercolor/{z}/{x}/{y}.png"] 
["http://a.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png","http://b.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png","http://c.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png"]

更多這樣的網址可以在您提到的第二個鏈接中找到，查看頁面源代碼以查看它們。

來源

2016-01-05 03:57:28 itsyahani

非常感謝你ü救了我可以ü請參考一些來源學習openlayer3 – DhanaLaxshmi

很高興我能幫上忙。學習ol的最佳地點是[API文檔]（http://openlayers.org/en/v3.12.1/apidoc/）和[示例]（http://openlayers.org/en/v3.12.1/examples/）。如果你想了解OpenLayers是如何工作的，請看它的[source]（https://github.com/openlayers/ol3/tree/master/src/ol） – itsyahani

你能說出源碼中提供的名字，例如XYZ與網址 – DhanaLaxshmi

如何使用openlayer3

回答

相關問題