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"/>
<script src="http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.js"></script>
<script src="/bmapdemo/arrowline/polylineDecorator.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
<title>ArcGis Map</title>
</head>
<body>
<div id="map"></div>
<script>
// 軟件配置信息地址，軟件安裝完成之后使用本地地址，如：http://localhost:9000
BM.Config.HTTP_URL = "http://ua.bigemap.com:30081/bmsdk/"
// 在ID為map的元素中實例化一個地圖，并設置地圖的ID號為bigemap.arcgis-map，ID號程序自動生成，無需手動配置，無需設置地圖投影 ，設置中心點，默認的級別和顯示級別控件
window.map = BM.map("map", "bigemap.dc-satellite", {
crs: BM.CRS.EPSG4326,
center: [57, -19],
zoom: 6,
zoomControl: true,
attributionControl: false,
});
var arrow = BM.polyline(
[
[57, -19],
[60, -12],
[56,-10],
[52,-9]
],
{
color: "#e53e31",
dashArray: "2,4",
}
).addTo(map);
window.arrowHead = BM.polylineDecorator(arrow, {
patterns: [
{
//設置箭頭位于線端的位置
offset: "100%",
// 當箭頭的offset不位于100%是會根據offset的值來重復展示箭頭
repeat: 0,
// symbol設置箭頭的樣式
symbol: BM.Symbol.arrowHead({
// 像素大小
pixelSize: 40,
// 是否是多邊形
polygon: false,
// 調整箭頭的樣式這個的話可以參考,BM.polyline的文檔
pathOptions: {
stroke: true,
color: "#e53e31",
opacity: 0.8,
},
}),
},
],
}).addTo(map);
// 點線效果
var pathPattern = BM.polylineDecorator(
[
[49.543519, -12.469833],
[49.808981, -12.895285],
[50.056511, -13.555761],
[50.217431, -14.758789],
[50.476537, -15.226512],
[50.377111, -15.706069],
[50.200275, -16.000263],
[49.860606, -15.414253],
[49.672607, -15.710152],
[49.863344, -16.451037],
[49.774564, -16.875042],
[49.498612, -17.106036],
[49.435619, -17.953064],
[49.041792, -19.118781],
[48.548541, -20.496888],
[47.930749, -22.391501],
[47.547723, -23.781959],
[47.095761, -24.94163],
[46.282478, -25.178463],
[45.409508, -25.601434],
[44.833574, -25.346101],
[44.03972, -24.988345],
],
{
patterns: [
{
offset: 12,
repeat: 25,
symbol: BM.Symbol.dash({
pixelSize: 10,
pathOptions: { color: "#f00", weight: 2 },
}),
},
{
offset: 0,
repeat: 25,
symbol: BM.Symbol.dash({ pixelSize: 0 }),
},
],
}
).addTo(map);
// --- 標注路線 ---
var markerLine = BM.polyline(
[
[58.44773, -28.65234],
[52.9354, -23.33496],
[53.01478, -14.32617],
[58.1707, -10.37109],
[59.68993, -0.65918],
],
{
opacity: 0,
}
).addTo(map);
var markerPatterns = BM.polylineDecorator(markerLine, {
patterns: [
{
offset: "5%",
repeat: "10%",
symbol: BM.Symbol.marker({
rotate: true,
markerOptions: {
icon: BM.icon({
iconUrl: "/bmapdemo/arrowline/arrow.png",
iconSize:[16,16],
iconAnchor: [16, 16],
}),
},
}),
},
],
}).addTo(map);
// 加載旋轉的箭頭
var pathPattern = BM.polylineDecorator(
[
[42.9, -15],
[44.18, -11.4],
[45.77, -8.0],
[47.61, -6.4],
[49.41, -6.1],
[51.01, -7.2],
],
{
patterns: [
{
offset: 0,
repeat: 10,
symbol: BM.Symbol.dash({
pixelSize: 5,
pathOptions: {
color: "#000",
weight: 1,
opacity: 0.2,
},
}),
},
{
offset: "16%",
repeat: "20%",
symbol: BM.Symbol.marker({
rotate: true,
markerOptions: {
icon: BM.icon({
iconUrl: "/bmapdemo/arrowline/icon_plane.png",
iconAnchor: [16, 16],
}),
},
}),
},
],
}
).addTo(map);
//加載多箭頭線段數組
var multiCoords1 = [
[
[47.5468, -0.791],
[48.8068, -0.1318],
[49.1242, 1.6699],
[49.4966, 3.2958],
[51.4266, 2.8564],
[51.7542, 2.1093],
],
[
[48.0193, -2.8125],
[46.3165, -2.8564],
[44.9336, -1.0107],
[44.5278, 1.582],
[44.8714, 3.7353],
[45.8287, 5.1855],
[48.1953, 5.1416],
],
[
[45.9205, 0.4394],
[46.7699, 0.9228],
[47.6061, 2.5488],
[47.754, 3.3837],
],
];
var plArray = [];
for (var i = 0; i < multiCoords1.length; i++) {
plArray.push(BM.polyline(multiCoords1[i]).addTo(map));
}
window.nn = BM.polylineDecorator(multiCoords1, {
patterns: [
{
offset: 25,
repeat: 50,
symbol: BM.Symbol.arrowHead({
pixelSize: 15,
pathOptions: {
fillOpacity: 1,
weight: 0,
color: "#2edc71",
},
}),
},
],
}).addTo(map);
nn.on("click", function (e) {
console.log(e);
});
</script>
</body>
</html>