1 |
|
2 |
|
3 |
|
4 | goog.require('ol.Feature');
|
5 | goog.require('ol.Map');
|
6 | goog.require('ol.View');
|
7 | goog.require('ol.geom.Point');
|
8 | goog.require('ol.geom.LineString');
|
9 | goog.require('ol.geom.Polygon');
|
10 | goog.require('ol.interaction.Draw');
|
11 | goog.require('ol.interaction.Snap');
|
12 | goog.require('ol.layer.Tile');
|
13 | goog.require('ol.layer.Vector');
|
14 | goog.require('ol.source.OSM');
|
15 | goog.require('ol.source.Vector');
|
16 | goog.require('ol.style.Style');
|
17 | goog.require('ol.style.Stroke');
|
18 | goog.require('ol.style.Fill');
|
19 | goog.require('ol.style.Circle');
|
20 | goog.require('ol.style.Text');
|
21 | goog.require('ol.control.MousePosition');
|
22 |
|
23 | var raster = new ol.layer.Tile({
|
24 | source: new ol.source.OSM()
|
25 | });
|
26 |
|
27 | var nodes = new ol.source.Vector({wrapX: false});
|
28 | var nodesLayer = new ol.layer.Vector({
|
29 | source: nodes,
|
30 | style: function(f) {
|
31 | var style = new ol.style.Style({
|
32 | image: new ol.style.Circle({
|
33 | radius: 8,
|
34 | fill: new ol.style.Fill({color: 'rgba(255, 0, 0, 0.2)'}),
|
35 | stroke: new ol.style.Stroke({color: 'red', width: 1})
|
36 | }),
|
37 | text: new ol.style.Text({
|
38 | text: f.get('node').id.toString(),
|
39 | fill: new ol.style.Fill({color: 'red'}),
|
40 | stroke: new ol.style.Stroke({
|
41 | color: 'white',
|
42 | width: 3
|
43 | })
|
44 | })
|
45 | });
|
46 | return [style];
|
47 | }
|
48 | });
|
49 |
|
50 | var edges = new ol.source.Vector({wrapX: false});
|
51 | var edgesLayer = new ol.layer.Vector({
|
52 | source: edges,
|
53 | style: function(f) {
|
54 | var style = new ol.style.Style({
|
55 | stroke: new ol.style.Stroke({
|
56 | color: 'blue',
|
57 | width: 1
|
58 | }),
|
59 | text: new ol.style.Text({
|
60 | text: f.get('edge').id.toString(),
|
61 | fill: new ol.style.Fill({color: 'blue'}),
|
62 | stroke: new ol.style.Stroke({
|
63 | color: 'white',
|
64 | width: 2
|
65 | })
|
66 | })
|
67 | });
|
68 | return [style];
|
69 | }
|
70 | });
|
71 |
|
72 | var faces = new ol.source.Vector({wrapX: false});
|
73 | var facesLayer = new ol.layer.Vector({
|
74 | source: faces,
|
75 | style: function(f) {
|
76 | var style = new ol.style.Style({
|
77 | stroke: new ol.style.Stroke({
|
78 | color: 'black',
|
79 | width: 1
|
80 | }),
|
81 | fill: new ol.style.Fill({
|
82 | color: 'rgba(0, 255, 0, 0.2)'
|
83 | }),
|
84 | text: new ol.style.Text({
|
85 | font: 'bold 12px sans-serif',
|
86 | text: f.get('face').id.toString(),
|
87 | fill: new ol.style.Fill({color: 'green'}),
|
88 | stroke: new ol.style.Stroke({
|
89 | color: 'white',
|
90 | width: 2
|
91 | })
|
92 | })
|
93 | });
|
94 | return [style];
|
95 | }
|
96 | });
|
97 |
|
98 | var map = new ol.Map({
|
99 | layers: [raster, facesLayer, edgesLayer, nodesLayer],
|
100 | target: 'map',
|
101 | view: new ol.View({
|
102 | center: [-11000000, 4600000],
|
103 | zoom: 16
|
104 | })
|
105 | });
|
106 |
|
107 | var topo = topolis.createTopology();
|
108 |
|
109 | topo.on('addnode', nodeToFeature);
|
110 | topo.on('removenode', function(e) {
|
111 | removeElementFeature(nodes, e);
|
112 | });
|
113 | topo.on('addedge', edgeToFeature);
|
114 | topo.on('modedge', function(e) {
|
115 | var feature = edges.getFeatureById(e.id);
|
116 | feature.setGeometry(new ol.geom.LineString(e.coordinates));
|
117 | });
|
118 | topo.on('removeedge', function(e) {
|
119 | removeElementFeature(edges, e);
|
120 | });
|
121 | topo.on('addface', faceToFeature);
|
122 | topo.on('removeface', function(e) {
|
123 | removeElementFeature(faces, e);
|
124 | });
|
125 |
|
126 | function removeElementFeature(source, element) {
|
127 | var feature = source.getFeatureById(element.id);
|
128 | source.removeFeature(feature);
|
129 | }
|
130 |
|
131 | function nodeToFeature(node) {
|
132 | var feature = new ol.Feature({
|
133 | geometry: new ol.geom.Point(node.coordinate),
|
134 | node: node
|
135 | });
|
136 | feature.setId(node.id);
|
137 | nodes.addFeature(feature);
|
138 | }
|
139 |
|
140 | function edgeToFeature(edge) {
|
141 | var feature = new ol.Feature({
|
142 | geometry: new ol.geom.LineString(edge.coordinates),
|
143 | edge: edge
|
144 | });
|
145 | feature.setId(edge.id);
|
146 | edges.addFeature(feature);
|
147 | }
|
148 |
|
149 | function faceToFeature(face) {
|
150 | var coordinates = topo.getFaceGeometry(face);
|
151 | var feature = new ol.Feature({
|
152 | geometry: new ol.geom.Polygon(coordinates),
|
153 | face: face
|
154 | });
|
155 | feature.setId(face.id);
|
156 | faces.addFeature(feature);
|
157 | }
|
158 |
|
159 | function createNode(topo, coord) {
|
160 | var node;
|
161 | var existingEdge = topo.getEdgeByPoint(coord, 5)[0];
|
162 | if (existingEdge) {
|
163 | node = topo.modEdgeSplit(existingEdge, coord);
|
164 | } else {
|
165 | node = topo.addIsoNode(coord);
|
166 | }
|
167 | return node;
|
168 | }
|
169 |
|
170 | function onDrawend(e) {
|
171 | var edgeGeom = e.feature.getGeometry().getCoordinates();
|
172 | var startCoord = edgeGeom[0];
|
173 | var endCoord = edgeGeom[edgeGeom.length - 1];
|
174 | var start, end;
|
175 | try {
|
176 | start = topo.getNodeByPoint(startCoord);
|
177 | end = topo.getNodeByPoint(endCoord);
|
178 | var edgesAtStart = topo.getEdgeByPoint(startCoord, 5);
|
179 | var edgesAtEnd = topo.getEdgeByPoint(endCoord, 5);
|
180 | var crossing = topo.getEdgesByLine(edgeGeom);
|
181 | if (crossing.length === 1 && !start && !end && edgesAtStart.length === 0 && edgesAtEnd.length === 0) {
|
182 | topo.remEdgeNewFace(crossing[0]);
|
183 | start = crossing[0].start;
|
184 | if (start.face) {
|
185 | topo.removeIsoNode(start);
|
186 | }
|
187 | end = crossing[0].end;
|
188 | if (end.face) {
|
189 | topo.removeIsoNode(end);
|
190 | }
|
191 | return;
|
192 | }
|
193 | if (!start) {
|
194 | start = createNode(topo, startCoord);
|
195 | edgeGeom[0] = start.coordinate;
|
196 | }
|
197 | if (!end) {
|
198 | end = createNode(topo, endCoord);
|
199 | edgeGeom[edgeGeom.length - 1] = end.coordinate;
|
200 | }
|
201 | topo.addEdgeNewFaces(start, end, edgeGeom);
|
202 | } catch (e) {
|
203 | toastr.warning(e.toString());
|
204 | }
|
205 | }
|
206 |
|
207 | var draw = new ol.interaction.Draw({
|
208 | type: 'LineString'
|
209 | });
|
210 | draw.on('drawend', onDrawend);
|
211 | map.addInteraction(draw);
|
212 | var snap = new ol.interaction.Snap({
|
213 | source: edges
|
214 | });
|
215 | map.addInteraction(snap);
|
216 | map.addControl(new ol.control.MousePosition());
|