「2158-ol3ex.js」
var appId = 'a2qhe...（省略）';
var appCode = 'lPJ3i...（省略）';
var hereLayers = [
{
base: 'base',
type: 'maptile',
scheme: 'normal.day',
app_id: appId,
app_code: appCode
},
{
base: 'base',
type: 'maptile',
scheme: 'normal.day.transit',
app_id: appId,
app_code: appCode
},
{
base: 'base',
type: 'maptile',
scheme: 'pedestrian.day',
app_id: appId,
app_code: appCode
},
{
base: 'aerial',
type: 'maptile',
scheme: 'terrain.day',
app_id: appId,
app_code: appCode
},
{
base: 'aerial',
type: 'maptile',
scheme: 'satellite.day',
app_id: appId,
app_code: appCode
},
{
base: 'aerial',
type: 'maptile',
scheme: 'hybrid.day',
app_id: appId,
app_code: appCode
}
];
var urlTpl = 'https://{1-4}.{base}.maps.cit.api.here.com' +
'/{type}/2.1/maptile/newest/{scheme}/{z}/{x}/{y}/256/png' +
'?app_id={app_id}&app_code={app_code}';
var layers = []; var i, ii;
for (i = 0, ii = hereLayers.length; i < ii; ++i) {
var layerDesc = hereLayers[i];
layers.push(new ol.layer.Tile({
/** push(elem)
* Insert the provided element at the end of the
* collection.
* コレクションの最後に供給されたエレメントに挿入します。
* Name: elem, Type: T, Description: Element
* （ol3 API）
*/
visible: false, /** visible: * Visibility. Default is true (visible). * 可視性。デフォルトは true（表示）です。 * （ol3 API） */
preload: Infinity, /** preload * Preload. Load low-resolution tiles up to preload * levels. By default preload is 0, which means no * preloading. * プリロード。プリロードレベルまで低解像度のタイルをロード * します。デフォルトのプリロードは、全くプリロードしないこ * とを意味する 0 です。（ol3 API） */
source: new ol.source.XYZ({
/** source
* Source for this layer. Required.
* レイヤーのソース。必須。（ol3 API）
*/
/** ol.source.XYZ
* Layer source for tile data with URLs in a set XYZ
* format that are defined in a URL template. By
* default, this follows the widely-used Google grid
* where x 0 and y 0 are in the top left. Grids like
* TMS where x 0 and y 0 are in the bottom left can
* be used by using the {-y} placeholder in the URL
* template, so long as the source does not have a
* custom tile grid. In this case, ol.source.TileImage
* can be used with a tileUrlFunction such as:
*
* tileUrlFunction: function(coordinate) {
* return 'http://mapserver.com/'
* + coordinate[0] + '/'
* + coordinate[1] + '/'
* + coordinate[2] + '.png'; }
*
* URL テンプレートで定義されているセット XYZ 形式の URL
* を持つタイルデータのレイヤソース。デフォルトでは、これは、
* x0 と y0 が左上にある広く使用されている Google のグリッド
* に従います。x0 と y0 が左下にある TMS のようなグリッドは、
* ソースがカスタムタイルグリッドを持っていない限り、URL テ
* ンプレートに {-y} プレースホルダを使用して使用することが
* できます。この場合、ol.source.TileImage は tileUrlFunction
* で次のように使用できます。（ol3 API）
*/
url: createUrl(urlTpl, layerDesc),
/** url
* URL template. Must include {x}, {y} or {-y}, and
* {z} placeholders. A {?-?} template pattern, for
* example subdomain{a-f}.domain.com, may be used
* instead of defining each one separately in the
* urls option.
* URLテンプレート。 {x}、{y} または {-y}、と {z} プレー
* スホルダを含める必要があります。例えば
* subdomain{a-f}.domain.com の {?-?} テンプレートパ
* ターンは、urls オプションでそれぞれを個別に定義する代
* わりに、使用することができます。（ol3 API）
*/
attributions: 'Map Tiles © 2016 ' +
'<a href="http://developer.here.com">HERE</a>'
}) })); }
var map = new ol.Map({
layers: layers,
renderer: common.getRendererFromQueryString(),
// 'common.js' により URL にある renderer を返します
/** Improve user experience by loading tiles while * dragging/zooming. Will make zooming choppy on * mobile or slow devices. * ドラッグ/ズーミング中にタイルをロードすることによって、 * ユーザーエクスペリエンスを向上させます。モバイルまたは * 低速デバイス上で途切れ途切れズームを行います。 */
loadTilesWhileInteracting: true, /** loadTilesWhileInteracting * When set to true, tiles will be loaded while * interacting with the map. This may improve the user * experience, but can also make map panning and zooming * choppy on devices with slow memory. Default is false. * true に設定すると、タイルはマップとの対話中にロー * ドされます。これは、ユーザーの利便性を向上させるだけ * でなく、低速メモリを持つデバイス上でマップを途切れ途 * 切れパンおよびズームすることができます。デフォルトは * false です。 * （ol3 API[説明は Stable Only のチェックを外すと表示]） */
target: 'map', /** target * The container for the map, either the element * itself or the id of the element. If not * specified at construction time, ol.Map#setTarget * must be called for the map to be rendered. * マップのコンテナ、エレメント自身またはエレメントの id * のいずれかです。構築時に指定されていない場合は、レンダ * リングされるマップのために、ol.Map＃1がsetTarget を * 呼び出す必要があります。（ol3 API） */
view: new ol.View({
center: [921371.9389, 6358337.7609],
zoom: 10
})
});
function createUrl(tpl, layerDesc) {
return tpl
.replace('{base}', layerDesc.base)
/** replace [メソッド]
* 指定された URL に現在の文書を置き換えます。 assign() メ
* ソッドとの違いは、replace() を用いた後、現在のページは、
* セッションの履歴には保持されないことです。つまり、ユーザ
* は、置き換え前のページに戻るために、戻るボタンを使うこと
* ができません。
* （MDN[https://developer.mozilla.org/ja/docs/Web/API/
* Window/location]）
*/
.replace('{type}', layerDesc.type)
.replace('{scheme}', layerDesc.scheme)
.replace('{app_id}', layerDesc.app_id)
.replace('{app_code}', layerDesc.app_code);
}
var select = document.getElementById('layer-select');
function onChange() {
var scheme = select.value;
for (var i = 0, ii = layers.length; i < ii; ++i) {
layers[i].setVisible(hereLayers[i].scheme === scheme); /** setVisible(visible) * Set the visibility of the layer (true or false). * レイヤの表示/非表示を設定します。 * （ol3 API） */
} }
select.addEventListener('change', onChange);
/** EventTarget.addEventListener
* The EventTarget.addEventListener() method registers
* the specified listener on the EventTarget it's called
* on. The event target may be an Element in a document,
* the Document itself, a Window, or any other object
* that supports events (such as XMLHttpRequest).
* EventTarget.addEventListener() メソッドは、それが呼び
* 出される EventTarget に指定されたリスナを登録します。イベ
* ントターゲットは、ドキュメントの Element、Document 自身、
* Window、または（XMLHttpRequest などの）イベントをサポート
* している他のオブジェクトです。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/API/
* EventTarget/addEventListener]）
*/
onChange();
0 件のコメント:
コメントを投稿