「211-ol3ex.js」
var scaleLineControl = 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） */
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([ scaleLineControl ]),
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.OSM()
* }),
*/
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://localhost:8080/geoserver/wms?',
attributions: [new ol.Attribution({
/** ol.Attribution
* An attribution for a layer source.
* レイヤソースの属性（ol3 API）
*/
html: '国土交通省 国土数値情報'
})],
params: {'LAYERS': 'npn:tokyo_kuiki', 'TILED': true},
serverType: 'geoserver'
}))
})
],
renderer: exampleNS.getRendererFromQueryString(),
//'example-behavior.js' により URL にある renderer を返します
target: 'map',
view: new ol.View({
projection: 'EPSG:4326', // 追加
// center: [0, 0],
center: [139.42, 35.68],
// zoom: 2
zoom: 10
})
});
var unitsSelect = new ol.dom.Input(document.getElementById('units'));
/** ol.dom.Input
* Helper class for binding HTML input to an ol.Object.
* ol.Object に HTML input要素を接続するためのヘルパークラス。
* （ol3 API）
*/
unitsSelect.bindTo('value', scaleLineControl, 'units');
/** 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 のチェックを外すと表示]）
*/
次は、座標系が EPSG:2451 のコードです。
「211-ol3ex.js」
var scaleLineControl = new ol.control.ScaleLine(); // スケールラインコントロール // EPSG:2451
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({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}).extend([ scaleLineControl ]),
layers: [
/*
* new ol.layer.Tile({
* source: new ol.source.OSM()
* }),
*/
new ol.layer.Tile({
source: new ol.source.TileWMS(({
url: 'http://localhost:8080/geoserver/wms?',
attributions: [new ol.Attribution({
html: '<a href="http://portal.cyberjapan.jp/help/termsofuse.html" target="_blank">' + // EPSG:2451 '国土地理院</a>' // EPSG:2451
})],
params: {'LAYERS': 'npn:akiruno_kukaku', 'TILED': true, 'VERSION': '1.1.1'}, // EPSG:2451
extent: extent, // EPSG:2451 serverType: 'geoserver' })) }) ],
renderer: exampleNS.getRendererFromQueryString(),
target: 'map',
view: new ol.View({
projection: projection, // EPSG:2451
extent: extent, // EPSG:2451
// center: [0, 0],
center: [-54250, -29350], // EPSG:2451
// zoom: 2
zoom: 6 // EPSG:2451
})
});
var unitsSelect = new ol.dom.Input(document.getElementById('units'));
unitsSelect.bindTo('value', scaleLineControl, 'units');
