<!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;
|
}
|
.leaflet-popup-tip-container{
|
display: none;
|
}
|
.leaflet-popup{
|
color:black;
|
margin: 0;
|
bottom: -600px !important;
|
left: 604px !important;
|
|
}
|
.leaflet-popup-content-wrapper{
|
background-color: rgba(0, 0, 0, 0) !important;
|
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
}
|
.shipxy_popup .box {
|
color: #000000 !important;
|
background-color: rgba(0, 0, 0, 0) !important;
|
}
|
</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>
|
window.addEventListener('message', function(event) {
|
console.log(event,"eeeee")
|
let data_lat = event.data.cxw_lat
|
let data_lng = event.data.cxw_lng
|
_map.setView([data_lat,data_lng],15);
|
},false)
|
// 创建地图示例
|
var _map = new ShipxyAPI.Map("map",{ak:"4d7a0667a74d45e491d9fda4a86e2ba9"});
|
console.log(_map)
|
var ship_data = []
|
// 开启区域船服务
|
var canvasShips = ShipxyAPI.ShipService(_map, {
|
enableAreaShip:true,// 区域船
|
enableFleetShip:false,// 船队船
|
// resetShipColorCallBack:function(ship){
|
// //重设区域船颜色
|
// //ship，区域船单船信息，
|
// return "red";//当前船将被绘制成红色
|
// },
|
drawShipsEndCallBack:function(data){
|
for(let i=0;i<canvasShips._drawLables.length;i++){
|
let item = canvasShips._drawLables[i]
|
console.log(item,"item")
|
ship_data.push({id:item.symbol.mmsi,name:item.lableText,lat:item.symbol.lat,lng:item.symbol.lng,time:item.symbol._ship.lastdyn})
|
console.log(JSON.stringify(ship_data))
|
}
|
console.log(canvasShips,"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
|
|
});
|
|
// setInterval(function(){
|
// console.log(canvasShips,"canvasShips")
|
// },1000)
|
canvasShips.addSelectedListener(function (ship) {
|
// 选中船监听
|
console.log("ship:" + ship.mmsi);
|
});
|
//
|
// _map.setView([31.067789,121.476388],16); //31.137222,121.533889 31.065589,121.476388
|
//
|
var ship_arr = [];
|
|
// ship_arr.push(ship1);
|
var marker_icon_1 = L.icon({
|
iconUrl: "./dingweidian.png",
|
iconAnchor: [0, 0],//图标锚点
|
// iconSize:[32,32]//图标大小
|
});
|
// 添加标记,到地图
|
var marker = ShipxyAPI.marker([31.063613, 121.480387], {
|
icon: marker_icon_1,
|
label:'杜丰通感'
|
}).addTo(_map);
|
var marker2 = ShipxyAPI.marker([31.222,121.51], {
|
icon: marker_icon_1,
|
label:'宬苑通感'
|
}).addTo(_map);
|
var popup_options = {
|
className: "shipxy_popup",
|
closeButton: false,
|
};
|
//
|
marker.bindPopup(function (layer) {
|
var html = "";
|
html += "<div class='box'>杜丰通感";
|
html += "</div>";
|
return html;
|
}, popup_options).openPopup();
|
// 添加区域船
|
_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>
|
