BIGEMPA Js API示例中心
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>demo</title>
<link href="http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.css" rel="stylesheet" />
<script src="http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.js"></script>
<style>
html,
body {
margin: 0;
height: 100%;
overflow: hidden;
background: #000;
}
#map {
width: 100%;
height: 100%;
}
#weatherCanvas {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
z-index: 500;
}
#controls {
position: absolute;
top: 10px;
left: 10px;
z-index: 999;
background: rgba(255, 255, 255, 0.85);
padding: 8px 12px;
border-radius: 10px;
font-family: "Microsoft YaHei", sans-serif;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div id="map"></div>
<canvas id="weatherCanvas"></canvas>
<div id="controls">
天氣：
<select id="weatherSelect">
<option value="clear">晴天</option>
<option value="cloud">陰天</option>
<option value="rain">下雷雨</option>
<option value="normalrain">下雨</option>
<option value="snow">下雪</option>
</select>
</div>
<script>
// 初始化地圖
// 軟件配置信息地址，軟件安裝完成之后使用本地地址，如：http://localhost:9000
BM.Config.HTTP_URL = "http://ua.bigemap.com:30081/bmsdk/"
// 在ID為map的元素中實例化一個地圖，并設置地圖的ID號，ID號程序自動生成，無需手動配置 ，中心點，默認的級別和顯示級別控件
var map = BM.map('map', 'bigemap.dc-tian-w-satellite', { center: [30,104], zoom: 8, zoomControl:false, attributionControl: false, preferCanvas: true, minZoom: 1 });
let m1 = BM.marker(map.getCenter()).addTo(map);
m1.on("click", (e) => {
console.log(`eeeee`, e);
})
// Canvas 層
const canvas = document.getElementById('weatherCanvas');
const ctx = canvas.getContext('2d');
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
// 狀態變量
let particles = [];
let weather = 'clear';
let transitionAlpha = 1.0; // 用于漸變過渡
let nextWeather = null;
let lightningAlpha = 0; // 閃電亮度
// 初始化粒子
function createParticles(type) {
// const count = type === 'rain' ? 250 : type === 'snow' ? 200 : 0;
let count = null;
if(type == "rain"){
count = 250;
}else if(type == `snow`){
count = 200;
}else if(type == "normalrain"){
count = 240;
}
particles = [];
for (let i = 0; i < count; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
size: type === 'snow' ? Math.random() * 3 + 1 : Math.random() * 2 + 1,
speedY: type === 'rain' || type == "normalrain" ? Math.random() * 4 + 4 : Math.random() * 1 + 0.5,
speedX: type === 'rain'|| type == "normalrain" ? Math.random() * 0.5 - 0.25 : Math.random() * 0.5 - 0.25
});
}
}
// 切換天氣
document.getElementById('weatherSelect').addEventListener('change', e => {
nextWeather = e.target.value;
transitionAlpha = 0; // 觸發漸變動畫
createParticles(nextWeather);
});
// 動畫循環
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 當前天氣透明度漸變
if (nextWeather && transitionAlpha < 1) {
transitionAlpha += 0.02;
if (transitionAlpha >= 1) {
weather = nextWeather;
nextWeather = null;
}
}
const alpha = nextWeather ? transitionAlpha : 1;
// 繪制天氣效果
ctx.save();
ctx.globalAlpha = alpha;
if (weather === 'rain'){
drawRain();
drawLightning()
};
if (weather === 'snow'){
drawSnow()
};
if (weather === 'cloud'){
drawClouds()
};
if (weather === 'normalrain'){
drawnormalRain()
};
ctx.restore();
requestAnimationFrame(animate);
}
// 繪制雨
function drawRain() {
ctx.strokeStyle = 'rgba(174,194,224,0.8)';
ctx.lineWidth = 1;
for (let p of particles) {
ctx.beginPath();
ctx.moveTo(p.x, p.y);
ctx.lineTo(p.x + p.speedX * 2, p.y + p.speedY * 10);
ctx.stroke();
p.x += p.speedX;
p.y += p.speedY * 5;
if (p.y > canvas.height) {
p.y = -10;
p.x = Math.random() * canvas.width;
}
}
}
// 繪制雪
function drawSnow() {
ctx.fillStyle = 'rgba(255,255,255,0.9)';
for (let p of particles) {
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fill();
p.x += p.speedX;
p.y += p.speedY;
if (p.y > canvas.height) {
p.y = -10;
p.x = Math.random() * canvas.width;
}
}
}
// 繪制陰天
function drawClouds() {
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, 'rgba(200,200,200,0.7)');
gradient.addColorStop(1, 'rgba(100,100,100,0.3)');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
// 閃電邏輯
function drawLightning() {
if (Math.random() < 0.005) { // 隨機閃電概率
lightningAlpha = 1.0;
}
if (lightningAlpha > 0) {
ctx.fillStyle = `rgba(255,255,255,${lightningAlpha})`;
ctx.fillRect(0, 0, canvas.width, canvas.height);
lightningAlpha -= 0.08;
}
}
//普通下雨
function drawnormalRain() {
ctx.strokeStyle = 'rgba(174,194,224,0.8)';
ctx.lineWidth = 1;
for (let p of particles) {
ctx.beginPath();
ctx.moveTo(p.x, p.y);
ctx.lineTo(p.x + p.speedX * 2, p.y + p.speedY * 10);
ctx.stroke();
p.x += p.speedX;
p.y += p.speedY * 5;
if (p.y > canvas.height) {
p.y = -10;
p.x = Math.random() * canvas.width;
}
}
}
// 啟動
createParticles(weather);
animate();
</script>
</body>
</html>
<button id="kseui"></button>