BIGEMPA Js API示例中心
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' />
<script src='http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.js'></script>
<script src="/offline_data/migrationLayer.js"></script>
<title>遷徙線效果</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
#baseMap {
width: 100%;
height: 100%;
}
.tools {
position: absolute;
top: 20px;
right: 30px;
z-index: 99;
}
</style>
</head>
<body>
<div id="baseMap">
<div class="tools">
<button onclick="execAction(`show`)">顯示</button>
<button onclick="execAction(`hide`)">隱藏</button>
<button onclick="execAction(`another`)">設(shè)置其他值</button>
<button onclick="execAction(`stop`)">暫停</button>
<button onclick="execAction(`run`)">運(yùn)行</button>
<button onclick="execAction(`destroy`)">銷(xiāo)毀</button>
</div>
</div>
<script>
BM.Config.HTTP_URL = 'http://ua.bigemap.com:30081/bmsdk';
//基礎(chǔ)地圖
var baseMap = BM.map("baseMap", "bigemap.dc-map", {
center: [30.7617, 103.9526],
zoom: 5,
zoomControl:false,
});
var data = [
{ "from": [103.9526, 30.7617], "to": [121.4648, 31.2891], "labels": ["成都", "上海"], "color": "#59acff" },
];
var newdata = [
{ "from": [103.9526, 30.7617], "to": [116.521, 39.0509], "labels": ["成都", "廊坊"], "color": "#59acff" },
{ "from": [103.9526, 30.7617], "to": [109.1052, 36.4252], "labels": ["成都", "延安"], "color": generateBrightColor() },
{ "from": [103.9526, 30.7617], "to": [117.5208, 34.3268], "labels": ["成都", "徐州"], "color": generateBrightColor() },
{ "from": [103.9526, 30.7617], "to": [116.6858, 37.2107], "labels": ["成都", "德州"], "color": generateBrightColor() },
]
var ms = BM.migrationLayer({
map: baseMap,
data: newdata,
// 設(shè)置終點(diǎn)的閃爍圓形大小
pulseRadius: 30,
// 設(shè)置終點(diǎn)的閃爍圓形的寬度
pulseBorderWidth: 1.0,
// 箭頭寬度大小
arcWidth: 6.0,
// 是否展示遷徙先的起點(diǎn)和終點(diǎn)文字
arcLabel: false,
// 設(shè)置文字的字體 和 字體大小
arcLabelFont: '20px sans-serif',
maxWidth: 4
}
);
ms.addTo(baseMap);
function execAction(value) {
if (ms == null || ms == undefined) return;
switch (value) {
case "show":
ms.show();
break;
case "hide":
ms.hide();
break;
case "stop":
ms.pause();
break;
case "run":
ms.play();
break;
case "destroy":
ms.destroy();
ms = null;
break;
case "another":
ms.setData(data)
break;
}
}
function generateBrightColor() {
// 生成一個(gè)在FF至AA之間的隨機(jī)數(shù)，以保持顏色的鮮艷但不至于過(guò)飽和
const rr = Math.floor(Math.random() * 0x60 + 0xA0).toString(16).padStart(2, '0');
const gg = Math.floor(Math.random() * 0x60 + 0xA0).toString(16).padStart(2, '0');
// 對(duì)于藍(lán)色通道，我們可以稍微降低其值，但仍保持鮮艷，例如在80至FF之間
const bb = Math.floor(Math.random() * 0x80 + 0x80).toString(16).padStart(2, '0');
// 組合成16進(jìn)制顏色代碼
return `#${rr}${gg}${bb}`;
}
</script>
</body>
</html>
<button id="kseui"></button>