heliware-js
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.5 • Public • Published

    heliware-js

    heliware-js is a library for 3D Geo-Spatial data visualization & analytics built by Heliware (https://heliware.co.in) using three js & webgl.

    From example please check https://demo.heliware.co.in

    For advance library requirements please contact rajan@heliware.co.in

    Installation

    Node Module
    npm install heliware-js --save
    yarn add heliware-js
    bower install heliware-js --save
    
    CDN
    <script src="https://unpkg.com/heliware-js@0.0.0/dist/bundle.js"></script>

    Usage

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test</title>
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css' rel='stylesheet' />
    
        <style>
            html,
            body {
                margin: 0px;
            }
    
            #container {
                width: 100%;
                height: 100vh;
            }
    
            #info {
                position: absolute;
                bottom: 5px;
                left: 5px;
                z-index: 100;
                background-color: white;
                width: 200px;
                height: 200px;
            }
    
            #menu {
                position: absolute;
                top: 0px;
                left: 0px;
                background: #fff;
                padding: 10px;
                font-family: 'Open Sans', sans-serif;
            }
        </style>
    </head>
    
    <body>
        <div id="container"></div>
        <div id="info"></div>
        <div id="menu">
            <input id="satellite-streets-v11" type="radio" name="rtoggle" value="satellite-streets-v11" checked="checked" />
            <label for="satellite-streets-v11">satellite streets</label>
            <input id="streets-v11" type="radio" name="rtoggle" value="streets" />
            <label for="streets-v11">streets</label>
            <input id="light-v10" type="radio" name="rtoggle" value="light" />
            <label for="light-v10">light</label>
            <input id="dark-v10" type="radio" name="rtoggle" value="dark" />
            <label for="dark-v10">dark</label>
            <input id="outdoors-v11" type="radio" name="rtoggle" value="outdoors" />
            <label for="outdoors-v11">outdoors</label>
            <input id="satellite-v9" type="radio" name="rtoggle" value="outdoors" />
            <label for="satellite-v9">satellite</label>
        </div>
        <script src="https://unpkg.com/heliware-js@0.0.0/dist/bundle.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"
            integrity="sha512-LF8ZB1iTwi4Qvkm4pekHG4a437Y9Af5ZuwbnW4GTbAWQeR2E4KW8WF+xH8b9psevV7wIlDMx1MH9YfPqgKhA/Q=="
            crossorigin="anonymous"></script>
        <script>
            console.log(HELIWARE);
            let route_model;
            var container = document.getElementById('container');
            // Creating a GUI and a subfolder.
            var gui = new dat.GUI();
            var assetPath = {
                // modelPath: 'https://heliwarestorage.s3-us-west-2.amazonaws.com/phpserver/files/a806ba7a-329e-43fc-9e24-dab53fe51055/medieval_forge/scene.gltf',
                // modelPath: 'https://heliwarestorage.s3-us-west-2.amazonaws.com/phpserver/files/NTPC+3D_simplified_3d_mesh.obj',
                // texturePath: 'https://heliwarestorage.s3-us-west-2.amazonaws.com/phpserver/files/NTPC+3D_simplified_3d_mesh.mtl',
                modelPath: '/public/assets/model/MuradabadZ_SGRLABS_simplified_3d_mesh.obj',
                texturePath: '/public/assets/model/MuradabadZ_SGRLABS_simplified_3d_mesh.mtl',
                // modelPath: 'https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf',
                // modelPath: 'https://heliwarestorage.s3-us-west-2.amazonaws.com/phpserver/files/51cc2f30-b970-4da0-91dd-ffd6ead17e33/MuradabadZ_SGRLABS_simplified_3d_mesh.obj',
                // texturePath: 'https://heliwarestorage.s3-us-west-2.amazonaws.com/phpserver/files/51cc2f30-b970-4da0-91dd-ffd6ead17e33/MuradabadZ_SGRLABS_simplified_3d_mesh.mtl', // required only if the type of model is obj
            }
            // var type = 'GLTF'; // For GLTF format Model
            // var type = 'MAP_GLTF'; // For OBJ format Model PTC for Point Cloud
            var type = 'MAP_OBJ'; // For OBJ format Model PTC for Point Cloud
            // var type = 'OBJ'; // For OBJ format Model, PTC for Point Cloud
            var config = {
                // panoramaURL: '../assets/panorama.jpg',
                infoElements: {
                    polygon: document.getElementById('info'),
                    line: document.getElementById('info')
                },
                lights: {
                    'ambient': {
                        intensity: 1,
                    },
                    // 'directionalLights': {
                    //     lights: [
                    //         {
                    //             position: {
                    //                 x: 0,
                    //                 y: 60,
                    //                 z: 100,
                    //             },
                    //             color: 0xffffff,
                    //             intensity: 1
                    //         },
                    // {
                    //     position: {
                    //         x: 0,
                    //         y: 70,
                    //         z: 100,
                    //     },
                    //     color: 0xffffff,
                    // }
                    //     ],
                    // },
                },
                // access_token: 'your_access_token'
                // modelRotation: {
                //     x: Math.PI / 2,
                //     y: 0,
                //     z: 0
                // },
                map_access_token: 'map_access_token',
                position: {
                    lat: 28.818348,
                    // lat: -35.39847,
                    // 148.9819, -35.39847
                    // 148.9819, -35.3981
                    lng: 78.641882
                    // lng: 148.9819
                },
                zoom: 16,
                // zoom: 16,
                maxZoom: 19,
                pitch: 60
            } // Optional Scene configuration for more information see Scene Configuration
            function onProgress(loadedPercentage) {
                console.log(loadedPercentage);
            } // Track loaded percentage
            // '60433d66443662d3d75966dd'
            var heli3DViewer = new HELIWARE.Heli3DViewer(container, assetPath, type, onProgress, config);
            console.log(heli3DViewer);
            heli3DViewer.init().then((data) => {
                console.log('Scene', data.scene);
                console.log('Model', data.model);
                console.log('Camera', data.camera);
                console.log('Control', data.orbitControl);
                console.log('Renderer', data.renderer);
                console.log('Panorama', data.panorama);
                var DayLightControls = function () {
                    this.hour = 1;
                };
    
                var accessoryModelRotControls = function (){
                    this.x = 0;
                    this.y = 0;
                    this.z = 0;
                    this.tx = 0;
                    this.ty = 0;
                    this.tz = 0;
                    this.scale = 1;
                    this.markerScale = 1;
                }
    
                var fc = new DayLightControls();
    
                var f1 = gui.addFolder('Day Light');
    
                var hour = f1.add(fc, 'hour', 0, 24).step(0.5);
                hour.onChange(function (value) {
                    heli3DViewer.setDayTime(new Date(), value);
                })
    
                var amr = new accessoryModelRotControls();
    
                var a2 = gui.addFolder('Model Translation');
                var a1 = gui.addFolder('Model Rotation');
                var a3 = gui.addFolder('Model Scale');
                var a4 = gui.addFolder('Marker Scale');
                const geometry = swTolngLatArray(droneFlyPath.geometry);
                console.log(geometry);
                var i = 0
                var inteval = setInterval(() => {
                    i++;
                    console.log('Starts in: ', 10 - i)
                }, 1000);
                // https://heliwarestorage.s3-us-west-2.amazonaws.com/models/plane/plane.glb
                setTimeout(() => {
                    const geometry = swTolngLatArray(droneFlyPath.geometry);
                    console.log(geometry);
                    clearInterval(inteval);
                    heli3DViewer.animateCustomRoute('flight_path_geometry', '', [Math.PI/2, 0, 0], 10, {duration: 100000}).then(d => {
                        console.log(d)
                        const rm = heli3DViewer._map.getLayer('route_model');
                        console.log('route_model New: ', rm);
                        route_model = rm;
                        var rotx = a1.add(amr, 'x', 0, Math.PI*2).step(0.01);
                        var roty = a1.add(amr, 'y', 0, Math.PI*2).step(0.01);
                        var rotz = a1.add(amr, 'z', 0, Math.PI*2).step(0.01);
                        var transx = a2.add(amr, 'tx', 0, 1).step(0.001);
                        var transy = a2.add(amr, 'ty', 0, 1).step(0.001);
                        var transz = a2.add(amr, 'tz', 0, 1).step(0.001);
                        var scale = a3.add(amr, 'scale', 1, 50).step(1);
                        var markerScale = a4.add(amr, 'markerScale', 1, 20).step(1);
                        rotx.onChange(function(value){
                            console.log(value);
                            rm.implementation.modelTransform.rotateX = value
                        })
                        roty.onChange(function(value){
                            console.log(value);
                            rm.implementation.modelTransform.rotateY = value
                        })
                        rotz.onChange(function(value){
                            console.log(value);
                            rm.implementation.modelTransform.rotateZ = value
                        })
                        transx.onChange(function(value){
                            console.log(value);
                            rm.implementation.modelTransform.translateX = value
                        })
                        transy.onChange(function(value){
                            console.log(value);
                            rm.implementation.modelTransform.translateY = value
                        })
                        transz.onChange(function(value){
                            console.log(value);
                            rm.implementation.modelTransform.translateZ = value
                        })
                        scale.onChange(function(value){
                            console.log(value);
                            rm.implementation.scale = value
                        })
                        markerScale.onChange(function(value){
                            console.log(value);
                            rm.implementation.markerScale = value;
                        })
                        setTimeout(() => {
                            d.animate = true;
                        }, 2000);
                    }).catch(e => console.log(e))
                }, 10000);
            }).catch(err => console.log(err));
            let layerId = "satellite-streets-v11";
            function swTolngLatArray(geometry) {
                const coordinates = geometry.coordinates.map(coord => {
                    return [coord[1], coord[0], coord[2]]
                })
                return {
                    ...geometry,
                    coordinates
                }
            }
            function switchLayer(layer) {
                if (layerId != layer.target.id) {
                    layerId = layer.target.id;
                    heli3DViewer.changeStyle('mapbox://styles/mapbox/' + layerId);
                }
            }
    
            let styleList = document.getElementById('menu');
            let inputs = styleList.getElementsByTagName('input');
            for (let i = 0; i < inputs.length; i++) {
                inputs[i].onclick = switchLayer;
            }
            // container.addEventListener('dblclick', (ev)=>{
            // console.log(ev, 'dblclick')
            // var spritesData = heli3DViewer.createInfo(ev, `<h4>Tag</h4>`);
            // console.log(spritesData);
            // console.log(heli3DViewer.onCalcLength(ev));
            // console.log(heli3DViewer.angle(ev));
            // console.log(heli3DViewer.collectAreaPolygonPoint(ev));
            // console.log(heli3DViewer.createLine(`<h4>Line</h4>`));
            //     console.log(heli3DViewer.createPolygon(`<h4>Polygon</h4>`));
            // });
            // container.addEventListener('pointerdown', (ev)=>{
            //     console.log('pointerdown',ev);
            // })
            // container.addEventListener('mouseup', (ev)=>{
            //     console.log(ev, 'mouseup');
            //     heli3DViewer.collectLine(ev);
            // })
            // container.addEventListener('click', (ev)=>{
            // console.log(ev, 'click');
            // heli3DViewer.collectLine(ev);
            // heli3DViewer.collectPolygon(ev);
            // })
            // container.addEventListener('keyup', (ev)=>{
            // console.log(ev.code);
            // if(ev.code == 'KeyQ') heli3DViewer.clearMeasurements()
            // })
        </script>
    </body>
    
    </html>
    Output should be 
    '0 Downloaded'
    '25 Downloaded'
    '50 Downloaded'
    '80 Downloaded'
    '100 Downloaded'
    'Scene_object'
    'Model_object'
    'Camera_object'
    'OrbitControl_object'
    'WebGLRenderer_object'

    Scene Configurations

    interface SceneConfiguration {
        background?: string, // Scene background CSS background property
        panoramaURL?: string, // Panorama Url
        showAxisHelper?: boolean, // Axis Helper
        modelRotation?: { // Model Rotation
            x: number,
            y: number,
            z: number,
        },
        camera?: { // Camera
            fov?: number,
            near?: number,
            far?: number,
            position?: {
                x: number,
                y: number,
                z: number,
            }
        },
        lights: { // Lights
            'ambient'?: {
                color?: string | number,
                intensity?: number,
            },
            'directionalLights'?: {
                lights: {
                    directedAt?: {
                        x: number,
                        y: number,
                        z: number,
                    },
                    position: {
                        x: number,
                        y: number,
                        z: number,
                    },
                    color?: string | number,
                    intensity?: number
                }[],
            },
            'point'?: {
                color?: string | number,
                intensity?: number,
                position?: {
                    x: number,
                    y: number,
                    z: number,
                },
            },
            'spotLight'?: {
                color?: string | number,
                intensity?: number,
                radius?: number
            }
        },
        orbitControl?: {
            autoRotate: boolean
        },
        infoElements?: {
            polygon?: HTMLElement,
            line?: HTMLElement
        },
        access_token?: string, // Heliware access token
        map_access_token?: string, // Mapbox access token
        position?: { // latitude and longitude
            lat: number, 
            lng: number
        },
        zoom?: number, // map zoom level
        maxZoom?: number, // map max zoom level
        pitch?: number // map pitch
    }
    interface ModelAnimationOption {
        duration: number; // in milliseconds
        followModel: boolean; // camera follows model
    }

    Time Animation

    HELIWARE.timeAnimation(parameters)
    
    

    Single latlong Data parameters

    parameters =  {
                    map: map,           // mapboxgl Map
                    data:data,
                    index:1,            // Optional :  any whole number for multiple layer 
                    type: "Single",
                    latitude: "store_latitude", 
                    longitude: "store_longitude",
                    time:"store_time",
                    fillColor:"yellow", // Optional : any color name - red, yellow etc.
                    radius:200,         // Optional
                    duration:300        // Optional (in milli Seconeds) : deafult - 1000
                }
    

    Double/Pair latlong Data parameters

    parameters =  {
                    map: map,           // mapboxgl Map
                    data:data,
                    index:1,            // Optional :  any whole number for multiple layer 
                    type: "Pair",
                    latitude_1: "latitude_1", 
                    longitude_1: "longitude_1",
                    latitude_2:"latitude_2",
                    longitude_2:"longitude_2",
                    time:"time",
                    color_1:"yellow",   // Optional : any color name - red, yellow etc.
                    color_2:"yellow",   // Optional : any color name - red, yellow etc.
                    radius:10,          // Optional
                    duration:300        // Optional (in milli Seconeds) : deafult - 1000
                }
    

    Debug Errors

    If your project uses typescript of version less than 3.7 then you may face the following error

    An accessor cannot be declared in ambient context
    

    To resolve this in your tsc.config.json file Set "skipLibCheck": true

    "compilerOptions": {
        "skipLibCheck": true
    }

    This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

    "compilerOptions": {
        "allowSyntheticDefaultImports": true
    }

    If you are using Angular 7 you may face the following error

    ERROR in node_modules/heli-3d-viewer/node_modules/three/src/core/BufferAttribute.d.ts(21,6): error 
    TS1086: An accessor cannot be declared in an ambient context.
    node_modules/heli-3d-viewer/node_modules/three/src/core/InterleavedBufferAttribute.d.ts(19,6): error 
    TS1086: An accessor cannot be declared in an ambient context.
    node_modules/heli-3d-viewer/node_modules/three/src/core/InterleavedBufferAttribute.d.ts(20,6): error 
    TS1086: An accessor cannot be declared in an ambient context.
    

    To resolve install these dev dependencies

    npm install --save-dev @types/offscreencanvas
    npm install --save-dev @types/webgl2

    Update your tsconfig.app.json

    "types": ["node", "webgl2", "offscreencanvas"]

    Install

    npm i heliware-js

    DownloadsWeekly Downloads

    18

    Version

    0.1.5

    License

    none

    Unpacked Size

    12.6 MB

    Total Files

    13

    Last publish

    Collaborators

    • heliware-sgr