ラベル epsg4326 の投稿を表示しています。 すべての投稿を表示
ラベル epsg4326 の投稿を表示しています。 すべての投稿を表示

2015年10月18日日曜日

OL3-Cesium 8 - ol3cesium EPSG:4326 layer example 2

8-2 JavaScript ファイルの作成
「epsg-4326.js(8-ol3cesium17.js)」は、マップを表示するための JavaScript ファイルです。

OL3-Cesium API は、現在、すべて実験的(experimental)なものです。

「8-ol3cesium18.js」
var view = new ol.View({
  projection: 'EPSG:4326',
  center: [-100, 35],
  zoom: 3
});
var layer = new ol.layer.Tile({
/** ol.layer.Tile 
 * For layer sources that provide pre-rendered, tiled 
 * images in grids that are organized by zoom levels for 
 * specific resolutions. 
 * プリレンダリング(事前描画)を提供するレイヤソースのための、
 * 特定の解像度でのズームレベルによって編成されているグリッドの
 * タイルイメージ。(ol3 API)
 */
 source: new ol.source.TileWMS({
 /** ol.source.TileWMS
  * Layer source for tile data from WMS servers.
  * WMS サーバからのタイルデータのレイヤソース。
  * (ol3 API)
  */
  url: 'http://demo.boundlessgeo.com/geoserver/wms',
  params: {
   'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
  }
 })
});
var overlay = new ol.layer.Tile({
 opacity: 0.7,
 extent: [-124.74, 24.96, -66.96, 49.38],
 source: new ol.source.TileWMS(/** @type {olx.source.TileWMSOptions} */ ({
 /** @type 
  * 値のタイプ(型)の説明 - 式などで表示
  * (@use JSDoc[http://usejsdoc.org/]より)
  */
  url: 'http://demo.boundlessgeo.com/geoserver/wms',
  params: {'LAYERS': 'topp:states', 'TILED': true},
  serverType: 'geoserver',
  crossOrigin: 'anonymous'
  /** crossOrigin
   * The crossOrigin attribute for loaded images. Note 
   * that you must provide a crossOrigin value if you 
   * are using the WebGL renderer or if you want to 
   * access pixel data with the Canvas renderer. See 
   * https://developer.mozilla.org/en-US/docs/Web/HTML/
   * CORS_enabled_image for more detail.
   * ロードされたイメージの crossOrigin属性。WebGLのレンダ
   * ラーを使用している場合、または、キャンバスレンダラでピ
   * クセルデータにアクセスする場合、crossOrigin 値を提供な
   * ければならないことに注意してください。詳細は 
   * https://developer.mozilla.org/en-US/docs/Web/HTML/
   * CORS_enabled_image を参照してください。(ol3 API)
   */
 }))
});
var ol2d = new ol.Map({
 layers: [layer, overlay],
 target: 'map2d',
 view: view
});
var ol3d = new olcs.OLCesium({map: ol2d});
/** new olcs.OLCesium(options)
 * map: The OpenLayers map we want to show on a Cesium scene.
 * Cesium シーンで表示したい OpenLayers マップ。
 * (OL3-Cesium API)
 */
var scene = ol3d.getCesiumScene();
/** getCesiumScene()
 * (OL3-Cesium API に説明がありませんでした。)
 */
var terrainProvider = new Cesium.CesiumTerrainProvider({
/** new CesiumTerrainProvider(options)
 * A TerrainProvider that access terrain data in a Cesium 
 * terrain format. The format is described on the Cesium 
 * wiki. 
 * セシウム地形(Cesium terrain)フォーマットの地形(terrain)
 * データにアクセスする TerrainProvider。フォーマットは、セシウ
 * ムウィキに記載されています。
 * (Cesium refdoc)
 */
 // url : '//cesiumjs.org/stk-terrain/tilesets/world/tiles'
 // 2015.10.2 変更
 url : '//assets.agi.com/stk-terrain/world'
 /** url
  * The URL of the Cesium terrain server.
  * セシウム地形(Cesium terrain)サーバの URL。
  * (Cesium refdoc)
  */
});
scene.terrainProvider = terrainProvider;
ol3d.setEnabled(true);
/** setEnabled(enable)
 * Enables/disables the Cesium. This modifies the visibility 
 * style of the container element.
 * セシウムを有効または無効にします。これは、コンテナ要素の可視
 * 性スタイルを変更します。
 * (OL3-Cesium API)
 */
Chromium では表示できないので、Iceweasel(Firefox)のアドレスバーに

http://localhost/~user/ol3cesiumproj/public_html/8-ol3cesium18.html

と入力して表示します。

OL3-Cesium 8 - ol3cesium EPSG:4326 layer example 1

OL3-Cesium Examples
http://openlayers.org/ol3-cesium/examples/

の例をみていきます。

8 - ol3cesium EPSG:4326 layer example
「ol3cesium EPSG:4326 layer example (epsg-4326.html)」を参考に地図を表示してみます。

8-1 HTML ファイルの作成
1 NetBeans を起動します。









2 「プロジェクト」ペインでツリーを ol3cesiumproj -> サイト・ルート -> js -> libs -> ol3-cesium-v1.8 -> examples とクリックして展開し epsg-4326.html をダブルクリックして開きます。epsg-4326.js もダブルクリックして開きます。



3 「新規ファイル」ボタンをクリックします。

4 ステップ「1.ファイル・タイプを選択」の「カテゴリ」で「HTML5」、「ファイルタイプ」で「HTMLファイル」を選択して「次>」ボタンをクリックします。






5 「new HTML ファイル」ダイアログで「ファイル名」を「8-ol3cesium18」と入力して「終了」ボタンをクリックします。







保存フォルダを変更するときは、「フォルダ」右の「参照」ボタンをクリックして「フォルダを参照」で「ol3cesiumproj-サイト・ルート」をクリックして選択し「フォルダを選択」ボタンをクリックします。









6 「epsg-4326.html」の内容をコピーして「8-ol3cesium18.html」に貼り付け、修正します。

7 同じように、「新規ファイル」ボタンをクリックし、ステップ「1.ファイル・タイプを選択」の「カテゴリ」で「HTML5」、「ファイルタイプ」で「JavaScriptファイル」をクリックして選択し「次>」ボタンをクリック。「ファイル名」を「8-ol3cesium18」と入力して「終了」ボタンをクリック。「epsg-4326.js」の内容をコピーして貼り付け、修正します。



「index.html」
<html>
 <head>
  <title>TODO supply a title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
  <div>TODO write content</div>
  <div><a href="./3-ol3cesium18.html">3-ol3cesium18.html</a></div>
  <div><a href="./4-ol3cesium18.html">4-ol3cesium18.html</a></div>
  <div><a href="./5-ol3cesium18.html">5-ol3cesium18.html</a></div>
  <div><a href="./6-ol3cesium18.html">6-ol3cesium18.html</a></div>
  <div><a href="./7-ol3cesium18.html">7-ol3cesium18.html</a></div>
  <div><a href="./8-ol3cesium18.html">8-ol3cesium18.html</a></div>
 </body>
</html>


「8-ol3cesium18.html」
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, all" />
  <title>ol3cesium EPSG:4326 layer example</title>
  <!-- ディレクトリ修正
  <link rel="stylesheet" href="../ol3/css/ol.css" type="text/css">
  -->
  <link rel="stylesheet" href="./js/libs/ol3-cesium-v1.8/ol3/css/ol.css" type="text/css">
 </head>
 <body>
  <div id="map2d" style="width:600px;height:400px;float:left;"></div>
  <div><input type="button" value="Enable/disable Cesium"
   onclick="javascript:ol3d.setEnabled(!ol3d.getEnabled())" /></div>
  <!-- ディレクトリ修正
  <script src="../ol3/ol-debug.js"></script>
  <script src="../Cesium/Cesium.js"></script>
  <script src="../ol3cesium.js"></script>
  -->
  <script src="./js/libs/ol3-cesium-v1.8/ol3/ol-debug.js"></script>
  <script src="./js/libs/ol3-cesium-v1.8/Cesium/Cesium.js"></script>
  <script src="./js/libs/ol3-cesium-v1.8/ol3cesium.js"></script>
  <!-- <script src="epsg-4326.js"></script> -->
  <script src="8-ol3cesium18.js"></script>
 </body>
</html>

2015年1月22日木曜日

2 - ol3.1ex 49a - XYZ Esri EPSG:4326 tileSize 512 example 1

「XYZ Esri EPSG:4326 tileSize 512 example(xyz-esri-4326-512.html)」を参考に地図を表示してみます。

HTML ファイルの作成
a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。





b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.1.1」->「examples」->「xyz-esri-4326-512.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「xyz-esri-4326-512.js」を開きます。





c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。



d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「249-ol3ex.html」と入力し、「次へ」ボタンをクリックします。








e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。











f 「xyz-esri-4326-512.html」の内容をコピーして「249-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「249-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「xyz-esri-4326-512.js」の内容をコピーして貼り付け、修正します。「xyz-esri-4326-512-require.js」も「249-ol3ex-require.js」に貼り付けます。


「249-ol3ex.html」
<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<!--
  <link rel="stylesheet" href="../css/ol.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="../resources/layout.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-->
  <!-- ディレクトリ修正 -->
  <link rel="stylesheet" href="v3.1.1/css/ol.css" type="text/css">
  <link rel="stylesheet" href="v3.1.1/resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="v3.1.1/resources/layout.css" type="text/css">
  <link rel="stylesheet" href="v3.1.1/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
  <title>XYZ Esri EPSG:4326 tileSize 512 example</title>
 </head>
 <body>
  <!-- 
  bootstrap.min.css, bootstrap-responsive.min.css で設定されたセレクタを使用。
  -->
  <div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
    <div class="container">
     <!--
     <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
     -->
      <!-- ディレクトリ修正 -->
     <a class="brand" href="v3.1.1/examples/"><img src="v3.1.1/resources/logo.png"> OpenLayers 3 Examples</a>
    </div>
   </div>
  </div>
  <div class="container-fluid">
   <div class="row-fluid">
    <div class="span12">
     <div id="map" class="map"></div>
    </div>
   </div>
   <div class="row-fluid">
    <div class="span12">
     <h4 id="title">XYZ Esri EPSG:4326 tileSize 512 example</h4>
     <p id="shortdesc">Example of a XYZ source in EPSG:4326 using Esri 512x512 tiles.</p>
     <div id="docs">
      <!--
      See the <a href="xyz-esri-4326-512.js" target="_blank">xyz-esri-4326-512.js source</a> to see how this is done.</p>
      -->
      <!-- ファイル修正 -->
      See the <a href="249-ol3ex.js" target="_blank">249-ol3ex.js source</a> to see how this is done.</p>
     </div>
     <div id="tags">xyz, esri, tilesize, custom projection</div>
    </div>
   </div>
  </div>
  <!--
  <script src="../resources/jquery.min.js" type="text/javascript"></script>
  <script src="../resources/example-behaviour.js" type="text/javascript"></script>
  -->
  <!-- ディレクトリ修正
   jQuery Minified版と
   example-behaviour.js(Examples用 JSコード[文字コードなど])
  -->
  <script src="v3.1.1/resources/jquery.min.js" type="text/javascript"></script>
  <script src="v3.1.1/resources/example-behaviour.js" type="text/javascript"></script>
  <!--
  <script src="loader.js?id=xyz-esri-4326-512" type="text/javascript"></script>
  -->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=249-ol3ex" type="text/javascript"></script>
 </body>
</html>

2014年10月22日水曜日

2 - ol3ex 19b - EPSG:4326 example 2

「epsg-4326.js(219-ol3ex.js)」は、地図を表示するのに必要な javascript です。「219-ol3ex.js」
var layers = [
 new ol.layer.Tile({
 /** ol.layer.Tile 
  * For layer sources that provide pre-rendered, tiled 
  * images in grids that are organized by zoom levels for 
  * specific resolutions. 
  * プリレンダリング(事前描画)を提供するレイヤソースのための、
  * 特定の解像度でのズームレベルによって編成されているグリッドの
  * タイルイメージ。(ol3 API)
  */
  source: new ol.source.TileWMS({
  /** ol.source.TileWMS
   * Layer source for tile data from WMS servers.
   * WMS サーバからのタイルデータのレイヤソース。
   * (ol3 API)
   */
/**
 * url: 'http://demo.opengeo.org/geoserver/wms',
 * params: {
 *  'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
 */
   url: 'http://localhost:8080/geoserver/wms?',
   attributions: [new ol.Attribution({
    html: '国土交通省 国土数値情報'
   })],
   params: {'LAYERS': 'npn:tokyo_kuiki', 'TILED': true},
   serverType: 'geoserver'
  })
 })
];
var map = new ol.Map({
 controls: ol.control.defaults().extend([
 /** controls
  * Controls initially added to the map. 
  * If not specified, ol.control.defaults() is used.
  * 初期設定で、マップに追加されたコントロール。
  * 明示されていなければ、ol.control.defaults() が使用されます。
  * (ol3 API)
  */
 /** ol.control.defaults()
  * デフォルトでは、マップに含まコントロールのセット。
  * 特に設定しない限り、これは、以下の各コントロールの
  * インスタンスを含むコレクションを返します。(ol3 API)
  * ol.control.Zoom, ol.control.Rotate, ol.control.Attribution
  */
  new ol.control.ScaleLine({
  /** ol.control.ScaleLine
   * A control displaying rough x-axis distances, calculated 
   * for the center of the viewport. No scale line will be 
   * shown when the x-axis distance cannot be calculated in 
   * the view projection (e.g. at or beyond the poles in 
   * EPSG:4326). By default the scale line will show in the 
   * bottom left portion of the map, but this can be changed 
   * by using the css selector .ol-scale-line.
   * 粗いx軸の距離を表示するコントロール、ビューポートの中心に
   * 対して計算します。 x軸距離がビュー投影(例えば、
   * EPSG:4326 の極で、または、超えて)で計算することができ
   * ないときにスケールラインは表示されません。デフォルトでは、
   * スケールラインがマップの左下部分に表示されますが、これは 
   * CSSセレクタ .ol-scale-line を使用して変更することが
   * できます。(ol3 API)
   */
   units: 'degrees'
  })
 ]),
 layers: layers,
 target: 'map',
 view: new ol.View({
  projection: 'EPSG:4326',
//center: [0, 0],
  center: [139.42, 35.68],
//zoom: 2
  zoom: 10
 })
});