<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel='stylesheet' />
<script src='http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
<body>
<div id="container"></div>
<div id="loadingOverlay">
<h1>Loading...</h1>
</div>
</body>
<script>
bmgl.Config.HTTP_URL = 'http://bigemap.com:9000';
var viewer = new bmgl.Viewer("container", {
shouldAnimate: true,
mapId: 'bigemap.zhongkexingtu',
});
var scene = viewer.scene;
bmgl.Math.setRandomNumberSeed(315);
var modelMatrix = bmgl.Transforms.eastNorthUpToFixedFrame(
bmgl.Cartesian3.fromDegrees(-75.59777, 40.03883)
);
var emitterInitialLocation = new bmgl.Cartesian3(0.0, 0.0, 100.0);
var particleCanvas;
function getImage() {
if (!bmgl.defined(particleCanvas)) {
particleCanvas = document.createElement("canvas");
particleCanvas.width = 20;
particleCanvas.height = 20;
var context2D = particleCanvas.getContext("2d");
context2D.beginPath();
context2D.arc(8, 8, 8, 0, bmgl.Math.TWO_PI, true);
context2D.closePath();
context2D.fillStyle = "rgb(255, 255, 255)";
context2D.fill();
}
return particleCanvas;
}
var minimumExplosionSize = 30.0;
var maximumExplosionSize = 100.0;
var particlePixelSize = new bmgl.Cartesian2(7.0, 7.0);
var burstSize = 400.0;
var lifetime = 10.0;
var numberOfFireworks = 20.0;
var emitterModelMatrixScratch = new bmgl.Matrix4();
function createFirework(offset, color, bursts) {
var position = bmgl.Cartesian3.add(
emitterInitialLocation,
offset,
new bmgl.Cartesian3()
);
var emitterModelMatrix = bmgl.Matrix4.fromTranslation(
position,
emitterModelMatrixScratch
);
var particleToWorld = bmgl.Matrix4.multiply(
modelMatrix,
emitterModelMatrix,
new bmgl.Matrix4()
);
var worldToParticle = bmgl.Matrix4.inverseTransformation(
particleToWorld,
particleToWorld
);
var size = bmgl.Math.randomBetween(
minimumExplosionSize,
maximumExplosionSize
);
var particlePositionScratch = new bmgl.Cartesian3();
var force = function (particle) {
var position = bmgl.Matrix4.multiplyByPoint(
worldToParticle,
particle.position,
particlePositionScratch
);
if (bmgl.Cartesian3.magnitudeSquared(position) >= size * size) {
bmgl.Cartesian3.clone(
bmgl.Cartesian3.ZERO,
particle.velocity
);
}
};
var normalSize =
(size - minimumExplosionSize) /
(maximumExplosionSize - minimumExplosionSize);
var minLife = 0.3;
var maxLife = 1.0;
var life = normalSize * (maxLife - minLife) + minLife;
scene.primitives.add(
new bmgl.ParticleSystem({
image: getImage(),
startColor: color,
endColor: color.withAlpha(0.0),
particleLife: life,
speed: 100.0,
imageSize: particlePixelSize,
emissionRate: 0,
emitter: new bmgl.SphereEmitter(0.1),
bursts: bursts,
lifetime: lifetime,
updateCallback: force,
modelMatrix: modelMatrix,
emitterModelMatrix: emitterModelMatrix,
})
);
}
var xMin = -100.0;
var xMax = 100.0;
var yMin = -80.0;
var yMax = 100.0;
var zMin = -50.0;
var zMax = 50.0;
var colorOptions = [
{
minimumRed: 0.75,
green: 0.0,
minimumBlue: 0.8,
alpha: 1.0,
},
{
red: 0.0,
minimumGreen: 0.75,
minimumBlue: 0.8,
alpha: 1.0,
},
{
red: 0.0,
green: 0.0,
minimumBlue: 0.8,
alpha: 1.0,
},
{
minimumRed: 0.75,
minimumGreen: 0.75,
blue: 0.0,
alpha: 1.0,
},
];
for (var i = 0; i < numberOfFireworks; ++i) {
var x = bmgl.Math.randomBetween(xMin, xMax);
var y = bmgl.Math.randomBetween(yMin, yMax);
var z = bmgl.Math.randomBetween(zMin, zMax);
var offset = new bmgl.Cartesian3(x, y, z);
var color = bmgl.Color.fromRandom(
colorOptions[i % colorOptions.length]
);
var bursts = [];
for (var j = 0; j < 3; ++j) {
bursts.push(
new bmgl.ParticleBurst({
time: bmgl.Math.nextRandomNumber() * lifetime,
minimum: burstSize,
maximum: burstSize,
})
);
}
createFirework(offset, color, bursts);
}
var camera = viewer.scene.camera;
var cameraOffset = new bmgl.Cartesian3(-300.0, 0.0, 0.0);
camera.lookAtTransform(modelMatrix, cameraOffset);
camera.lookAtTransform(bmgl.Matrix4.IDENTITY);
var toFireworks = bmgl.Cartesian3.subtract(
emitterInitialLocation,
cameraOffset,
new bmgl.Cartesian3()
);
bmgl.Cartesian3.normalize(toFireworks, toFireworks);
var angle =
bmgl.Math.PI_OVER_TWO -
Math.acos(
bmgl.Cartesian3.dot(toFireworks, bmgl.Cartesian3.UNIT_Z)
);
camera.lookUp(angle);
</script>
</html>