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

0.1.11 • 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
            }

Geospatial Layers

HELIWARE.geojsonLayer(parameters)
HELIWARE.geojson3DLayer(parameters)
HELIWARE.iconLayer(parameters)
HELIWARE.textLayer(parameters)

Geojson layer 2D : HELIWARE.geojsonLayer(parameters)

parameters =  {
                id: "layer-1",                            // string as layer id shpuld be unique for each layer
                map: map,
                data: GeojsonData,                        // geojson feature collection
                center : [longitude, latitude],
                pointType: "circle",                      //"square" | "circle"
                pointSize: 1,                             // control size of point in 2D
                lineType: "line",                         //  "flow" | "line",
                elevation: 100,                           // above to map position control
                fillColor: "#000a44",
                strokeColor: "#0faaaa",
                opacity: 0.3,
                getdetails : d=>{console.log(d)}          // On hover get information
            }

Geojson layer 3D : HELIWARE.geojson3DLayer(parameters)

parameters =  {
                id:"layer-2",                              // string as layer id shpuld be unique for each layer
                center : [longitude, latitude],
                map: map,                                  // Mapbox Map vaiable
                data: GeojsonData,                         // geojson feature collection
                elevation: 100,                            // above to map position control
                fillColor: "#00aaaa",
                strokeColor: "#aaaaaa",
                opacity: 0.6,                             
                pointType : "cube",                         // "cube" | "sphere"
                pointSize: 20,                              // control size ogf sphere & cube
                lineType: "pipe" ,                          // "pipe" | "flow"
                buildingHeight: 100,
                getdetails : d=>{console.log(d)},           // On hover get information
            }

Icon layer : HELIWARE.iconLayer(parameters)

parameters =  {
                id:"icon-layer",
                map:map,
                data:point,                       // json with position property atleast
                elevation: 1000,                  // above to map position control
                iconSource : "single",            // "single" | "attribute"
                iconSvgUrl:  "./cafe.svg",        // single icon for all points, for single type iconSource
                size: 10,                         // control size of icons
                center : [Longitude, latitude],   // attributes stores coordinates
                getPosition: d=>d.coordinates,    // attributes stores position coordinates
                getIcon: d=>d.ic,                 // attributes stores icon url
                getdetails : d=>{console.log(d)}  // On hover get information
            }

Text layer : HELIWARE.textLayer(parameters)

parameters =  {
                id:"text-layer",
                map:map,
                data:point,                        // json with position property atleast & test display property
                center : [Longitude, latitude],
                elevation: 1000,                   // above to map position control
                color: "#00aaaa",                  // text color
                fontSize:100,                      // control font size
                textAttribute : attribute_name ,   // select attribute for text
                positionAttribute:"coordinates",   // select attribute for position
                getPosition: d=>d.coordinates,     // attribute stores position
                getText: d=>d.re,                  // attribute stores text
                getdetails : d=>{console.log(d)}   // get information on hover
            }

Hexagon layer : HELIWARE.hexagonLayer(parameters)

parameters =  {
                id:"xyz",
                center : center : [Longitude, latitude],
                map:map,
                data:point,                                   // geojson feature collection
                getcolor: d=> d.co,                           // attribute store color
                getHeight: d=> d.he,                          // attribute store height
                getPosition :  d=> d.coordinates,             // attribute store Position
                getdetails : d=>{console.log(d)},
            }

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"]

Package Sidebar

Install

npm i heliware-js

Weekly Downloads

7

Version

0.1.11

License

none

Unpacked Size

16.2 MB

Total Files

17

Last publish

Collaborators

  • heliware-sgr
  • amitee0007