geolba/GeotiefExplore
2
1
Fork 0
Code Issues 7 Pull Requests Projects 1 Releases Wiki Activity

- npm updates (e.g. webpack 5.4.0)

Browse Source 
- read layer from rest api
This commit is contained in:
Arno Kaimbacher 2020-11-17 12:52:09 +01:00
parent a8f58d0860
commit b65fae11d3
9 changed files with 9143 additions and 6040 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.babelrc
View File

@ -1,5 +1,6 @@
{
"plugins": [
["@babel/plugin-proposal-class-properties", { "loose": true }]
["@babel/plugin-proposal-class-properties", { "loose": true }],
["@babel/plugin-transform-runtime", { "regenerator": true }]
]
}

14742
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

24
package.json
View File

@ -1,30 +1,32 @@
{
"dependencies": {
"three": "^0.119.1"
"axios": "^0.21.0",
"three": "^0.122.0"
},
"devDependencies": {
"@babel/core": "^7.11.1",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/preset-env": "^7.11.0",
"babel-loader": "^8.1.0",
"concurrently": "^5.2.0",
"css-loader": "^4.2.0",
"css-loader": "^5.0.1",
"dotenv": "^8.2.0",
"file-loader": "^6.0.0",
"img-loader": "^3.0.1",
"less-loader": "^6.2.0",
"mini-css-extract-plugin": "^0.9.0",
"style-loader": "^1.2.1",
"terser-webpack-plugin": "^4.0.0",
"less-loader": "^7.1.0",
"mini-css-extract-plugin": "^1.3.1",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.0.3",
"url-loader": "^4.1.0",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-merge": "^4.2.2"
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0",
"webpack-merge": "^5.4.0"
},
"scripts": {
"babel": "babel --presets es2015 js/main.js -o build/main.bundle.js",
"serve": "http-server",
"prod": "rm -rf dist && webpack",
"watch": "concurrently \"npm run serve\" \"npx webpack --source-maps --watch\" "
"prod": "rm -rf dist && webpack --progress --mode=production",
"watch": "concurrently \"npm run serve\" \"npx webpack --progress --mode=development --watch\" "
}
}

4
src/js/core/Map.js
View File

@ -11,9 +11,9 @@ class Map extends OrbitControls {
_controlContainer;
_controls;
constructor(camera, scene, domElement, container) {
constructor(size, center, camera, scene, domElement, container) {
// call parent constructor of OrbitControls
super(camera, scene, domElement);
super(size, center, camera, scene, domElement);
this.container = container;

162
src/js/layer/DxfLayer.js
View File

@ -1,15 +1,169 @@
import { Group } from 'three/src/objects/Group';
// import { Group } from 'three/src/objects/Group';
import { BufferGeometry } from 'three/src/core/BufferGeometry';
import { Float32BufferAttribute, Uint16BufferAttribute } from 'three/src/core/BufferAttribute';
import { MeshBasicMaterial } from 'three/src/materials/MeshBasicMaterial.js';
import { Mesh } from 'three/src/objects/Mesh';
import { Layer } from './Layer';
import { BitStream } from '../lib/bitstream';
const POINTURL = 'https://geusegdi01.geus.dk/geom3d/data/nodes/';
const EDGEURL = 'https://geusegdi01.geus.dk/geom3d/data/triangles/';
class DxfLayer extends Layer {
constructor() {
constructor(params) {
super();
this.objectGroup = new Group();
//this.features = [];
this.visible = true;
this.opacity = 1;
this.materialParameter = [];
for (var k in params) {
this[k] = params[k];
}
// this.objectGroup = new Group();
this.queryableObjects = [];
this.borderVisible = false;
this.declaredClass = "DxfLayer";
}
setVisible(visible) {
this.visible = visible;
// this.objectGroup.visible = visible;
//Q3D.application.queryObjNeedsUpdate = true;
}
async onAdd(map) {
await this.build(this.getScene());
//this.update();
map.update();
}
//build BufferGeometry with Index
async build(app_scene) {
let geometry = new BufferGeometry();
// let positions = new Float32BufferAttribute(this.vertices, 3);
let posArray = await (this.points(134));
console.log(posArray);
let positions = new Float32BufferAttribute(posArray, 3);
geometry.setAttribute('position', positions);
//var TypeArray = this.idx.length > 65535 ? Uint32Array : Uint16Array;
//var indices = this.indices = new TypeArray(this.idx);
// let indexArray = this.indices = new Uint16Array(this.idx);
let indexArray = await (this.edges(134));
let indices = new Uint16BufferAttribute(indexArray, 1);//.setDynamic(true);
geometry.setIndex(indices);
geometry.scale(1, 1, 1);
geometry.computeBoundingSphere();
geometry.computeVertexNormals();// computed vertex normals are orthogonal to the face f
geometry.computeBoundingBox();
let color = parseInt("907A5C", 16);
this.material = new MeshBasicMaterial({
color: color
});
let mesh = this.mainMesh = new Mesh(geometry, this.material);
// mesh.userData.layerId = this.index;
// this.addObject(mesh, true);
//this.mainMesh = mesh;
if (app_scene) {
app_scene.add(mesh);
}
// this.emit('add');
}
async points(geomId) {
const url = POINTURL + geomId;
const buffer = await this.request(url);
return this.unpackVertices(buffer);
}
async edges(geomId) {
const url = EDGEURL + geomId;
const buffer = await this.request(url);
return this.unpackEdges(buffer);
}
async request(url) {
const response = await fetch(url);
if (response.ok) {
return response.arrayBuffer();
}
else {
console.log('could not fetch geometry data');
}
}
unpackEdges(arrayBuffer) {
const METABYTES = 13;
var dv = new DataView(arrayBuffer, METABYTES);
var indices = new Uint32Array((arrayBuffer.byteLength - METABYTES) / 4);
for (var i = 0; i < indices.length; i++) {
indices[i] = dv.getUint32(i * 4, true);
}
return indices;
}
unpackVertices(arrayBuffer) {
const DIMENSIONS = 3;
const ONEBYTE = 1, FOURBYTE = 4; // bytes count for metadata in PG_pointcloud (significant bits compression)
const dataView = new DataView(arrayBuffer);
let ptr = ONEBYTE + 2 * FOURBYTE;
const pointsCount = dataView.getUint32(ptr, true); // 1 + 4 + 4 = 9 bytes offset
const posArray = new Float32Array(pointsCount * DIMENSIONS);
ptr += FOURBYTE; //
var bytesCount = 0, significantBitsCount = 0, commonBits, significantBits;
var dim = 0;
while (dim < 3) {
ptr += ONEBYTE;
bytesCount = dataView.getInt32(ptr, true) - 8;
ptr += FOURBYTE;
significantBitsCount = dataView.getUint32(ptr, true);
ptr += FOURBYTE;
commonBits = this.readCommonBits(dataView, ptr);
ptr += FOURBYTE;
significantBits = this.readSignificantBits(dataView, ptr, bytesCount);
let value = 0.0;
for (var j = dim, i = 0; i < pointsCount; j += DIMENSIONS, i++) {
value = significantBits.readBits(significantBitsCount) | commonBits;
if (dim === 2) {
value = value / 100; // z values in pc_patch from DB are multiplied by 100
}
posArray[j] = value;
}
ptr += bytesCount;
dim += 1;
}
return posArray;
}
readCommonBits(dataView, ptr) {
var temp = new Int32Array(1);
temp[0] = dataView.getInt32(ptr, false); // why false ??
var combits = new BitStream(new Uint8Array(temp.buffer));
return combits.readBits(32);
}
readSignificantBits(dataView, ptr, bytesCount) {
var temp = new Int32Array(bytesCount / 4);
for (var i = ptr, j = 0; i < ptr + bytesCount; i += 4, j++) {
temp[j] = dataView.getInt32(i);
}
var sigbits = new BitStream(new Uint8Array(temp.buffer));
return sigbits;
}
}

10
src/js/lib/OrbitControls.js
View File

@ -72,7 +72,7 @@ class OrbitControls extends EventEmitter {
rotateDifference;
constructor(camera, scene, domElement) {
constructor(size, center, camera, scene, domElement) {
super();
this.object = camera;
@ -84,7 +84,7 @@ class OrbitControls extends EventEmitter {
// "target" sets the location of focus, where the control orbits around
// and where it pans with respect to.
this.target = new Vector3();
this.target = center; //new Vector3();
// center is old, deprecated; use "target" instead
this.center = this.target;
@ -94,8 +94,10 @@ class OrbitControls extends EventEmitter {
this.zoomSpeed = 1.0;
// Limits to how far you can dolly in and out
this.minDistance = 0;
this.maxDistance = Infinity;
// this.minDistance = 0;
// this.maxDistance = Infinity;
this.minDistance = size*0.75;
this.maxDistance = size*15;
// Set to true for upside down
this.upsideDown = false;

78
src/js/lib/bitstream.js Normal file
View File

@ -0,0 +1,78 @@
// From: https://gist.github.com/claus/2829664 */
// Usage:
// var buf = new Uint8Array(128);
// var bitstream = new BitStream(buf);
// bitstream.writeBits(12, 0xffff);
// bitstream.seekTo(0);
// bitstream.readBits(6); // 111111 (63)
// bitstream.readBits(10); // 1111110000 (1008)
// ES6'ified by mbw@geus.dk 20190605
export class BitStream {
constructor(uint8Array) {
this.a = uint8Array;
this.position = 0;
this.bitsPending = 0;
}
writeBits(bits, value) {
if (bits === 0) { return; }
value &= (0xffffffff >>> (32 - bits));
let bitsConsumed;
if (this.bitsPending > 0) {
if (this.bitsPending > bits) {
this.a[this.position - 1] |= value << (this.bitsPending - bits);
bitsConsumed = bits;
this.bitsPending -= bits;
} else if (this.bitsPending === bits) {
this.a[this.position - 1] |= value;
bitsConsumed = bits;
this.bitsPending = 0;
} else {
this.a[this.position - 1] |= value >> (bits - this.bitsPending);
bitsConsumed = bitsPending;
this.bitsPending = 0;
}
} else {
bitsConsumed = Math.min(8, bits);
this.bitsPending = 8 - bitsConsumed;
this.a[this.position++] = (value >> (bits - bitsConsumed)) << this.bitsPending;
}
bits -= bitsConsumed;
if (bits > 0) {
this.writeBits(bits, value);
}
}
readBits(bits, bitBuffer) {
if (typeof bitBuffer === "undefined") { bitBuffer = 0; }
if (bits === 0) { return bitBuffer; }
let partial;
let bitsConsumed;
if (this.bitsPending > 0) {
const byte = this.a[this.position - 1] & (0xff >> (8 - this.bitsPending));
bitsConsumed = Math.min(this.bitsPending, bits);
this.bitsPending -= bitsConsumed;
partial = byte >> this.bitsPending;
} else {
bitsConsumed = Math.min(8, bits);
this.bitsPending = 8 - bitsConsumed;
partial = this.a[this.position++] >> this.bitsPending;
}
bits -= bitsConsumed;
bitBuffer = (bitBuffer << bitsConsumed) | partial;
return (bits > 0) ? this.readBits(bits, bitBuffer) : bitBuffer;
}
seekTo(bitPos) {
this.position = (bitPos / 8) | 0;
this.bitsPending = bitPos % 8;
if(this.bitsPending > 0) {
this.bitsPending = 8 - this.bitsPending;
this.position++;
}
}
}

73
src/js/main.js
View File

@ -4,7 +4,9 @@ import { AmbientLight } from 'three/src/lights/AmbientLight';
import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer';
import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera';
import { Scene } from 'three/src/scenes/Scene';
import { BoxLayer } from './layer/BoxLayer';
// import { BoxLayer } from './layer/BoxLayer';
import { Vector3} from 'three/src/math/Vector3';
import { DxfLayer } from './layer/DxfLayer';
// import * as util from './core/utilities';
// import { OrbitControls } from './lib/OrbitControls.js'
import { Map } from './core/Map';
@ -42,7 +44,9 @@ class Application {
// document.body.appendChild(this.renderer.domElement);
this.renderer.setSize(this.width, this.height);
this.renderer.setClearColor(bgcolor, 1); // second param is opacity, 0 => transparent
this.renderer.render
var Empty = Object.freeze([]);
this.renderer.clippingPlanes = Empty; // GUI sets it to globalPlanes
this.renderer.localClippingEnabled = true;
this.container.appendChild(this.renderer.domElement);
/* Scene: that will hold all our elements such as objects, cameras and lights. */
@ -60,15 +64,54 @@ class Application {
var far = 2000; //Anything beyond this distance will not be rendered
this.camera = new PerspectiveCamera(angle, aspect, near, far);
//this.camera.position.z = 20;
this.camera.position.set(0, -0.1, 150);
// this.camera.position.set(0, -0.1, 150);
// this.camera.lookAt(new THREE.Vector3(0, 0, 0));
// this.controls = new OrbitControls(this.camera, this.scene, this.renderer.domElement);
this.map = new Map(this.camera, this.scene, this.renderer.domElement, this.container);
let boxLayer = new BoxLayer({ width: 10, height: 10, depth: 10 });
this.map.addLayer(boxLayer);
this.camera = new PerspectiveCamera( 30, this.width / this.height, 100, 100000 );
this.camera.up.set( 0, 0, 1 );
const dirLight = new DirectionalLight( 0xffffff, 1 );
dirLight.position.set( 585000 + 10000, 6135000 + 10000, -500 + 5000 );
this.camera.add( dirLight );
domEvent.on(window, 'click', this.onWindowResize, this);
let x = { min: 3955850, max: 4527300, avg: 4282010 };
let y= { min: 2183600, max: 2502700, avg: 2302070 };
let z = { min: -60066, max: 3574.94, avg: -13616.3 };
const center = new Vector3(x.avg, y.avg, z.avg);
const size = Math.max(x.max - x.min, y.max - y.min, z.max - z.min);
const camDirection = new Vector3(-0.5, -Math.SQRT1_2, 0.5);
const camOffset = camDirection.multiplyScalar(size * 2);
this.camera.position.copy(center);
this.camera.position.add(camOffset);
this.camera.near = size * 0.1;
this.camera.far = size * 25;
this.camera.updateProjectionMatrix();
// this.controls = new OrbitControls(this.camera, this.scene, this.renderer.domElement);
this.map = new Map(size, center, this.camera, this.scene, this.renderer.domElement, this.container);
// this.map.target = center;
// this.map.minDistance = size*0.75;
// this.map.maxDistance = size*15;
// let boxLayer = new BoxLayer({ width: 10, height: 10, depth: 10 });
// this.map.addLayer(boxLayer);
let dxfLayer = new DxfLayer({
geomId: 134, q: true, type: "3dface", name: "Mittelpannon", description: "test"
});
dxfLayer.addListener('add', this.animate, this);
// dxfLayer.addListener('added', function(){
// console.log('added');
// });
// dxfLayer.idx = [0, 1, 2, 3, 4, 5];
// dxfLayer.vertices = new Float32Array([10.421, -20.878, 0.068, 11.241, -20.954, 0.055, 10.225, -20.297, 0.078, 0.161, -6.548, 0.535, -0.163, -6.675, 0.538, 0.116, -6.874, 0.537,]);
this.map.addLayer(dxfLayer);
// domEvent.on(window, 'click', this.onWindowResize, this);
// util.setLoading("webgl");
this.start();
@ -80,15 +123,15 @@ class Application {
}
else {
this._setCanvasSize(this.container.clientWidth, this.container.clientHeight);
}
}
}
_setCanvasSize (width, height) {
_setCanvasSize(width, height) {
this.width = width;
this.height = height;
this.camera.aspect = width / height;
this.camera.updateProjectionMatrix();
this.renderer.setSize(width, height);
this.renderer.setSize(width, height);
this.animate();
}
@ -143,10 +186,10 @@ class Application {
this.renderer.render(this.scene, this.camera);
}
add(layer) {
this.objects.push(layer);
this.scene.add(layer.getMesh());
}
// add(layer) {
// this.objects.push(layer);
// this.scene.add(layer.getMesh());
// }
}
var container = document.getElementById("webgl");

87
webpack.config.js
View File

@ -18,7 +18,7 @@ const devMode = (process.env.NODE_ENV !== 'production');
const fileNamePrefix = isProduction ? '[chunkhash].' : '';
module.exports = {
mode: process.env.NODE_ENV,
// mode: process.env.NODE_ENV,
context: __dirname,
entry: './src/js/main.js',
output: {
@ -37,19 +37,19 @@ module.exports = {
name: 'fonts/[name].[ext]'
}
},
{
test: /\.(png|jpg|gif)$/,
loaders: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: 'images/[name].[ext]'
}
},
'img-loader'
],
},
// {
// test: /\.(png|jpg|gif)$/,
// loaders: [
// {
// loader: 'url-loader',
// options: {
// limit: 10000,
// name: 'images/[name].[ext]'
// }
// },
// 'img-loader'
// ],
// },
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
@ -65,9 +65,8 @@ module.exports = {
test: /\.(less|css)$/,
use: [
{
// loader: (isProduction === true) ? MiniCssExtractPlugin.loader : 'style-loader',
// loader: 'style-loader',
loader: MiniCssExtractPlugin.loader,
loader: (isProduction === true) ? MiniCssExtractPlugin.loader : 'style-loader',
// loader: 'style-loader',
// loader: MiniCssExtractPlugin.loader,
// options: {
// hmr: process.env.NODE_ENV === 'development',
@ -93,23 +92,31 @@ module.exports = {
stats: {
colors: true
},
// devtool: 'source-map',
// devtool: 'inline-source-map',
optimization: {
minimize: isProduction,
minimizer: [new TerserPlugin({
parallel: true,
sourceMap: true,
terserOptions: {
extractComments: 'all',
compress: {
drop_console: true,
drop_debugger: true,
minimizer: [
new TerserPlugin({
// cache: true,
parallel: true,
// sourceMap: true, // Must be set to true if using source-maps in production
extractComments: true,
terserOptions: {
compress: {
directives: false,
// drop_console: true,
// drop_debugger: true,
// keep_classnames: false,
// keep_fnames: false,
},
mangle: true, // Note `mangle.properties` is `false` by default.
keep_classnames: false,
keep_fnames: false,
},
}
})],
}
})
],
},
plugins: [
@ -119,6 +126,7 @@ module.exports = {
CONSTANT_VALUE: JSON.stringify(process.env.CONSTANT_VALUE),
}),
// extractLess,
new MiniCssExtractPlugin({ // Make sure MiniCssExtractPlugin instance is included in array before the PurifyCSSPlugin
// Options similar to the same options in webpackOptions.output
// both options are optional
@ -126,7 +134,8 @@ module.exports = {
// chunkFilename: '[id].css',
filename: '[name].css',
chunkFilename: '[id].css',
}),
}),
// new PurifyCSSPlugin({
// paths: glob.sync(__dirname + '/*.html'),
// minimize: true,
@ -144,15 +153,15 @@ if (isProduction === true) {
// module.exports.optimization.minimizer.push(
// new UglifyJsPlugin({ sourceMap: true })
// );
function () { // Create a manifest.json file that contain the hashed file names of generated static resources
this.plugin("done", function (status) {
require("fs").writeFileSync(
__dirname + "/dist/manifest.json",
JSON.stringify(status.toJson().assetsByChunkName)
);
});
},
// function () { // Create a manifest.json file that contain the hashed file names of generated static resources
// this.plugin("done", function (status) {
// require("fs").writeFileSync(
// __dirname + "/dist/manifest.json",
// JSON.stringify(status.toJson().assetsByChunkName)
// );
// });
// },
);
//development
} else {