「213-ol3ex.js」
var mousePositionControl = new ol.control.MousePosition({
/** ol.control.MousePosition
* A control to show the 2D coordinates of the mouse
* cursor. By default, these are in the view projection,
* but can be in any supported projection. By default
* the control is shown in the top right corner of the
* map, but this can be changed by using the css selector
* .ol-mouse-position.
* マウスカーソルの2次元座標を表示すするためのコントロール。デ
* フォルトでは、これらはビュー投影（の数値）ですが、サポートさ
* れている任意の投影にすることができます。デフォルトでは、コン
* トロールは、マップの右上に表示されますが、これは CSS セレク
* タ .ol-mouse-position を使用して変更することができます。
* （ol3 API）
*/
coordinateFormat: ol.coordinate.createStringXY(4),
/** ol.coordinate.createStringXY(opt_fractionDigits)
* Returns a ol.CoordinateFormatType function that can be
* used to format a {ol.Coordinate} to a string.
* 「ol.Coordinate」を文字列にフォーマットするために使用される
* ol.CoordinateFormatType 関数を返します。（小数点以下の桁数）
* （ol3 API）
*/
projection: 'EPSG:4326',
// comment the following two lines to have the mouse
// position be placed within the map.
className: 'custom-mouse-position', // CSS クラス名
target: document.getElementById('mouse-position'),
undefinedHTML: ' '
});
// 追加
var projection = ol.proj.get('EPSG:2451');
/** ol.proj.get(projectionLike)
* Fetches a Projection object for the code specified.
* 指定されたコードのプロジェクション·オブジェクトを取得
* （ol3 API）
*/
projection.setExtent([-85044.6807, -406697.3730, 96656.4509, -8388.7498]); /** setExtent(extent) * Set the validity extent for this projection. * この投影の有効範囲を設定します。（ol3 API） */
var extent = [-63100, -34500, -45400, -24200];
var map = new ol.Map({
controls: ol.control.defaults({
/** 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 */
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
/** @type
* 値のタイプ（型）の説明 - 式などで表示
* （@use JSDoc[http://usejsdoc.org/]より）
*/
collapsible: false // 折りたたみ }) }).extend([ mousePositionControl ]),
layers: [
/*
* new ol.layer.Tile({
* source: new ol.source.OSM()
* }),
*/
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://localhost:8080/geoserver/wms?',
attributions: [new ol.Attribution({
/** ol.Attribution
* An attribution for a layer source.
* レイヤソースの属性（ol3 API）
*/
html: '国土交通省 国土数値情報'
// html: '<a href="http://portal.cyberjapan.jp/help/termsofuse.html" target="_blank">' + // EPSG:2451
// '国土地理院</a>' // EPSG:2451
})],
params: {'LAYERS': 'npn:tokyo_kuiki', 'TILED': true},
// params: {'LAYERS': 'npn:akiruno_kukaku', 'TILED': true, 'VERSION': '1.1.1'}, // EPSG:2451
// extent: extent, // EPSG:2451
serverType: 'geoserver'
}))
})
],
renderer: exampleNS.getRendererFromQueryString(), //'example-behavior.js' により URL にある renderer を返します
target: 'map',
view: new ol.View({
projection: 'EPSG:4326', // 追加
// projection: projection, // EPSG:2451
// extent: extent, // EPSG:2451
// center: [0, 0],
center: [139.42, 35.68],
// center: [-54250, -29350], // EPSG:2451
// zoom: 2
zoom: 10
// zoom: 6 // EPSG:2451
})
});
var projectionSelect = new ol.dom.Input(document.getElementById('projection'));
/** ol.dom.Input
* Helper class for binding HTML input to an ol.Object.
* ol.Object に HTML input要素を接続するためのヘルパークラス。
* （ol3 API）
*/
projectionSelect.bindTo('value', mousePositionControl, 'projection')
.transform(
/** bindTo()
* The bindTo method allows you to set up a two-way
* binding between a `source` and `target` object.
* The method returns an object with a `transform`
* method that you can use to provide `from` and
* `to` functions to transform values on the way
* from the source to the target and on the way back.
* bindTo メソッドは、`source` と ` target` オブジェク
* ト間の結合を双方向に設定することができます。メソッド
* は、ソースからターゲットに、および、その逆方向に値を
* 変換する、 `from` と ` to` ファンクションを提供する
* ために使用することがでる `transform` メソッドをとも
* なった、オブジェクトを返します。
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
/** 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） */
function(code) {
//projectionSelect.value -> mousePositionControl.projection
return ol.proj.get(/** @type {string} */ (code));
},
function(projection) {
//mousePositionControl.projection -> projectionSelect.value
return projection.getCode(); /** getCode() * Get the code for this projection, e.g. 'EPSG:4326'. * この東映（例えば EPSG:4326）の座標を取得。（ol3 API） */ });
var precisionInput = document.getElementById('precision');
precisionInput.addEventListener('change', function() {
/** EventTarget.addEventListener
* addEventListener は、 1 つのイベントターゲットにイベント
* リスナーを1つ登録します。イベントターゲットは、ドキュメント
* 上の単一のノード、ドキュメント自身、ウィンドウ、あるいは、
* XMLHttpRequest です。
*（MDN[https://developer.mozilla.org/ja/docs/Web/API/
* EventTarget.addEventListener]）
*/
var format = ol.coordinate.createStringXY(precisionInput.valueAsNumber); /** valueAsNumber * The value of the element, interpreted as one of * the following in order: 1.a time value, * 2.a number, 3.NaN if conversion is not possible * 要素の値。次の順に解釈されます。 * （MDN[https://developer.mozilla.org/en-US/docs/Web/ * API/HTMLInputElement]） */
mousePositionControl.setCoordinateFormat(format); /** setCoordinateFormat(format) * Name: format, Type: ol.CoordinateFormatType, * Description: The format to render the current * position in. * （ol3 API） */ }, false);
0 件のコメント:
コメントを投稿