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
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><!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'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
}HELIWARE.timeAnimation(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
}
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
}
HELIWARE.geojsonLayer(parameters)
HELIWARE.geojson3DLayer(parameters)
HELIWARE.iconLayer(parameters)
HELIWARE.textLayer(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
}
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
}
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
}
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
}
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)},
}
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/webgl2Update your tsconfig.app.json
"types": ["node", "webgl2", "offscreencanvas"]