osm_ol1

差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

この比較画面にリンクする

--- osm_ol1 [2018/05/14 21:37]
管理者
+++ osm_ol1 [2018/05/21 09:27] (現在)
管理者
@@ ライン 1: / ライン 1: @@
+{{tag>プログラミング関連 OpenStreetMap_API OpenLayers}}
+[[start]]＞[[programming_start]]
+====== OpenLayersでのOpenStreetMapの表示 ======
+OpenLayersライブラリーを使ってOpenStreetMapを表示します。
+----
+Version4.6.5時点のクイックスタートページを参考にDokuWiki用にアレンジしています。
+http://openlayers.org/en/latest/doc/quickstart.html
+===== デモ =====
+<html>
+<style>
+  .map{height: 400px;width: 100%;}
+</style>
+<script>
+  /* 外部CSSの読み込み */
+  function cssLoad(cssFile){
+    if(document.all){
+      document.createStyleSheet(cssFile);
+    }else{
+      var link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = cssFile;
+      link.type = "text/css"
+      document.getElementsByTagName('head')[0].appendChild(link);
+    }
+  }
+  cssLoad("https://openlayers.org/en/v4.6.5/css/ol.css");
+</script>
+<div id="map" class="map"></div>
+<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
+<script>
+  var map = new ol.Map({
+    target: 'map',
+    layers: [new ol.layer.Tile({source: new ol.source.OSM() })],
+    view: new ol.View({center: ol.proj.fromLonLat([37.41, 8.82]),
+    zoom: 4
+    })
+  });
+</script>
+<p>Map data &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a></p>
+</html>
+===== PR =====
+<html>
+<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
+<!-- respon_0 -->
+<ins class="adsbygoogle"
+     style="display:block"
+     data-ad-client="ca-pub-9251612436023685"
+     data-ad-slot="1409739163"
+     data-ad-format="auto"></ins>
+<script>
+(adsbygoogle = window.adsbygoogle || []).push({});
+</script>
+</html>
+===== ソースコード =====
+DokuWikiではHead要素の編集ができないためCSS・外部CSS・ライブラリーをBody要素内で読み込ませていますが、その他は変更していません。
+<code javascript>
+<style>
+  .map{height: 400px;width: 100%;}
+</style>
+<script>
+  /* 外部CSSの読み込み */
+  function cssLoad(cssFile){
+    if(document.all){
+      document.createStyleSheet(cssFile);
+    }else{
+      var link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = cssFile;
+      link.type = "text/css"
+      document.getElementsByTagName('head')[0].appendChild(link);
+    }
+  }
+  cssLoad("https://openlayers.org/en/v4.6.5/css/ol.css");
+</script>
+<div id="map" class="map"></div>
+<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
+<script>
+  var map = new ol.Map({
+    target: 'map',
+    layers: [new ol.layer.Tile({source: new ol.source.OSM() })],
+    view: new ol.View({center: ol.proj.fromLonLat([37.41, 8.82]),
+    zoom: 4
+    })
+  });
+</script>
+</code>
+----
+[[start]]＞[[programming_start]]

osm_ol1.txt · 最終更新: 2018/05/21 09:27 by 管理者