07/30/2013OpenLayersで複数のMapを使ってみる。コメントは受け付けていません。OpenLayersを使ってみる。引き続き、OpenLayersの応用をやってみます。Guideなる書籍の章立てにあわせて、OpenLayersの使い方を学んでいきます。classが終わります。classはOpenLayersのcoreな部分で重要です。複数のMapを表示してみる。2つmapを表示してみましょう。カンの良い方は、単純に<div></div>をもう一つ追加すれば良いと思うはずです。idを定義すればOKですね。codeは、以下のcodeを入力します。保存先は、c:¥ms4w¥apache¥htdocs¥openlayers2_12¥chapter8¥にしておきます。ファイル名は、chapter8_multiple_maps.htmlで保存します。objectを2つ定義します。3として表示させます。ここで、setCenter(....)ですが、OpenLayers.Map.setCenterのように引数を持っていることがわかります。保存後、FireFoxを立ち上げて、http://localhost/openlayers2_12/chapter8/chapter8_multiple_maps.htmlと入力すると、ように2つのmapが表示されます。このexampleでは、2つのmapをそれぞれ独立して動くだけですので、次に連動して動くように修正してみます。複数のMapを連動してみる。codeは、以下のcodeを入力します。保存先は、c:¥ms4w¥apache¥htdocs¥openlayers2_12¥chapter8¥にしておきます。ファイル名は、chapter8_multiple_maps_final.htmlで保存します。objectを作成します。{map_1.setCenter(map_center);}maxResolutionとminResolutionで表示解像度を設定します。objectを作成します。mapmap_2.setCenter(map_center);map_1のmaxResolutionとminResolutionとは違う表示解像度を設定します。wms_layer_all.clone();でmap_1のcloneを作成します。次に、functionとevents,registerを定義します。update_map_2);update_map_1は、map_2.setCenterのcenterをmap_1.getCenter()に移動させ、update_map_2は、map_1.setCenterのcenterをmap_2.getCenter()に移動させ、連動させます。map.events.registerでeventを定義して、eventを登録することで、eventを捕まえます。保存後、FireFoxを立ち上げて、http://localhost/openlayers2_12/chapter8/chapter8_ex3_events.htmlと入力して、mapをzoomさせると、ように2つのmapが表示されます。zoomやpanのeventが発生すると、ように2つのmapは連動して動きます。eventを捕まえることができます。exampleを参考に載せておきます。今回のまとめOpenLayersのMapの応用について学びました。ここまでで、8章が終わりました。layerについて基本を学んでいきます。本tutorialは、htmlやCSSやJavaScriptの基本的なことはある程度理解している前提で今後も話を進めていきます。誤字、脱字、spell間違いや勘違いも多々出てくると考えられます。それは違うじゃん!!とかいろんな意見をいただければと思います。Tutorialの目次に戻る。水文水理解析ソフトウェアの販売セール後1日です。水文水理解析ソフトウェアの販売PythonでMySQLを使ってみる。4]PythonでGUIを試してみる。第1弾ExcelでPythonを使ってみる。ExcelでPythonを動かす。3]PythonでExcelを読み書きする。PythonでGeocodingする。2]Pythonで水文水理解析をやってみる。AB-WebLog.com.。