2 - ol3.3ex 85b - Tissot indicatrix example 2

「tissot.js（285-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。

「285-ol3ex.js」

var vectorLayer4326 = new ol.layer.Vector({
 /*: ol.source.Vector 
  * Provides a source of features for vector layers.
  * ベクタレイヤのフィーチャのソースを提供します。（ol3 API）
  */

 source: new ol.source.Vector()
});

var vectorLayer3857 = new ol.layer.Vector({
 source: new ol.source.Vector()
});

var map4326 = new ol.Map({
 layers: [
  new ol.layer.Tile({

   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'
    }
   })
  }),
  vectorLayer4326
 ],
 renderer: 'canvas',
 target: 'map4326',
 view: new ol.View({
  projection: 'EPSG:4326',
  center: [0, 0],
  zoom: 2
 })
});

var map3857 = new ol.Map({
 layers: [
  new ol.layer.Tile({
   source: new ol.source.TileWMS({
    url: 'http://demo.boundlessgeo.com/geoserver/wms',
    params: {
     'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
    }
   })
  }),
  vectorLayer3857
 ],
 renderer: 'canvas',
 target: 'map3857',
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 })
});

var wgs84Sphere = new ol.Sphere(6378137);
/** ol.Sphere
 * Class to create objects that can be used with 
 * ol.geom.Polygon.circular.
 * For example to create a sphere whose radius is equal 
 * to the semi-major axis of the WGS84 ellipsoid:
 * ol.geom.Polygon.circular が使用できるオブジェクトを作成
 * するクラス。
 * 例えば、WGS84　楕円の半長径に等しい半径の球体を作成します。
 * （ol3 API）
 */

var radius = 800000;
var x, y;
for (x = -180; x < 180; x += 30) {
 for (y = -90; y < 90; y += 30) {

  var circle4326 = ol.geom.Polygon.circular(wgs84Sphere, [x, y], radius, 64);
  /** ol.geom.Polygon.circular(sphere, center, radius, opt_n)
   * Create an approximation of a circle on the surface 
   * of a sphere.
   * 球の表面上の円の近似値を作成します。（ol3 API）
   */

  var circle3857 = circle4326.clone().transform('EPSG:4326', 'EPSG:3857');
  /** clone()
   * Make a complete copy of the geometry.
   * ジオメトリの完全なコピーを作成します。（ol3 API）
   */

  vectorLayer4326.getSource().addFeature(new ol.Feature(circle4326));
  /** getSource()
   * Return: Source.（ol3 API）
   */

  /** addFeature(feature)
   * Add a single feature to the source. If you want 
   * to add a batch of features at once, call 
   * source.addFeatures() instead.
   * ソースに一つのフィーチャを追加します。すぐにフィーチャの
   * バッチを追加したい場合は、代わりに source.addFeatures（）
   * を呼び出します。（ol3 API）
   */

  /** ol.Feature
   * A vector object for geographic features with a geometry 
   * and other attribute properties, similar to the features 
   * in vector file formats like GeoJSON.
   * GeoJSONのようなベクトルファイル形式のフィーチャに類似した、
   * ジオメトリとその他の属性プロパティを持つ地物フィーチャのため
   * のベクトルオブジェクト。（ol3 API）
   */

  vectorLayer3857.getSource().addFeature(new ol.Feature(circle3857));
 }
}