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

2014年11月30日日曜日

2 - ol3ex 25b - WKT example 2

「wkt.js(225-ol3ex.js)」は、マップを表示するための JavaScript ファイルです。

*****
Well-known text (WKT) is a text markup language for representing vector geometry objects on a map, spatial reference systems of spatial objects and transformations between spatial reference systems.
well-known text(WKT)は、マップや空間オブジェクトの空間参照システム上と空間参照システム間の変換のベクタジオメトリオブジェクトを表現するためのテキストマークアップ言語です。

A binary equivalent, known as well-known binary (WKB) is used to transfer and store the same information on databases, such as PostGIS, Microsoft SQL Server and DB2.
well-known binary(WKB)として知られているバイナリイクイバレントは、PostGIS や Microsoft SQL Server および DB2 などのデータベース上で同じ情報を転送し、保存するために使用されます。

The formats were originally defined by the Open Geospatial Consortium (OGC) and described in their Simple Feature Access and Coordinate Transformation Service specifications.
フォーマットはもともと Open Geospatial Consortium(OGC)によって定義され、Simple Feature Access と Coordinate Transformation Service 仕様に記述されていました。

The current standard definition is in the ISO/IEC 13249-3:2011 standard, "Information technology -- Database languages -- SQL multimedia and application packages -- Part 3: Spatial" (SQL/MM).
現在の標準定義は、ISO/IEC 13249-3:2011 標準、"Information technology -- Database languages -- SQL multimedia and application packages -- Part 3: Spatial" (SQL/MM) です。
*****

「225-ol3ex.js」
var raster = 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.OSM()
 /** ol.source.OSM 
  * Layer source for the OpenStreetMap tile server.
  * OpenStreetMap タイルサーバのレイヤソース。(ol3 API)
  */
});
var format = new ol.format.WKT();
var feature = format.readFeature(
 /** readFeature
  * Read a feature from a WKT source.
  * WKT ソースからフィーチャを読み取ります。(ol3 API)
  */
 /** 'POLYGON((10.689697265625 -25.0927734375, 34.595947265625 ' +
  * '-20.1708984375, 38.814697265625 -35.6396484375, 13.502197265625 ' +
  * '-39.1552734375, 10.689697265625 -25.0927734375))');
  */
 'POLYGON((139.72 35.53, ' +
  '139.82 35.63, ' +
  '139.82 35.73, ' +
  '139.62 35.83, ' +
  '139.52 35.73))');
feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
/** getGeometry()
 * Returns the Geometry associated with this feature 
 * using the current geometry name property. By default, 
 * this is geometry but it may be changed by calling 
 * setGeometryName.
 * 現在のジオメトリネームプロパティを使用して、このフィーチャに
 * 関連したジオメトリを返します。デフォルトでは、ジオメトリです
 * が、setGeometryName を呼び出すことによって変更することがで
 * きます。(ol3 API)
 */
/** transform(source, destination)
 * Transform each coordinate of the geometry from one 
 * coordinate reference system to another. The 
 * geometry is modified in place. For example, a line 
 * will be transformed to a line and a circle to a 
 * circle. If you do not want the geometry modified in 
 * place, first clone() it and then use this function 
 * on the clone.
 * ある座標参照系から別のものへジオメトリの各座標を変換。ジオ
 * メトリは、所定の位置に修正されます。例えば、ラインはライン
 * に、円は円に変換されます。ジオメトリを所定の位置に修正した
 * くない場合、最初にそれを clone() し、それからクローンでこ
 * の関数を使用します。(ol3 API)
 */
var vector = new ol.layer.Vector({
/** ol.layer.Vector 
 * Vector data that is rendered client-side. Note that any 
 * property set in the options is set as a ol.Object property
 * on the layer object; for example, setting title: 'My 
 * Title' in the options means that title is observable, and 
 * has get/set accessors.
 * クライアント側で描画されたベクタデータ。オプションで設定した任
 * 意のプロパティは、レイヤオブジェクトで ol.Object プロパティ
 * として設定されていることに注意してください。たとえば、オプショ
 * ンで、title:'My Title' を設定することは、タイトルは 
 * observable で、アクセサを取得/設定することを意味します。
 * (ol3 API)
 */
 source: new ol.source.Vector({
/** ol.source.Vector 
 * Provides a source of features for vector layers.
 * ベクタレイヤのフィーチャのソースを提供します。(ol3 API)
 */
  features: [feature]
 })
});
var map = new ol.Map({
 layers: [raster, vector],
 target: 'map',
 view: new ol.View({
  // center: [2952104.019976033, -3277504.823700756],
  center: ol.proj.transform(
  /** ol.proj.transform(coordinate, source, destination)
   * Transforms a coordinate from source projection to 
   * destination projection. This returns a new coordinate 
   * (and does not modify the original).
   * ソース投影から変換先投影に座標変換します。これは、新しい座標
   * を返します(オリジナルを変更しません)。(ol3 API)
   */
   [139.72, 35.68], 'EPSG:4326', 'EPSG:3857'),//東京周辺に修正
  // zoom: 4
  zoom: 10
 })
});


2 - ol3ex 25a - WKT example 1

「WKT example(wkt.html)」を参考に地図を表示してみます。

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





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





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



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








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











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


「225-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.0.0/css/ol.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0/resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0/resources/layout.css" type="text/css">
  <link rel="stylesheet" href="v3.0.0/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
  <title&gt;WKT 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.0.0/examples/"><img src="v3.0.0/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">WKT example</h4>
     <p id="shortdesc">Example of using the WKT parser.</p>
<!--
      <p>See the <a href="wkt.js" target="_blank">wkt.js source</a> to see how this is done.</p>
-->
       <!-- ファイル修正 -->
      <p>See the <a href="225-ol3ex.js" target="_blank">225-ol3ex.js source</a> to see how this is done.</p>
     </div>
     <div id="tags">WKT Well Known Text</div>
    </div>
   </div>
  </div>
<!--
  <script src="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.0.0/examples/jquery.min.js" type="text/javascript"></script>
  <script src="v3.0.0/resources/example-behaviour.js" type="text/javascript"></script>
<!--
  <script src="loader.js?id=wkt" type="text/javascript"></script>
-->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=225-ol3ex" type="text/javascript"></script>

 </body>
</html>