$(function () { Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ODI4ZTYyZS1mMTg2LTQ5NGEtYjdiOS02ODg2NzVhNjc0MTAiLCJpZCI6MjkwNCwiaWF0IjoxNTM1MTA5OTAzfQ.kyDX_0ScvJBkYnvXI0DW5NfZbiaRL5ezwtAUhxYnk1Y'; var imageryViewModels = []; imageryViewModels.push(new Cesium.ProviderViewModel({ name: 'Sentinel-2', iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/sentinel-2.png'), tooltip: 'Sentinel-2 cloudless.', creationFunction: function () { return new Cesium.IonImageryProvider({ assetId: 3954 }); } })); imageryViewModels.push(new Cesium.ProviderViewModel({ name: 'Blue Marble', iconUrl: Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/blueMarble.png'), tooltip: 'Blue Marble Next Generation July, 2004 imagery from NASA.', creationFunction: function () { return new Cesium.IonImageryProvider({ assetId: 3845 }); } })); var viewer = new Cesium.Viewer('cesiumContainer', { imageryProvider: new Cesium.IonImageryProvider({ assetId: 3954 }), terrainProvider : new Cesium.CesiumTerrainProvider({ url: Cesium.IonResource.fromAssetId(1) }), scene3DOnly: false, shouldAnimate: true, animation: true, infoBox: true, baseLayerPicker: true, fullscreenButton: false, timeline: false, navigationHelpButton: true, navigationInstructionsInitiallyVisible: false, homeButton: false, selectionIndicator: true, geocoder: true, // imageryProviderViewModels: imageryViewModels }); // var layer = viewer.imageryLayers.addImageryProvider( // new Cesium.IonImageryProvider({ assetId: 3 }) // ); var imageryLayer = viewer.imageryLayers.addImageryProvider( new Cesium.IonImageryProvider({ assetId: 3954 }) ); var canvas = viewer.canvas; canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas canvas.addEventListener('click', function() { canvas.focus(); }); canvas.focus(); var scene = viewer.scene; var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: 'buildingTiles/StoeckachLOD1/tileset.json', show: true })); tileset.readyPromise.then(function (tileset) { return zoomAll(tileset); }); tileset.readyPromise.then(function (tileset) { var R = 0; // roll var P = 0; // pitch var Yaw = 0; // yaw var height =53; var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center); var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0); var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height); var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3()); //var rotMat = new Cesium.Matrix3(); var rotation = new Cesium.Matrix3.fromHeadingPitchRoll(new Cesium.HeadingPitchRoll(Yaw, P, R)); tileset.modelMatrix = Cesium.Matrix4.fromRotationTranslation(rotation,translation); return zoomAll(tileset); }); viewer.scene.globe.enableLighting = true; // set lighting to true var zoomAll = function (tileset) { return new Promise(function (resolve, reject) { if (!tileset) { reject("Tileset is undifined"); } viewer.camera.viewBoundingSphere(tileset.boundingSphere, new Cesium.HeadingPitchRange(0, -0.5, 1500)); viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY); resolve(); }); } ////////////////////////////////////////// // load streamline data from text file and parse it to polyline with multiple colors. var pos=[]; var cols = []; var streamID = []; d3.dsv(",", "results/polylines.csv").then(function(text) { // console.log(text); // Hello, world! // var temp = text.split(','); var temp = text; for(var i = 0; i < temp.length; i++) { // use i+=7 when parsed as d3.text(...) pos.push([parseFloat(text[i].x), parseFloat(text[i].y), parseFloat(text[i].z)]); cols.push([parseInt(text[i].R), parseInt(text[i].G), parseInt(text[i].B)]); streamID.push(parseInt(text[i].ID)); // use these lines if parsed as text. i.e. using d3.text(...) //pos.push([parseFloat(temp[i+0]), parseFloat(temp[i+1]), parseFloat(temp[i+2])]); //colors.push([parseFloat(temp[i+3]),parseFloat(temp[i+4]),parseFloat(temp[i+5])]) //streamID.push([parseFloat(temp[i+6])]); } const maxID = streamID.reduce(function(a, b) { return Math.max(a, b); }); //find out the unique ids within the streamID array const uniqueStreamID = [...new Set(streamID)]; //get index of each unique id, first element of those let sIDidx = []; for (var i =0; i<=maxID; i++){ var tmpIdx = streamID.indexOf(i); if (tmpIdx !== -1) sIDidx.push(tmpIdx); } for (var line=1; line < uniqueStreamID.length; line++){ // Create and draw a polyline with per vertex colors positions = []; colors = []; for (i = sIDidx[line-1]; i < sIDidx[line]-1; ++i) { positions.push(Cesium.Cartesian3.fromDegrees(pos[i][0],pos[i][1],pos[i][2]+120)); colors.push(Cesium.Color.fromBytes(cols[i][0], cols[i][1], cols[i][2], 180)); } // For per segment coloring, supply the colors option with // an array of colors for each vertex. Also set the // colorsPerVertex option to true. viewer.scene.primitives.add( new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: new Cesium.PolylineGeometry({ positions: positions, width: 5.0, vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT, colors: colors, colorsPerVertex: true, }), }), appearance: new Cesium.PolylineColorAppearance(), }) ); } }) // var f = new File([""], "results/singlePolyline.csv", {type: "text/plain", lastModified: Date()}) // var temp = text.split(','); // for(var i = 0; i < temp.length; i+=6) { // pos.push([parseFloat(temp[i+1]), parseFloat(temp[i+2]), parseFloat(temp[i+3])]); // colors.push([parseInt(temp[i+4]),parseInt(temp[i+5]),parseInt(temp[i+6])]) // } console.log('Position data imported.'); //// the following codes will actually generate multicolor polylines /// just need a away to get the actual data into there... /// /// // for (var line=0; line < 10; line++){ // // Example 2: Draw a polyline with per vertex colors // positions = []; // colors = []; // for (i = 0; i < 12; ++i) { // positions.push(Cesium.Cartesian3.fromDegrees(-124.0 + line*5 + 5 * i, 35.0+line)); // colors.push(Cesium.Color.fromRandom({ alpha: 1.0 })); // } // // For per segment coloring, supply the colors option with // // an array of colors for each vertex. Also set the // // colorsPerVertex option to true. // scene.primitives.add( // new Cesium.Primitive({ // geometryInstances: new Cesium.GeometryInstance({ // geometry: new Cesium.PolylineGeometry({ // positions: positions, // width: 5.0, // vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT, // colors: colors, // colorsPerVertex: true, // }), // }), // appearance: new Cesium.PolylineColorAppearance(), // }) // ); // } // HTML overlay for showing feature name on mouseover var nameOverlay = document.createElement('div'); viewer.container.appendChild(nameOverlay); nameOverlay.className = 'backdrop'; nameOverlay.style.display = 'none'; nameOverlay.style.position = 'absolute'; nameOverlay.style.bottom = '0'; nameOverlay.style.left = '0'; nameOverlay.style['pointer-events'] = 'none'; nameOverlay.style.padding = '4px'; nameOverlay.style.backgroundColor = 'green'; var scene = viewer.scene; var longitude; var latitude; var fid; var featuretype; var gmlid; var selID = new Array(); var cnt = 0; var lastPickedObject; var viewModel = { rightClickAction: 'properties', middleClickAction: 'hide' }; Cesium.knockout.track(viewModel); var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); handler.setInputAction(function (movement) { // makes camera go to a certain position given by the coordinates below var feature = viewer.scene.pick(movement.position); if (!Cesium.defined(feature)) { console.log("no feature defined") return; } var propertyNames = feature.getPropertyNames(); var lat = feature.getProperty("Latitude"); var lon = feature.getProperty("Longitude"); var tmp = feature.getProperty("YearOfConstruction"); viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(lon, lat, 900), maximumHeight: 1500.0, orientation: { heading: Cesium.Math.toRadians(0.0), pitch: Cesium.Math.toRadians(-90.0), roll: Cesium.Math.toRadians(45.0) }, duration: 2 }); }, Cesium.ScreenSpaceEventType.LEFT_CLICK); handler.setInputAction(function (movement) { var feature = viewer.scene.pick(movement.position); if (!Cesium.defined(feature)) { return; } var action = viewModel.rightClickAction; action === 'properties' printProperties(movement, feature) }, Cesium.ScreenSpaceEventType.RIGHT_CLICK); function printProperties(movement, feature) { console.log('Properties:'); var propertyNames = feature.getPropertyNames(); var length = propertyNames.length; for (var i = 0; i < length; ++i) { var propertyName = propertyNames[i]; if (propertyName == 'gmlIdALKISLageBezeichnung_1' || propertyName == 'gmlIdALKISLageBezeichnung_2' || propertyName == 'gmlIdALKISLageBezeichnung_3' || propertyName == 'gmlIdALKISLageBezeichnung_4' || propertyName == 'gmlIdALKISLageBezeichnung_5' || propertyName == 'gmlIdALKISLageBezeichnung_6') console.log(' ' + propertyName + ': ' + 'zensiert'); else console.log(' ' + propertyName + ': ' + feature.getProperty(propertyName)); } // Evaluate feature description //console.log('Description : ' + tileset.style.meta.description.evaluate(scene.frameState, feature)); } handler.setInputAction(function (movement) { var feature = viewer.scene.pick(movement.position); if (!Cesium.defined(feature)) { return; } var action = viewModel.middleClickAction; if (action === 'hide') { feature.show = false; } else{ feature.show = true; } }, Cesium.ScreenSpaceEventType.MIDDLE_CLICK); function showLegend() { $("#legend").css("display", "block"); } function hideLegend() { $("#legend").css("display", "none"); } // Legend - Colour Table function emptyColourTable() { $(".inner").empty(); } function setHeightTable() { $(".inner").append( "" + "" + "" + "" + "" + "" + "" + "" + "
     > 3.5
3
2.5
2
1.5
1
0.5
" ); } return Cesium.when(tileset.readyPromise).then(function (tileset) { tileset.style = new Cesium.Cesium3DTileStyle({ color: "color('white',1)", }); showLegend(); setHeightTable(); }); });