Skip to content

Commit 6b2aa16

Browse files
EmilZhouEmilZhou
committed
Remove debug info.
1 parent 8e6ba82 commit 6b2aa16

File tree

4 files changed

+313
-432
lines changed

4 files changed

+313
-432
lines changed

‎debug/index.js

+21-201
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,5 @@
11
var view = new ol.View({
2-
// center:[-8186799.75338646, 4952102.791557407],zoom:17,// NY road label reverse
3-
// center: [-10796026.396196617, 5003517.396574807],// country_name
4-
// center: [-10783010.162497278, 3862161.525031017],// road text 16
5-
// center :[-10782797.10767367, 3865969.721878732], // road name and one way icon
6-
// center:[-10787223.389888179, 3863490.4854171653], // road label 14
7-
// center: [-8051563.931156208, 6108477.916978194], // ol polygon 8
8-
// center:[-15008563.377850933, 4304933.433021126], // country polygon
9-
10-
// center:[-10781710.244788043, 3888472.76899487], zoom:17,// road clip issue zoom 17.
11-
// center:[-10774719.96412073, 3866961.8013970205],zoom:17 // footway line dash crash issue.
12-
// center: [-10782895.441743676, 3887414.379523998], zoom: 18,// U-turn
13-
14-
// center: [-22997335.8, -3253574.954307], zoom: 17,// drawing order of road
15-
// center:[-22997462.8, -3250401.7], zoom:19, // drawing order of road
16-
17-
// center: [-10775289.210973945, 3865761.202605083], zoom: 2, //// drawing order of road in Dallas
18-
// center: [-10781709.991733968, 3888501.660642869], zoom: 19, //// drawing order of road in Dallas
19-
// center: [-10775277.566270417, 3865890.936545674], zoom: 19,
20-
// center: [-10777048.158370923, 3867537.467766296], zoom: 19,
21-
// center:[-10777049.352699492, 3867713.631229918],zoom:16,
22-
23-
// center: [-10893951.564327799, 3897504.687934755],zoom:18,
24-
// center:[29293093.474837333, 3859961.6120968084],zoom:13,
25-
26-
// center: [11582333.09242295, 3580947.897975624], zoom: 15, // the road issue in China
27-
28-
29-
// center:[31836388.601296086, 4964536.01698872],zoom:12, // the road name issue.
30-
31-
// center: [-10777868.077121135, 3907991.491291499], zoom:15,
32-
center:[16137236.330388919, -4553038.742626694],zoom:17,
2+
center:[0,0],zoom:0,
333
maxZoom: 19,
344
maxResolution: 40075016.68557849 / 512,
355
progressiveZoom: true
@@ -50,179 +20,46 @@ var worldStreetsSource = new ol.thinkgeo.VectorTileSource({
5020

5121
var worldStreetsLayer = new ol.thinkgeo.VectorTileLayer("thinkgeo-world-streets-light-new.json", {
5222
mapLayerId: "worldstreets",
53-
minimalist: false,
5423
source: worldStreetsSource
5524
});
5625

57-
var vectorPolygons = new ol.layer.Vector({
58-
source: new ol.source.Vector({
59-
url: 'https://openlayers.org/en/v4.6.5/examples/data/geojson/polygon-samples.geojson',
60-
format: new ol.format.GeoJSON()
61-
}),
62-
});
63-
64-
var mapboxLayer = new ol.layer.VectorTile({
65-
declutter: true,
66-
source: new ol.source.VectorTile({
67-
format: new ol.format.MVT({
68-
featureClass: ol.Feature
69-
}),
70-
url: "https://c.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q"
71-
}),
72-
style: function (f, r) {
73-
if (f.getGeometry().getType() == 'Polygon') {
74-
return new ol.style.Style({
75-
stroke: new ol.style.Stroke({
76-
color: "red",
77-
width: 1
78-
})
79-
})
80-
}
81-
82-
}
83-
})
84-
85-
86-
var olWorldStreetMap = new ol.layer.VectorTile({
87-
declutter: true,
88-
source: new ol.source.VectorTile({
89-
format: new ol.format.MVT({
90-
featureClass: ol.Feature
91-
}),
92-
url: "https://c.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token=pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q"
93-
}),
94-
style: function (f, r) {
95-
if (f.getGeometry().getType() == 'Polygon') {
96-
return new ol.style.Style({
97-
stroke: new ol.style.Stroke({
98-
color: "red",
99-
width: 1
100-
})
101-
})
102-
}
103-
104-
}
105-
})
106-
10726
var layer = new ol.layer.Tile({
10827
source: new ol.source.OSM()
10928
});
11029

11130
var debugLayer = new ol.layer.Tile({
11231
source: new ol.source.TileDebug({
11332
projection: "EPSG:3857",
114-
tileGrid: mapboxLayer.getSource().getTileGrid()
33+
tileGrid: worldStreetsLayer.getSource().getTileGrid()
11534
})
11635
});
11736

118-
119-
var styleFunction = function (feature) {
120-
var geometry = feature.getGeometry();
121-
var styles = [
122-
new ol.style.Style({
37+
var vectorLayer = new ol.layer.Vector({
38+
source: new ol.source.Vector(),
39+
style: function (feature, resolution) {
40+
return new ol.style.Style({
41+
image: new ol.style.Circle({
42+
fill: new ol.style.Fill({
43+
color: "red"
44+
}),
45+
radius: 10
46+
}),
47+
text: new ol.style.Text({
48+
fill: new ol.style.Fill({
49+
color: "black"
50+
}),
51+
}),
12352
stroke: new ol.style.Stroke({
124-
color: '#ffcc33',
125-
width: 2
53+
color: "red",
54+
width: 1
12655
})
12756
})
128-
];
129-
130-
if (geometry.getType() === "LineString") {
131-
geometry.forEachSegment(function (start, end) {
132-
var dx = end[0] - start[0];
133-
var dy = end[1] - start[1];
134-
var rotation = Math.atan2(dy, dx);
135-
arrows
136-
styles.push(new ol.style.Style({
137-
geometry: new ol.geom.Point(end),
138-
image: new ol.style.Icon({
139-
src: 'arrow.png',
140-
anchor: [0.75, 0.5],
141-
rotateWithView: true,
142-
rotation: -rotation
143-
})
144-
}));
145-
});
146-
}
147-
else if (geometry.getType() === "MultiLineString") {
148-
var lines = geometry.getLineStrings();
149-
150-
for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
151-
const line = lines[lineIndex];
152-
line.forEachSegment(function (start, end) {
153-
var dx = end[0] - start[0];
154-
var dy = end[1] - start[1];
155-
var rotation = Math.atan2(dy, dx);
156-
arrows
157-
styles.push(new ol.style.Style({
158-
geometry: new ol.geom.Point(end),
159-
image: new ol.style.Icon({
160-
src: 'arrow.png',
161-
anchor: [0.75, 0.5],
162-
rotateWithView: true,
163-
rotation: -rotation
164-
})
165-
}));
166-
});
167-
168-
}
16957
}
170-
171-
172-
return styles;
173-
};
174-
175-
var vectorLayer = new ol.layer.Vector({
176-
source: new ol.source.Vector(),
177-
// style: function (feature, resolution) {
178-
// return new ol.style.Style({
179-
// image: new ol.style.Circle({
180-
// fill: new ol.style.Fill({
181-
// color: "red"
182-
// }),
183-
// radius: 10
184-
// }),
185-
// text: new ol.style.Text({
186-
// fill: new ol.style.Fill({
187-
// color: "black"
188-
// }),
189-
// }),
190-
// stroke: new ol.style.Stroke({
191-
// color: "red",
192-
// width: 1
193-
// })
194-
// })
195-
// }
196-
style: styleFunction
19758
})
198-
vectorLayer.getSource().addFeature(new ol.Feature(new ol.geom.Point([-10783941.374986181, 4990142.424126486])))
199-
200-
var lineStyle = new ol.style.Style({
201-
stroke: new ol.style.Stroke({
202-
color: "#0000ff55",
203-
width: 10
204-
})
205-
});
206-
207-
var layer = new ol.layer.VectorTile({
208-
source: new ol.source.VectorTile({
209-
format: new ol.format.MVT({
210-
featureClass: ol.Feature
211-
}),
212-
url: 'http://localhost:1314/tile/{z}/{x}/{y}'
213-
}),
214-
renderMode: "vector",
215-
style: function (f, r) {
216-
if (f.get('layer') === 'road') {
217-
return lineStyle
218-
}
219-
}
220-
});
22159

22260
var map = new ol.Map({
22361
layers: [worldStreetsLayer, vectorLayer, debugLayer],
22462
renderer:['webgl'],
225-
22663
target: 'map',
22764
view: view,
22865
loadTilesWhileInteracting: true
@@ -232,13 +69,6 @@ map.on("click", function showInfo(event) {
23269

23370
var features = map.getFeaturesAtPixel(event.pixel);
23471

235-
// if (features && features.length > 0) {
236-
// vectorLayer.getSource().addFeatures(features);
237-
// }
238-
// else {
239-
// vectorLayer.getSource().clear();
240-
// }
241-
24272
if (!features) {
24373
info.innerText = '';
24474
info.style.opacity = 0;
@@ -250,11 +80,9 @@ map.on("click", function showInfo(event) {
25080
info.style.opacity = 1;
25181
}
25282

253-
25483
if (features) {
25584
for (let index = 0; index < features.length; index++) {
25685
const element = features[index];
257-
console.log(element["styleId"]);
25886
}
25987
vectorLayer.getSource().clear();
26088
let olFeature = new ol.Feature({
@@ -283,16 +111,8 @@ let getGeometryByType = (type, flatCoordinates, layout) => {
283111
case 'Polygon': geometry = new ol.geom.Polygon([transformedCoordinates], layout); break;
284112
case 'LineString': geometry = new ol.geom.LineString(transformedCoordinates, layout); break;
285113
case 'MultiLineString': geometry = new ol.geom.MultiLineString([transformedCoordinates], layout); break;
286-
default: console.log(type);
114+
default: ;
287115
}
288116

289117
return geometry;
290-
};
291-
292-
293-
function update()
294-
{
295-
map.render();
296-
requestAnimationFrame(update);
297-
}
298-
requestAnimationFrame(update);
118+
};

0 commit comments

Comments
 (0)