BIGEMPA Js API示例中心
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<link href="http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.css" rel="stylesheet"/>
<link
href="http://www.xawiki.com/Public/css/button.min.css"
rel="stylesheet"
/>
<script src="http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.js"></script>
<script src="/offline_data/antpath.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.tools {
width: 440px;
height: 40px;
display: flex;
position: absolute;
z-index: 99;
top: 80px;
right: 100px;
justify-content: space-around;
}
.item {
cursor: pointer;
user-select: none;
}
</style>
<title>Google Map Streets</title>
</head>
<body>
<div id="map"></div>
<div class="tools">
<span
class="item button-tiny button-rounded button-primary one"
onclick="stopAnimate()"
>停止動畫</span
>
<span
class="item button-tiny button-rounded button-primary"
onclick="reverseAnimate()"
>動畫反向</span
>
<span
class="item button-tiny button-rounded button-primary two"
onclick="removeLine()"
>移除線段</span
>
<span
class="item button-tiny button-rounded button-primary two"
onclick="toRed()"
>調整脈沖顏色為紅色</span
>
</div>
<script>
// 軟件配置信息地址，軟件安裝完成之后使用本地地址，如：http://localhost:9000
var isStop = false;
var isShow = true;
BM.Config.HTTP_URL = "http://ua.bigemap.com:30081/bmsdk/"
// 在ID為map的元素中實例化一個地圖，并設置地圖的ID號，ID號程序自動生成，無需手動配置 ，中心點，默認的級別和顯示級別控件
var map = BM.map("map", "bigemap.dc-satellite", {
crs: BM.CRS.EPSG4326,
center: [0, 0],
zoom: 2,
zoomControl: true,
attributionControl: false,
});
//線段的坐標點
var latlngs = [
[104.0061092376709, 30.654305151240013],
[104.00568008422852, 30.66368194928356],
[104.00576591491699, 30.66914517591374],
[104.00636672973633, 30.672245788748327],
[104.007568359375, 30.67542012260089],
[104.00765419006346, 30.67726561758379],
[104.00997161865234, 30.67977543417137],
[104.0166664123535, 30.68907595041032],
[104.01735305786131, 30.69047833147657],
[104.02833938598631, 30.699039795036228],
[104.03314590454102, 30.700811037504153],
[104.0346050262451, 30.700958639575592],
[104.0419864654541, 30.697342323830316],
[104.04808044433592, 30.697268520057104],
[104.05486106872557, 30.69697330439985],
[104.06593322753905, 30.69704710839882],
[104.07142639160156, 30.698670782096602],
[104.09030914306639, 30.69808035845815],
[104.10181045532225, 30.697785145284314],
[104.10507202148438, 30.696751892064274],
[104.1144275665283, 30.69033071337633],
[104.12386894226074, 30.683318593607982],
[104.1342544555664, 30.675493943077218],
[104.13434028625487, 30.668480745931255],
[104.13399696350096, 30.666118291211014],
[104.13476943969725, 30.661983856463657],
[104.13579940795897, 30.657406240242363],
[104.1371726989746, 30.654305151240013],
[104.13734436035156, 30.65120396275696],
[104.13700103759766, 30.642490567558184],
[104.139404296875, 30.635253422248205],
[104.13356781005858, 30.625800008904285],
[104.12412643432617, 30.62033433303795],
[104.1155433654785, 30.61265232098602],
[104.1067886352539, 30.609402055483184],
[104.09151077270508, 30.609402055483184],
[104.08618927001952, 30.60659492021536],
[104.07245635986328, 30.60659492021536],
[104.06679153442383, 30.607776881823778],
[104.06181335449217, 30.607776881823778],
[104.05031204223631, 30.61087946241714],
[104.04602050781249, 30.611470418879772],
[104.0291976928711, 30.620186607785215],
[104.02301788330077, 30.62299334903753],
[104.01872634887695, 30.62757259425386],
[104.01288986206053, 30.63495801706119],
[104.0072250366211, 30.646035094232982],
[104.00636672973633, 30.65238537962313],
];
var data = latlngs.map((v, i) => {
return [v[1], v[0]];
});
var path = BM.polyline
.antPath(data, {
//設置動畫的間隔時間,越短越快
delay: 600,
//定義虛線的間隔數組
dashArray: [10, 20],
//設置線段寬度
weight: 5,
//設置線段顏色
color: "#01adf4",
// 設置脈沖顏色，具體是指虛線段的顏色
pulseColor: "#FFFFFF",
//是否停止動畫
paused: false,
//動畫方向是否反轉
reverse: false,
//硬件加速
hardwareAccelerated: true,
})
.addTo(map);
path.on("click", (e) => {
console.log("zero", e);
});
map.fitBounds(path.getBounds());
var one = document.querySelector(".one");
var two = document.querySelector(".two");
function stopAnimate() {
if (!isStop) {
path.pause();
isStop = true;
one.innerText = "";
one.innerText = "開啟動畫";
} else {
path.resume();
isStop = false;
one.innerText = "";
one.innerText = "暫停動畫";
}
}
function reverseAnimate() {
path.reverse();
}
function removeLine() {
if (isShow) {
isShow=false;
path.remove();
two.innerText = "";
two.innerText = "添加線段";
} else {
isShow=true;
path.addTo(map);
two.innerText = "";
two.innerText = "移除線段";
}
}
function toRed(){
path.setStyle({
pulseColor:"red"
})
}
</script>
</body>
</html>