<!DOCTYPE html>
|
<html>
|
<head lang="en">
|
<meta charset="UTF-8">
|
<title>区域船展示</title>
|
<script src="https://api.shipxy.com/h5s/api/3.5/plugins/jquery/jquery.min.js"></script>
|
<script src="https://api.shipxy.com/h5s/api/3.5/?k=4d7a0667a74d45e491d9fda4a86e2ba9"></script>
|
<style>
|
.my-map {
|
position: absolute;
|
left: 0px;
|
top: 0px;
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
outline: none;
|
background-color: #A3CCFF;
|
}
|
.div_btn {
|
position: relative;
|
top: 10px;
|
left: 80px;
|
z-index: 888;
|
}
|
|
.div_btn input[type="button"] {
|
cursor: pointer;
|
}
|
.count_span{
|
color: red;
|
background-color: #fff;
|
text-align: left;
|
width: 120px;
|
font-weight: bolder;
|
padding: 0 5px;
|
border: 1px solid #000000;
|
}
|
|
</style>
|
</head>
|
<body>
|
<div id="map"
|
class="my-map">
|
<!-- <div class="div_btn count_span">
|
<label>当前船舶数：</label>
|
<span id="txt_drawships_count"></span>
|
</div> -->
|
</div>
|
<script>
|
// 创建地图示例
|
var _map = new ShipxyAPI.Map("map",{ak:"4d7a0667a74d45e491d9fda4a86e2ba9"});
|
// 开启区域船服务
|
var canvasShips = ShipxyAPI.ShipService(_map, {
|
enableAreaShip:true,// 区域船
|
enableFleetShip:false,// 船队船
|
// resetShipColorCallBack:function(ship){
|
// //重设区域船颜色
|
// //ship，区域船单船信息，
|
// return "red";//当前船将被绘制成红色
|
// },
|
drawShipsEndCallBack:function(data){
|
// 绘制完区域船后回调
|
$("#txt_drawships_count").html(data.count);
|
},
|
lableFont: ["600 12px Arial", "600 13px 宋体"],// 船舶名称，文字字体，默认值：["600 12px Arial", "500 12px Arial"]
|
lableTxtColor: ["#000", "#000"], // 船舶名称，文字颜色，默认值：["#000","#fff"]
|
lableLineColor: ["rgba(1, 30, 62, 1)", "rgba(1, 30, 62, 1)"], // 边框颜色，默认值：["#000","#000"]
|
lableLinefillColor: ["rgba(1, 30, 62, 0.0)", "rgba(1, 30, 62, 0.0)"],// 框内填充颜色，默认值：[null,null]
|
obliqueLineColor: ["#000", "#000"], // 船舶名称，斜线颜色，默认值：[null,null]
|
dShipColor: "#FF6437", // D+船颜色，默认：#ff6347
|
|
});
|
canvasShips.addSelectedListener(function (ship) {
|
// 选中船监听
|
console.log("ship:" + ship.mmsi);
|
});
|
//
|
_map.setView([31.067789,121.476388],15); //31.137222,121.533889 31.065589,121.476388
|
//
|
var ship_arr = [];
|
/*
|
var ship1 = new CanvasShip();
|
ship1.shipid='888888888';// 必填
|
ship1.mmsi='888888888';// 必填
|
ship1.lat=31.065589;// 必填
|
ship1.lng=121.476388;// 必填
|
ship1.sog=11.0;// 航速，节
|
ship1.name="测试船-1";
|
ship_arr.push(ship1);
|
var ship2 = new CanvasShip();
|
ship2.shipid='999999999';// 必填
|
ship2.mmsi='999999999';// 必填
|
ship2.lat=31.095589;// 必填
|
ship2.lng=121.496388;// 必填
|
ship2.sog=8.0;// 航速，节
|
ship2.name="测试船-2";
|
ship_arr.push(ship2);*/
|
// 添加区域船
|
_map.shipsService.addShips(ship_arr);
|
// 设置选中船
|
_map.shipsService.setSelectedShip('888888888');
|
// 取消选中船
|
setTimeout(function () {
|
_map.shipsService.cancelSelectedShip();
|
},2000);
|
// 删除指定区域船
|
setTimeout(function () {
|
_map.shipsService.deleteShipByShipID('999999999');
|
},3000);
|
</script>
|
</body>
|
</html>
|
