「2165-ol3ex.js」
var raster = 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() /** ol.source.OSM * Layer source for the OpenStreetMap tile server. * OpenStreetMap タイルサーバのレイヤソース。（ol3 API） */
});
var nodes = new ol.source.Vector({wrapX: false});
/** 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）
*/
/** wrapX: * Wrap the world horizontally. Default is true. For * vector editing across the -180° and 180° meridians * to work properly, this should be set to false. The * resulting geometry coordinates will then exceed the * world bounds. * 水平方向に世界をラップします。デフォルトは true。-180° * と180°の子午線を横切って編集するベクトルが正しく動作す * るために、これは false に設定する必要があります。ジオメ * トリの座標の結果は、その後、世界の境界線を超えます。 * （ol3 API[experimental]） */
var nodesLayer = new ol.layer.Vector({
/** ol.layer.Vector
* Vector data that is rendered client-side.
* クライアント側で描画されるベクタデータ。（ol3 API）
*/
source: nodes,
style: function(f) {
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[experimental]）
*/
image: new ol.style.Circle({
/** ol.style.Circle
* Set circle style for vector features.
* ベクタフィーチャの円のスタイルを設定。（ol3 API）
*/
radius: 8,
fill: new ol.style.Fill({color: 'rgba(255, 0, 0, 0.2)'}),
/** ol.style.Fill
* Set fill style for vector features.
* ベクタフィーチャの塗りつぶしスタイルを設定。
* （ol3 API[experimental]）
*/
stroke: new ol.style.Stroke({color: 'red', width: 1})
/** 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[experimental]）
*/
/** 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[experimental]）
*/
}),
text: new ol.style.Text({
/** ol.style.Text
* Set text style for vector features.
* ベクタフィーチャの文字列のスタイルを設定します。
* （ol3 API[experimental]）
*/
text: f.get('node').id.toString(),
/** get(key)
* Gets a value.（ol3 API）
*/
/** Number.prototype.toString( [ radix ] )
* 指定された Number オブジェクトを表す 文字列を返します。
* radix: 数値を表すために使われる基数を指定する、2 から
* 36 までの整数。省略したときは 10。
* MDN（[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/Number/toString]）
*/
fill: new ol.style.Fill({color: 'red'}),
/** fill:
* Fill style. If none is provided, we'll use a dark
* fill-style (#333).
* （ol3 API[experimental]）
*/
stroke: new ol.style.Stroke({
color: 'white',
width: 3
})
})
});
return [style];
}
});
var edges = new ol.source.Vector({wrapX: false});
var edgesLayer = new ol.layer.Vector({
source: edges,
style: function(f) {
var style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 1
}),
text: new ol.style.Text({
text: f.get('edge').id.toString(),
fill: new ol.style.Fill({color: 'blue'}),
stroke: new ol.style.Stroke({
color: 'white',
width: 2
})
})
});
return [style];
}
});
var faces = new ol.source.Vector({wrapX: false});
var facesLayer = new ol.layer.Vector({
source: faces,
style: function(f) {
var style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'black',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(0, 255, 0, 0.2)'
}),
text: new ol.style.Text({
font: 'bold 12px sans-serif',
/** font:
* Font style as CSS 'font' value, see:
* https://developer.mozilla.org/en-US/docs/Web/API/
* CanvasRenderingContext2D/font.
* Default is '10px sans-serif'
* （ol3 API[experimental]）
*/
text: f.get('face').id.toString(),
fill: new ol.style.Fill({color: 'green'}),
stroke: new ol.style.Stroke({
color: 'white',
width: 2
})
})
});
return [style];
}
});
var map = new ol.Map({
layers: [raster, facesLayer, edgesLayer, nodesLayer],
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 16
})
});
var topo = topolis.createTopology(); /** createTopology() * createTopology(name, srid, tolerance) * Create topology. * （JDoc:Module:topo[https://bjornharrtell.github.io/ * topolis/0.1.0/apidocs/module-topo.html#.createTopology]） */
topo.on('addnode', nodeToFeature);
/** on(topo, name, callback)
* topo.js line 100
* （JSDoc: Source topo.js[https://bjornharrtell.github.io/
* topolis/0.1.0/apidocs/topo.js.html]）
*/
topo.on('removenode', function(e) {
removeElementFeature(nodes, e);
});
topo.on('addedge', edgeToFeature);
topo.on('modedge', function(e) {
var feature = edges.getFeatureById(e.id); /**getFeatureById(id) * Get a feature by its identifier (the value returned by * feature.getId()). Note that the index treats string * and numeric identifiers as the same. So * source.getFeatureById(2) will return a feature with id * '2' or 2. * フィーチャ識別子（feature.getId（）によって返される値）に * よってフィーチャを取得します。 インデックスは、文字列と数 * 値の識別子を同じものとして扱うことに注意してください。 し * たがって、source.getFeatureById（2）は、IDが '2'（文字列） * または 2 （数値）のフィーチャを返します。（ol3 API） */
feature.setGeometry(new ol.geom.LineString(e.coordinates)); /** setGeometry() * Set the geometry for this feature. This will * update the property with the current name * returned by ol.Feature#getGeometryName. * このフィーチャのジオメトリを設定します。これは、 * ol.Feature#getGeometryName によって返された、現在の * 名前とともにプロパティを更新します。 * （ol3 API） */
/** ol.geom.LineString * Linestring geometry.（ol3 API） */
});
topo.on('removeedge', function(e) {
removeElementFeature(edges, e);
});
topo.on('addface', faceToFeature);
topo.on('removeface', function(e) {
removeElementFeature(faces, e);
});
function removeElementFeature(source, element) {
var feature = source.getFeatureById(element.id);
source.removeFeature(feature);
}
function nodeToFeature(node) {
var feature = new ol.Feature({
/** ol.Feature
* A vector object for geographic features with a
* geometry and other attribute properties, similar
* to the features in vector file formats like
* GeoJSON.
* GeoJSONのようなベクトルファイル形式のフィーチャに類
* 似した、ジオメトリとその他の属性プロパティを持つ地物
* フィーチャのためのベクトルオブジェクト。（ol3 API）
*/
geometry: new ol.geom.Point(node.coordinate), /** ol.geom.Point * Point geometry.（ol3 API） */
node: node });
feature.setId(node.id); /** setId(id) * Set the feature id. The feature id is considered * stable and may be used when requesting features or * comparing identifiers returned from a remote source. * The feature id can be used with the * ol.source.Vector#getFeatureById method. * フィーチャ id を設定します。 フィーチャ id は安定していると * 考えられ、フィーチャを要求したり、リモートソースから返された * 識別子を比較するときに使用されます。 フィーチャ id は、 * ol.source.Vector＃getFeatureByIdメソッドで使用できます。 * （ol3 API） */
nodes.addFeature(feature); /** addFeature(feature) * Add a single feature to the source. If you want to * add a batch of features at once, call * source.addFeatures() instead. * 単一のフィーチャをソースに追加します。 一度にフィーチャの * バッチを追加する場合は、代わりにsource.addFeatures() を呼 * び出します。（ol3 API） */
}
function edgeToFeature(edge) {
var feature = new ol.Feature({
geometry: new ol.geom.LineString(edge.coordinates),
edge: edge
});
feature.setId(edge.id);
edges.addFeature(feature);
}
function faceToFeature(face) {
var coordinates = topo.getFaceGeometry(face); /** getFaceGeometry(topo, face) * Returns the polygon in the given topology with the * specified face. * 指定された面の指定されたトポロジのポリゴンを返します。 * （JDoc:Module:topo[https://bjornharrtell.github.io/ * topolis/0.1.0/apidocs/module-face.html]） */
var feature = new ol.Feature({
geometry: new ol.geom.Polygon(coordinates), /** ol.geom.Polygon * Polygon geometry.（ol3 API） */
face: face }); feature.setId(face.id); faces.addFeature(feature); }
function createNode(topo, coord) {
var node;
var existingEdge = topo.getEdgeByPoint(coord, 5)[0]; /** getEdgeByPoint * （JDoc:Module:topo[https://bjornharrtell.github.io/ * topolis/0.1.0/apidocs/module-topo.html]） */
if (existingEdge) {
node = topo.modEdgeSplit(existingEdge, coord); /** modEdgeSplit * （JDoc:Module:topo[https://bjornharrtell.github.io/ * topolis/0.1.0/apidocs/module-topo.html]） */
} else {
node = topo.addIsoNode(coord); /** addIsoNode(topo, coordinate) * Adds an isolated node to a face in a topology and * returns the new node. If face is null, the node is * still created. * 分離されたノードをトポロジの面に追加し、新しいノードを返し * ます。 face が null の場合、ノードはまだ作成されています。 * （JDoc:Module:topo[https://bjornharrtell.github.io/ * topolis/0.1.0/apidocs/module-node.html]） */
} return node; }
function onDrawend(e) {
var edgeGeom = e.feature.getGeometry().getCoordinates(); /** 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） */
/** getCoordinates() * Return the coordinates of the linestring. * ラインストリングの座標を返します。（ol3 API） */
var startCoord = edgeGeom[0];
var endCoord = edgeGeom[edgeGeom.length - 1];
var start, end;
try {
start = topo.getNodeByPoint(startCoord); /** getNodeByPoint(topo, coordinate) * Find the node at a point location. * 点座標のノードを見つけます。 * （JDoc:Module:topo[https://bjornharrtell.github.io/ * topolis/0.1.0/apidocs/module-node.html]） */
end = topo.getNodeByPoint(endCoord); var edgesAtStart = topo.getEdgeByPoint(startCoord, 5); var edgesAtEnd = topo.getEdgeByPoint(endCoord, 5);
var crossing = topo.getEdgesByLine(edgeGeom); /** getEdgesByLine * （JDoc:Module:topo[https://bjornharrtell.github.io/ * topolis/0.1.0/apidocs/module-topo.html]） */
if (crossing.length === 1 && !start && !end && edgesAtStart.length === 0 && edgesAtEnd.length === 0) {
topo.remEdgeNewFace(crossing[0]);
/** remEdgeNewFace
* （JDoc:Module:topo[https://bjornharrtell.github.io/
* topolis/0.1.0/apidocs/module-topo.html]）
*/
start = crossing[0].start;
if (start.face) {
topo.removeIsoNode(start);
/** removeIsoNode
* （JDoc:Module:topo[https://bjornharrtell.github.io/
* topolis/0.1.0/apidocs/module-topo.html]）
*/
}
end = crossing[0].end;
if (end.face) {
topo.removeIsoNode(end);
}
return;
}
if (!start) {
start = createNode(topo, startCoord);
edgeGeom[0] = start.coordinate;
}
if (!end) {
end = createNode(topo, endCoord);
edgeGeom[edgeGeom.length - 1] = end.coordinate;
}
topo.addEdgeNewFaces(start, end, edgeGeom); /** addEdgeNewFaces(topo, start, end, coordinates) * Add a new edge and, if in doing so it splits a face, * delete the original face and replace it with two new * faces. * 新しいエッジを追加し、その際に面を分割する場合は元の面を削 * 除し、2つの新しい面に置き換えます。 * （JDoc:Module:topo[https://bjornharrtell.github.io/ * topolis/0.1.0/apidocs/module-edge.html#.addEdgeNewFaces]） */
} catch (e) {
toastr.warning(e.toString());
}
}
var draw = new ol.interaction.Draw({
/** ol.interaction.Draw
* Interaction that allows drawing geometries.
* ジオメトリの描画を認めるインターラクション。（ol3 API）
*/
type: 'LineString' });
draw.on('drawend', onDrawend);
/** on(type, listener, opt_this)
* Listen for a certain type of event.
* あるタイプのイベントをリッスンします。（ol3 API）
*/
map.addInteraction(draw); /** addInteraction(interaction) * Add the given interaction to the map. * マップへ指定されたインターラクションを追加します。 * （ol3 API） */
var snap = new ol.interaction.Snap({
/** ol.interaction.Snap
* Handles snapping of vector features while modifying
* or drawing them. The features can come from a
* ol.source.Vector or ol.Collection Any interaction
* object that allows the user to interact with the
* features using the mouse can benefit from the
* snapping, as long as it is added before.
* The snap interaction modifies map browser event
* coordinate and pixel properties to force the snap to
* occur to any interaction that them.
* 変更または描画の間、ベクタフィーチャのスナップを処理しま
* す。フィーチャは、ol.source.Vector または ol.Collection
* 由来です。ユーザーがマウスを使用してフィーチャをインタラ
* クションすることを可能にする任意のインタラクションオブジェ
* クトは、それが前に追加されるように、スナップの恩恵を得る
* ことができます。スナップインタラクションは、マップブラウ
* ザイベントコーディネートと画素特性をそれらの任意のインタ
* ラクションのために発生するスナップへ強制的に変更します。
* （ol3 API）
*/
source: edges }); map.addInteraction(snap);
map.addControl(new ol.control.MousePosition()); /** addControl(control) * Add the given control to the map. * 指定したコントロールをマップに追加します。 * （ol3 API） */
/** 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） */
