「tile-vector.js（229-ol3ex.js）」は、マップを表示するための JavaScript ファイルです。
var waterLayer = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されたベクタデータ。（ol3 API）
*/
source: new ol.source.TileVector({
/** ol.source.TileVector
* A vector source in one of the supported formats, where
* the data is divided into tiles in a fixed grid pattern.
* グリッドパターンに固定されている状態でデータがタイルに分割さ
* れている、サポートされたフォーマットの一つのベクタソース。
* （ol3 API）
*/
format: new ol.format.TopoJSON(),
/** ol.format.TopoJSON
* Feature format for reading and writing data
* in the TopoJSON format.
* TopoJSON フォーマットでデータを読み書きするためのフィー
* チャのフォーマット。（ol3 API）
*/
projection: 'EPSG:3857',
tileGrid: new ol.tilegrid.XYZ({
/** ol.tilegrid.XYZ
* Set the grid pattern for sources accessing XYZ
* tiled-image servers.
* XYZタイル画像サーバにアクセスするソースのグリッドパターンを
* 設定します。（ol3 API）
*/
maxZoom: 19
}),
url: 'http://{a-c}.tile.openstreetmap.us/' +
'vectiles-water-areas/{z}/{x}/{y}.topojson'
}),
style: new ol.style.Style({
/** ol.style.Style
* Base class for vector feature rendering styles.
* ベクタフィーチャがスタイルを描画するための基本クラス。
* （ol3 API）
*/
fill: new ol.style.Fill({
/** ol.style.Fill
* Set fill style for vector features.
* ベクタフィーチャの塗りつぶしスタイルを設定。（ol3 API）
*/
color: '#9db9e8'
})
})
});
var roadStyleCache = {};
var roadLayer = new ol.layer.Vector({
source: new ol.source.TileVector({
format: new ol.format.TopoJSON(),
projection: 'EPSG:3857',
tileGrid: new ol.tilegrid.XYZ({
maxZoom: 19
}),
url: 'http://{a-c}.tile.openstreetmap.us/' +
'vectiles-highroad/{z}/{x}/{y}.topojson'
}),
style: function(feature, resolution) {
var kind = feature.get('kind');
/** get(key)
* Gets a value.
* （ol3 API[説明は Stable Only のチェックを外すと表示]）
*/
var railway = feature.get('railway');
var sort_key = feature.get('sort_key');
var styleKey = kind + '/' + railway + '/' + sort_key;
var styleArray = roadStyleCache[styleKey];
if (!styleArray) {
var color, width;
if (railway) {
color = '#7de';
width = 1;
} else {
color = {
'major_road': '#776',
'minor_road': '#ccb',
'highway': '#f39'
}[kind];
width = kind == 'highway' ? 1.5 : 1;
/** 条件演算子 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]）
*/
}
styleArray = [new ol.style.Style({
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）
*/
color: color,
width: width
}),
zIndex: sort_key
})];
roadStyleCache[styleKey] = styleArray;
}
return styleArray;
}
});
var buildingStyle = [
new ol.style.Style({
fill: new ol.style.Fill({
color: '#666',
opacity: 0.4
}),
stroke: new ol.style.Stroke({
color: '#444',
width: 1
})
})
];
var buildingLayer = new ol.layer.Vector({
source: new ol.source.TileVector({
format: new ol.format.TopoJSON({
defaultProjection: 'EPSG:4326'
}),
projection: 'EPSG:3857',
tileGrid: new ol.tilegrid.XYZ({
maxZoom: 19
}),
url: 'http://{a-c}.tile.openstreetmap.us/' +
'vectiles-buildings/{z}/{x}/{y}.topojson'
}),
visible: false,
style: function(f, resolution) {
return (resolution < 10) ? buildingStyle : [];
}
});
var landuseStyleCache = {};
var landuseLayer = new ol.layer.Vector({
source: new ol.source.TileVector({
format: new ol.format.TopoJSON({
defaultProjection: 'EPSG:4326'
}),
projection: 'EPSG:3857',
tileGrid: new ol.tilegrid.XYZ({
maxZoom: 19
}),
url: 'http://{a-c}.tile.openstreetmap.us/' +
'vectiles-land-usages/{z}/{x}/{y}.topojson'
}),
visible: false,
style: function(feature, resolution) {
var kind = feature.get('kind');
var styleKey = kind;
var styleArray = landuseStyleCache[styleKey];
if (!styleArray) {
var color, width;
color = {
'parking': '#ddd',
'industrial': '#aaa',
'urban area': '#aaa',
'park': '#76C759',
'school': '#DA10E7',
'garden': '#76C759',
'pitch': '#D58F8D',
'scrub': '#3E7D28',
'residential': '#4C9ED9'
}[kind];
width = kind == 'highway' ? 1.5 : 1;
styleArray = [new ol.style.Style({
stroke: new ol.style.Stroke({
color: color,
width: width
}),
fill: new ol.style.Fill({
color: color,
opacity: 0.5
})
})];
landuseStyleCache[styleKey] = styleArray;
}
return styleArray;
}
});
var map = new ol.Map({
layers: [landuseLayer, buildingLayer, waterLayer, roadLayer],
renderer: 'canvas',
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.transform([-74.0064, 40.7142], 'EPSG:4326', 'EPSG:3857'),
/** ol.proj.transform(coordinate, source, destination)
* Transforms a coordinate from source projection to
* destination projection. This returns a new coordinate
* (and does not modify the original).
* ソース投影から変換先投影に座標変換します。これは、新しい座標
* を返します（オリジナルを変更しません）。（ol3 API）
*/
maxZoom: 19,
zoom: 15
})
});
// チェックボックスの選択状態を取得
$('input[type=checkbox]').on('change', function() {
// jQuery on イベント
var layer = {
landuse: landuseLayer,
buildings: buildingLayer,
water: waterLayer,
roads: roadLayer
}[$(this).attr('id')];
/** .attr()
* Get the value of an attribute for the first element in
* the set of matched elements or set one or more
* attributes for every matched element.
* マッチした要素のセットの最初の要素の属性の値を取得するか、す
* べての一致した要素の1つ以上の属性を設定します。
* （jQuery[http://api.jquery.com/attr/]）
*/
layer.setVisible(!layer.getVisible());
/** setVisible(visible)
* Name: visible, Type: boolean,
* Description: The visibility of the layer.（ol3 API）
*/
/** getVisible()
* Return: The visibility of the layer.（ol3 API）
*/
});
0 件のコメント:
コメントを投稿