「2159-ol3ex.js」
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
/** HTMLCanvasElement.getContext()
* The HTMLCanvasElement.getContext() method returns a
* drawing context on the canvas, or null if the
* context identifier is not supported.
* HTMLCanvasElement.getContext（）メソッドは、キャンバ
* ス上の描画コンテキストを返すか、または コンテキスト識別
* 子がサポートされていない場合、null を返します。
* contextType Is a DOMString containing the context
* identifier defining the drawing context associated
* to the canvas.
* "2d", leading to the creation of a
* CanvasRenderingContext2D object representing a
* two-dimensional rendering context.
* contextTypeは canvas に関連する描画コンテキストを定義
* するコンテキスト識別子を含む DOMString です。
* 「2D」、二次元のレンダリングコンテキストを表す
* CanvasRenderingContext2D オブジェクトの作成につなが
* ります。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* API/HTMLCanvasElement/getContext]）
*/
// Gradient and pattern are in canvas pixel space, so // we adjust for the renderer's pixel ratio // グラデーションとパターンはキャンバスピクセルスペースなので、 // レンダラー画素率を調整します
var pixelRatio = ol.has.DEVICE_PIXEL_RATIO; /** ol.has.DEVICE_PIXEL_RATIO * The ratio between physical pixels and * device-independent pixels (dips) on the device * (window.devicePixelRatio). * デバイス（window.devicePixelRatio）上の物理的な画素とデバ * イスに依存しないピクセル（ディップ）との比率。（ol3 API） */
// Generate a rainbow gradient
function gradient(feature, resolution) {
var extent = feature.getGeometry().getExtent(); /** getGeometry() * Get the feature's default geometry. A feature may * have any number of named geometries. The "default" * geometry (the one that is rendered by default) is * set when calling ol.Feature#setGeometry. * フィーチャのデフォルトのジオメトリを取得します。フィーチャ * は、任意の数の指定のジオメトリのを有することができます。 * 「デフォルト」のジオメトリ（デフォルトでレンダリングされ * るもの）が ol.Feature＃setGeometry を呼び出すときに * 設定されています。（ol3 API） */
/** getExtent(opt_extent) * Get the extent of the geometry. * ジオメトリの範囲を取得します。（ol3 API） */
// Gradient starts on the left edge of each feature, and // ends on the right. Coordinate origin is the top-left // corner of the extent of the geometry, so we // just divide by resolution and multiply with pixelRatio // to match the renderer's pixel coordinate system. // グラデーションは、各フィーチャの左端から開始され、右側で終 // 了します。座標原点はジオメトリの範囲の左上隅座標で、レンダ // リングのピクセル座標系を一致させるために単に resolution // で割り、pixelRatio を掛けます。
var grad = context.createLinearGradient(0, 0, /** CanvasRenderingContext2D.createLinearGradient() * The CanvasRenderingContext2D.createLinearGradient() * method of the Canvas 2D API creates a gradient along * the line given by the coordinates represented by the * parameters. This method returns a linear * CanvasGradient. * Canvas 2D API の * CanvasRenderingContext2D.createLinearGradient() * メソッドは、パラメータによって表される座標で指定された線に * 沿ってグラデーションを作成します。この方法は、線形 * CanvasGradient を返します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * API/CanvasRenderingContext2D/createLinearGradient]） */
ol.extent.getWidth(extent) / resolution * pixelRatio, 0);
grad.addColorStop(0, 'red'); /** CanvasGradient.addColorStop() * The CanvasGradient.addColorStop() method adds a new * stop, defined by an offset and a color, to the * gradient. If the offset is not between 0 and 1, an * INDEX_SIZE_ERR is raised, if the color can't be * parsed as a CSS, a SYNTAX_ERR is raised. * CanvasGradient.addColorStop() メソッドは、グラデー * ションに、オフセットと色によって定義される新しい stop を * 追加します。オフセットが 0 と 1 の間にない場合は、 * INDEX_SIZE_ERR が発生し、色が CSS として解析 * できない場合は、SYNTAX_ERR が発生します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * API/CanvasGradient/addColorStop]） */
grad.addColorStop(1 / 6, 'orange'); grad.addColorStop(2 / 6, 'yellow'); grad.addColorStop(3 / 6, 'green'); grad.addColorStop(4 / 6, 'aqua'); grad.addColorStop(5 / 6, 'blue'); grad.addColorStop(1, 'purple'); return grad; }
// Generate a canvasPattern with two circles on white
// background
// 白地に２つの円で canvasPattern を生成します
var pattern = (function() {
canvas.width = 11 * pixelRatio;
canvas.height = 11 * pixelRatio;
// white background
context.fillStyle = 'white'; /** CanvasRenderingContext2D.fillStyle * The CanvasRenderingContext2D.fillStyle property of * the Canvas 2D API specifies the color or style to * use inside shapes. The default is #000 (black). * Canvas 2D API の CanvasRenderingContext2D.fillStyle * プロパティは、図形の内側に使用する色やスタイルを指定します。 * デフォルトでは、＃000（黒）です。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/fillStyle]） */
context.fillRect(0, 0, canvas.width, canvas.height); /** CanvasRenderingContext2D.fillRect() * The CanvasRenderingContext2D.fillRect() method of * the Canvas 2D API draws a filled rectangle at (x, y) * position whose size is determined by width and * height and whose style is determined by the fillStyle * attribute. * Canvas 2D API の CanvasRenderingContext2D.fillRect() * メソッドは、幅と高さによって決定されたサイズと、fillStyle 属 * 性によって決定されたスタイルの位置（x、y）で塗りつぶされた矩 * 形を描画します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/fillRect]） */
// outer circle context.fillStyle = 'rgba(102, 0, 102, 0.5)';
context.beginPath(); /** CanvasRenderingContext2D.beginPath() * The CanvasRenderingContext2D.beginPath() method of the * Canvas 2D API starts a new path by emptying the list * of sub-paths. Call this method when you want to create * a new path. * Canvas 2D API の CanvasRenderingContext2D.beginPath() * メソッドは、サブパスのリストを空にすることによって新しいパ * スを開始します。新しいパスを作成したいときに、このメソッド * を呼び出します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/beginPath]） */
context.arc(5 * pixelRatio, 5 * pixelRatio, 4 * pixelRatio, 0, 2 * Math.PI); /** CanvasRenderingContext2D.arc() * The CanvasRenderingContext2D.arc() method of the * Canvas 2D API adds an arc to the path which is * centered at (x, y) position with radius r starting at * startAngle and ending at endAngle going in the given * direction by anticlockwise (defaulting to clockwise). * Canvas 2D API の CanvasRenderingContext2D.arc() メ * ソッドは、半径 r の位置（x、y）を中心とする反時計回り（初 * 期値は時計回り）に startAngle で始まり endAngle で終わる * 弧をパスに追加します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/arc]） */
context.fill(); /** CanvasRenderingContext2D.fill() * The CanvasRenderingContext2D.fill() method of the * Canvas 2D API fills the current or given path with * the current fill style using the non-zero or even-odd * winding rule. * Canvas 2D API の CanvasRenderingContext2D.fill() メソッ * ドは、非ゼロ、または、偶奇屈曲規則を使用する現在の塗りつぶし * スタイルで、現在、または、指定されたパスを塗りつぶします。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/fill]） */
// inner circle context.fillStyle = 'rgb(55, 0, 170)'; context.beginPath(); context.arc(5 * pixelRatio, 5 * pixelRatio, 2 * pixelRatio, 0, 2 * Math.PI); context.fill();
return context.createPattern(canvas, 'repeat'); /** CanvasRenderingContext2D.createPattern() * The CanvasRenderingContext2D.createPattern() method * of the Canvas 2D API creates a pattern using the * specified image (a CanvasImageSource). It repeats the * source in the directions specified by the repetition * argument. This method returns a CanvasPattern. * Canvas 2D API の CanvasRenderingContext2D.createPattern() * メソッドは、指定されたイメージ（CanvasImageSource）を使用 * してパターンを作成します。これは、繰り返し引数で指定された * 方向にソースを繰り返します。このメソッドは、CanvasPattern * を返します。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/CanvasRenderingContext2D/createPattern]） */
}());
// Generate style for gradient or pattern fill // グラデーションまたはパターン塗りつぶしのスタイルを生成します。
var fill = new ol.style.Fill(); /** ol.style.Fill * Set fill style for vector features. * ベクタフィーチャの塗りつぶしスタイルを設定。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
var style = new ol.style.Style({
/** ol.style.Style
* Container for vector feature rendering styles. Any
* changes made to the style or its children through
* set*() methods will not take effect until the feature
* or layer that uses the style is re-rendered.
* ベクタフィーチャがスタイルを描画するためのコンテナ。
* スタイルや set*() メソッドを通じてその子に加えられた変
* 更は、スタイルを使用するフィーチャまたはレイヤが再レン
* ダリングされるまで有効になりません。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
fill: fill,
stroke: new ol.style.Stroke({
/** ol.style.Stroke
* Set stroke style for vector features.
* Note that the defaults given are the Canvas defaults,
* which will be used if option is not defined.
* The get functions return whatever was entered
* in the options; they will not return the default.
* ベクタフィーチャのためのストロークスタイルの設定。
* デフォルトは、オプションが定義されていない場合に使用さ
* れる Canvas のデフォルトを与えられることに注意してくだ
* さい。GET 関数は、オプションで入力されたものはすべて返
* す。それらはデフォルトを返しません。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
color: '#333', /** color * A color, gradient or pattern. See ol.color and * ol.colorlike for possible formats. Default null; * if null, the Canvas/renderer default black will * be used. * 色、グラデーションまたはパターン。可能なフォーマットの対す * る ol.color と oil.color を参照してください。デフォルトは * null; null の場合は、Canvas/renderer デフォルトの黒が * 使用されます。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
width: 2 }) });
/**
* The styling function for the vector layer, will
* return an array of styles which either contains
* the aboove gradient or pattern.
* ベクトルレイヤのスタイリングの関数は、上記のグラデーション、
* または、パターンのいずれかを含むスタイルの配列を返します。
*
* @param {ol.Feature} feature The feature to style.
* @param {number} resolution Resolution.
* @return {ol.style.Style} The style to use for the feature.
*/
/** 「@param」 * The @param tag provides the name, type, and * description of a function parameter. * The @param tag requires you to specify the name of * the parameter you are documenting. You can also * include the parameter's type, enclosed in curly * brackets, and a description of the parameter. * @paramタグは、関数パラメータの名前と型、説明を提供します。 * @paramタグを使用すると、文書化されたパラメータの名前を * 指定する必要があります。また、パラメータのタイプと、中括弧 * で囲まれたおよびパラメータの説明を含めることができます。 * （@use JSDoc [http://usejsdoc.org/tags-param.html]） */
/** @return（@returns と同義） * The @returns tag documents the value that a function * returns. * @returns タグは、関数が返す値について説明します。 * （@use JSDoc [http://usejsdoc.org/tags-returns..html]） */
var getStackedStyle = function(feature, resolution) {
var id = feature.getId(); /** getId() * Get the feature identifier. This is a stable identifier * for the feature and is either set when reading data * from a remote source or set explicitly by calling * ol.Feature#setId. * フィーチャ識別子を取得します。これは、フィーチャの安定した識 * 別子で、リモートソースからデータを読み取るか、 * ol.Feature#setid を呼び出すことによって明示的に設定した場合 * のいずれかのセットです。（ol3 API） */
fill.setColor(id > 'J' ? gradient(feature, resolution) : pattern); /** setColor(color) * Set the color.（ol3 API） */
/** 条件演算子 condition ? expr1 : expr2 * condition: true か false かを評価する条件文です。 * expr1, expr2: 各々の値の場合に実行する式です。 * condition が true の場合、演算子は expr1 の値を選択しま * す。そうでない場合は expr2 の値を選択します。 * （MDN[https://developer.mozilla.org/ja/docs/Web/ * JavaScript/Guide/Expressions_and_Operators]） */
return style; };
// Create a vector layer that makes use of the style // function above… // 上記のスタイル関数を使用したベクタレイヤを作成します。
var vectorLayer = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されるベクタデータ。（ol3 API）
*/
source: new ol.source.Vector({
/** ol.source.Vector
* Provides a source of features for vector layers.
* Vector features provided by this source are
* suitable for editing. See ol.source.VectorTile for
* vector data that is optimized for rendering.
* ベクタレイヤのフィーチャのソースを用意します。このソース
* が提供するベクタフィーチャは、編集に適しています。レンダ
* リングのために最適化されたベクタデータの
* ol.source.VectorTile を参照してください。（ol3 API）
*/
// url: 'data/geojson/countries.geojson', url: 'v3.19.0/examples/data/geojson/countries.geojson', /** url * Setting this option instructs the source to load * features using an XHR loader (see * ol.featureloader.xhr). Use a string and an * ol.loadingstrategy.all for a one-off download of * all features from the given URL. Use a * ol.FeatureUrlFunction to generate the url with * other loading strategies. Requires format to be * set as well. When default XHR feature loader is * provided, the features will be transformed from * the data projection to the view projection during * parsing. If your remote data source does not * advertise its projection properly, this * transformation will be incorrect. For some formats, * the default projection (usually EPSG:4326) can be * overridden by setting the defaultDataProjection * constructor option on the format. Note that if a * source contains non-feature data, such as a * GeoJSON geometry or a KML NetworkLink, these will * be ignored. Use a custom loader to load these. * このオプションを設定すると、XHR ローダーを * （ol.featureloader.xhr参照）を使用してフィーチャを * ロードするためのソースを指示します。指定された URL から * のすべてのフィーチャの1回限りのダウンロードのために * string と ol.loadingstrategy.all を使用してくださ * い。他のローディングストラテジと共に URL を生成するため * に、ol.FeatureUrlFunctionを使用してください。format * も同様に設定する必要があります。デフォルトの XHR フィー * チャローダが提供される場合、フィーチャは、解析中にデータ * 投影からビュー投影へ変換されます。リモート・データ・ソー * スが適切に投影を示していない場合は、この変換は不正確にな * ります。いくつかのフォーマットでは、デフォルトの投影（通 * 常はEPSG：4326）は、フォーマット上の * defaultDataProjection constructor オプションを設 * 定することで上書きすることができます。ソースが、このような * GeoJSON ジオメトリ、または、 KML NetworkLink などの * 非フィーチャデータを含んでいる場合、これらは無視されること * に注意してください。これらをロードするために、カスタムロー * ダーを使用してください。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
format: new ol.format.GeoJSON() /** format * he feature format used by the XHR feature loader * when url is set. Required if url is set, otherwise * ignored. Default is undefined. * フィーチャのフォーマットは、url が設定されている場合、XHR * フィーチャローダーで使用されます。url が設定されている場合 * は必須で、それ以外の場合は無視されます。デフォルトは未定義 * です。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
}),
style: getStackedStyle /** style * Layer style. See ol.style for default style which * will be used if this is not defined. * レイヤスタイル。これが定義されていない場合に使用されるデフォ * ルトのスタイルについては ol.style を参照してください。 * （ol3 API） */
});
// … finally create a map with that layer.
// 最後に、そのレイヤと共にマップを作成します。
var map = new ol.Map({
layers: [
vectorLayer
],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([7, 52]), /** ol.proj.fromLonLat(coordinate, opt_projection) * Transforms a coordinate from longitude/latitude to a * different projection. * 緯度/経度座標から異なる投影に変換します。（ol3 API） */ zoom: 3 }) });
