Skip to content

Commit 2e58200

Browse files
ftoromanoffftoromanoff
committed
refactor(example): add example TMS on PlanarView
1 parent c638d11 commit 2e58200

File tree

1 file changed

+290
-0
lines changed

1 file changed

+290
-0
lines changed

‎examples/view_25d_map3857.html

+290
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,290 @@
1+
<html>
2+
<head>
3+
<title>Itowns - Planar example</title>
4+
5+
<meta charset="UTF-8">
6+
<link rel="stylesheet" type="text/css" href="css/example.css">
7+
<link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
8+
<link rel="stylesheet" type="text/css" href="css/widgets.css">
9+
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
12+
</head>
13+
<body>
14+
<div id="description">
15+
Key bindings
16+
<ul>
17+
<li>Left-Click: camera translation (drag)</li>
18+
<li>Right-Click: camera translation (pan)</li>
19+
<li>Ctrl + Left-Click: camera rotation (orbit)</li>
20+
<li>Spacebar / Wheel-Click: smart travel</li>
21+
<li>Mouse Wheel: zoom in/out</li>
22+
<li>T: orient camera to a top view</li>
23+
<li>Y: move camera to start position</li>
24+
</ul>
25+
</div>
26+
<div id="viewerDiv" class="viewer"></div>
27+
28+
<script src="../dist/itowns.js"></script>
29+
<script src="js/GUI/LoadingScreen.js"></script>
30+
<script src="../dist/debug.js"></script>
31+
<script src="../dist/itowns_widgets.js"></script>
32+
<script src="js/GUI/GuiTools.js"></script>
33+
<script type="text/javascript">
34+
35+
function xml2json(xml) {
36+
try {
37+
var obj = {};
38+
if (xml.children.length > 0) {
39+
for (var i = 0; i < xml.children.length; i++) {
40+
var item = xml.children.item(i);
41+
var nodeName = item.nodeName;
42+
if (item.attributes.length > 1) {
43+
for (var j = 0; j < item.attributes.length; j++) {
44+
const attribute = item.attributes.item(j);
45+
const newEl = document.createElement(attribute.name);
46+
const newText = document.createTextNode(attribute.value);
47+
newEl.appendChild(newText);
48+
item.appendChild(newEl)
49+
}
50+
}
51+
52+
if (typeof (obj[nodeName]) == "undefined") {
53+
obj[nodeName] = xml2json(item);
54+
} else {
55+
if (typeof (obj[nodeName].push) == "undefined") {
56+
var old = obj[nodeName];
57+
58+
obj[nodeName] = [];
59+
obj[nodeName].push(old);
60+
}
61+
obj[nodeName].push(xml2json(item));
62+
}
63+
}
64+
} else {
65+
obj = xml.textContent;
66+
}
67+
return obj;
68+
} catch (e) {
69+
console.log(e.message);
70+
}
71+
}
72+
73+
// const urlTMS = 'https://www.opengis.net/def/crs/EPSG/0/3857';
74+
// const getTMS = itowns.Fetcher.xml('./layers/TMS_EPSG-3857.xml')
75+
// .then(xml => {
76+
// return xml2json(xml);
77+
// });
78+
79+
// // Define crs projection that we will use (taken from https://epsg.io/3946, Proj4js section)
80+
itowns.proj4.defs('EPSG:3946', '+proj=lcc +lat_1=45.25 +lat_2=46.75 +lat_0=46 +lon_0=3 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
81+
/* global itowns, setupLoadingScreen, GuiTools, debug */
82+
83+
// const urlWMS = 'https://imagerie.data.grandlyon.com/wms/grandlyon?';
84+
// const getCapabilities = itowns.Fetcher.xml(`${urlWMS}SERVICE=WMS&REQUEST=GetCapabilities`)
85+
// .then(xml => {
86+
// return xml2json(xml);
87+
// });
88+
89+
90+
async function main() {
91+
92+
let viewCRS;
93+
viewCRS = 'EPSG:3857';
94+
95+
// const TMS = await getTMS;
96+
// console.log(TMS);
97+
// console.log(capabilities.WMS_Capabilities.Capability.Layer);
98+
99+
// const capabilities = await getCapabilities;
100+
// console.log(capabilities);
101+
// console.log(capabilities.WMS_Capabilities.Capability.Layer);
102+
103+
// const ortho_latest_Capa = capabilities.WMS_Capabilities.Capability.Layer.Layer.filter(l => l.Name === 'ortho_latest')[0];
104+
// console.log('Ortho_latest crs', ortho_latest_Capa.CRS);
105+
// const boundingBox = ortho_latest_Capa.BoundingBox.filter(bb => bb.crs === viewCRS)[0];
106+
// const extentOrthoLatest = new itowns.Extent(
107+
// viewCRS,
108+
// +boundingBox.minx, +boundingBox.maxx,
109+
// +boundingBox.miny, +boundingBox.maxy,
110+
// );
111+
112+
var extent0;
113+
var viewerDiv;
114+
var view;
115+
var p;
116+
var menuGlobe;
117+
var d;
118+
119+
// origin extent (the data to display)
120+
extent0 = new itowns.Extent(
121+
'EPSG:3946',
122+
1837816.94334, 1847692.32501,
123+
5170036.4587, 5178412.82698);
124+
125+
// EPSG:3946 global extent
126+
extent = new itowns.Extent(
127+
'EPSG:3946',
128+
621509.63, 4660562.44,
129+
2320724.18, 5891430.09,
130+
);
131+
132+
extent3857 = new itowns.Extent('EPSG:3857', -20037508.3427892, 20037508.3427892, -20037508.3427892, 20037508.3427892)
133+
// var extent3857 = new itowns.Extent(
134+
// 'EPSG:3857',
135+
// -20026376.39, 20026376.39,
136+
// -20048966.10, 20048966.10);
137+
138+
// console.log(extent, extent0, extentOrthoLatest);
139+
140+
141+
// `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
142+
viewerDiv = document.getElementById('viewerDiv');
143+
// console.log(extent0.center(), extent0.center().as(viewCRS), extent0.as(viewCRS))
144+
145+
const placement = { coord: extent0.center().as(viewCRS), heading: 49.6, range: 6200, tilt: 17 };
146+
// Instanciate PlanarView*
147+
view = new itowns.PlanarView(viewerDiv, extent0.as(viewCRS), { placement });
148+
// view = new itowns.PlanarView(viewerDiv, extent3857, { placement });
149+
setupLoadingScreen(viewerDiv, view);
150+
151+
152+
// -> WMTS Layer
153+
itowns.Fetcher.json("./layers/JSONLayers/Ortho.json").then(
154+
function _(config) {
155+
config.source = new itowns.WMTSSource(config.source);// crs: 'EPSG:3857',
156+
var layer = new itowns.ColorLayer("Ortho", config);
157+
view.addLayer(layer);
158+
}
159+
);
160+
161+
162+
// -> TMS imagery source and layer
163+
var opensmSource = new itowns.TMSSource({
164+
isInverted: true,
165+
url: 'https://tile.openstreetmap.org/${z}/${x}/${y}.png',
166+
networkOptions: { crossOrigin: 'anonymous' },
167+
extent: extent3857,
168+
crs: 'EPSG:3857',
169+
attribution: {
170+
name: 'OpenStreetMap',
171+
url: 'http://www.openstreetmap.org/',
172+
},
173+
});
174+
var opensmLayer = new itowns.ColorLayer('OPENSM', {
175+
updateStrategy: {
176+
type: itowns.STRATEGY_DICHOTOMY,
177+
},
178+
source: opensmSource,
179+
});
180+
view.addLayer(opensmLayer);
181+
182+
183+
// -> WMS imagery layer
184+
var wmsImagerySource = new itowns.WMSSource({
185+
extent: extent3857,
186+
name: 'ortho_latest',
187+
url: 'https://imagerie.data.grandlyon.com/wms/grandlyon',
188+
version: '1.3.0',
189+
crs: viewCRS,
190+
format: 'image/jpeg',
191+
});
192+
193+
var wmsImageryLayer = new itowns.ColorLayer('wms_imagery', {
194+
updateStrategy: {
195+
type: itowns.STRATEGY_DICHOTOMY,
196+
options: {},
197+
},
198+
source: wmsImagerySource,
199+
});
200+
201+
view.addLayer(wmsImageryLayer);
202+
203+
// -> WMS elevation layer
204+
var wmsElevationSource = new itowns.WMSSource({
205+
extent: extent3857,
206+
url: 'https://imagerie.data.grandlyon.com/wms/grandlyon',
207+
name: 'MNT2018_Altitude_2m',
208+
crs: viewCRS,
209+
width: 256,
210+
format: 'image/jpeg',
211+
});
212+
213+
var wmsElevationLayer = new itowns.ElevationLayer('wms_elevation', {
214+
useColorTextureElevation: true,
215+
colorTextureElevationMinZ: 144,
216+
colorTextureElevationMaxZ: 622,
217+
source: wmsElevationSource,
218+
});
219+
220+
view.addLayer(wmsElevationLayer);
221+
222+
// -> WFS layer for label (Not working)
223+
var wfsCartoSource = new itowns.WFSSource({
224+
url: 'https://data.geopf.fr/wfs/ows?',
225+
version: '2.0.0',
226+
typeName: 'BDCARTO_V5:zone_d_habitation',
227+
crs: viewCRS,
228+
ipr: 'IGN',
229+
format: 'application/json',
230+
});
231+
232+
var wfsCartoStyle = {
233+
zoom: { min: 0, max: 20 },
234+
text: {
235+
field: '{toponyme}',
236+
color: 'white',
237+
transform: 'uppercase',
238+
size: 15,
239+
haloColor: 'rgba(20,20,20, 0.8)',
240+
haloWidth: 3,
241+
},
242+
};
243+
244+
var wfsCartoLayer = new itowns.LabelLayer('wfsCarto', {
245+
source: wfsCartoSource,
246+
style: wfsCartoStyle,
247+
});
248+
249+
// view.addLayer(wfsCartoLayer);
250+
251+
// Add a scale :
252+
const scale = new itowns_widgets.Scale(view, {
253+
position: 'bottom-right',
254+
translate: { x: -70 },
255+
});
256+
257+
// Request redraw
258+
view.notifyChange();
259+
260+
view.addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED, function () {
261+
if (view.isDebugMode) {
262+
menuGlobe = new GuiTools('menuDiv', view);
263+
menuGlobe.addImageryLayersGUI(view.getLayers(function gui(l) { return l.isColorLayer; }));
264+
menuGlobe.addElevationLayerGUI(wmsElevationLayer);
265+
debug.createTileDebugUI(menuGlobe.gui, view);
266+
}
267+
268+
const extent3 = extent0.as(viewCRS)
269+
270+
clipPlanes = [
271+
new itowns.THREE.Plane(new itowns.THREE.Vector3(1, 0, 0), -extent3.west),
272+
new itowns.THREE.Plane(new itowns.THREE.Vector3(-1, 0, 0), extent3.east),
273+
new itowns.THREE.Plane(new itowns.THREE.Vector3(0, -1, 0), extent3.north),
274+
new itowns.THREE.Plane(new itowns.THREE.Vector3(0, 1, 0), -extent3.south),
275+
];
276+
const helpers = new itowns.THREE.Group();
277+
helpers.add( new itowns.THREE.PlaneHelper( clipPlanes[0], 2000000, 0xff0000 ) );
278+
helpers.add( new itowns.THREE.PlaneHelper( clipPlanes[1], 2000000, 0xff0000 ) );
279+
helpers.add( new itowns.THREE.PlaneHelper( clipPlanes[ 2 ], 2000000, 0x0000ff ) );
280+
helpers.add( new itowns.THREE.PlaneHelper( clipPlanes[ 3 ], 2000000, 0xff00ff ) );
281+
helpers.visible = true;
282+
view.tileLayer.object3d.add( helpers );
283+
284+
});
285+
};
286+
287+
main();
288+
</script>
289+
</body>
290+
</html>

0 commit comments

Comments
 (0)