layui.use(function () {
|
let $ = layui.jquery,
|
layer = layui.layer,
|
laydate = layui.laydate,
|
element = layui.element,
|
laytpl = layui.laytpl;
|
|
// 左侧宽度
|
const leftWidth = $('.left-cards').width();
|
|
// 地图样式
|
const BAIDU_MAP_WHITE_STYLE = [
|
{
|
"featureType": "water",
|
"elementType": "geometry",
|
"stylers": {
|
"visibility": "on",
|
"color": "#ccd6d7ff"
|
}
|
}, {
|
"featureType": "green",
|
"elementType": "geometry",
|
"stylers": {
|
"visibility": "on",
|
"color": "#dee5e5ff"
|
}
|
}, {
|
"featureType": "building",
|
"elementType": "geometry",
|
"stylers": {
|
"visibility": "on"
|
}
|
}, {
|
"featureType": "building",
|
"elementType": "geometry.topfill",
|
"stylers": {
|
"color": "#d1dbdbff"
|
}
|
}, {
|
"featureType": "building",
|
"elementType": "geometry.sidefill",
|
"stylers": {
|
"color": "#d1dbdbff"
|
}
|
}, {
|
"featureType": "building",
|
"elementType": "geometry.stroke",
|
"stylers": {
|
"color": "#aab6b6ff"
|
}
|
}, {
|
"featureType": "subwaystation",
|
"elementType": "geometry",
|
"stylers": {
|
"visibility": "off",
|
"color": "#888fa0ff"
|
}
|
}, {
|
"featureType": "education",
|
"elementType": "geometry",
|
"stylers": {
|
"visibility": "on",
|
"color": "#e1e7e7ff"
|
}
|
}, {
|
"featureType": "medical",
|
"elementType": "geometry",
|
"stylers": {
|
"visibility": "on",
|
"color": "#d1dbdbff"
|
}
|
}, {
|
"featureType": "scenicspots",
|
"elementType": "geometry",
|
"stylers": {
|
"visibility": "on",
|
"color": "#d1dbdbff"
|
}
|
}, {
|
"featureType": "highway",
|
"elementType": "geometry",
|
"stylers": {
|
"visibility": "on",
|
"weight": 4
|
}
|
}, {
|
"featureType": "highway",
|
"elementType": "geometry.fill",
|
"stylers": {
|
"color": "#ffffffff"
|
}
|
}, {
|
"featureType": "highway",
|
"elementType": "geometry.stroke",
|
"stylers": {
|
"color": "#cacfcfff"
|
}
|
}, {
|
"featureType": "highway",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "on"
|
}
|
}, {
|
"featureType": "highway",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#999999ff"
|
}
|
}, {
|
"featureType": "highway",
|
"elementType": "labels.text.stroke",
|
"stylers": {
|
"color": "#ffffffff"
|
}
|
}, {
|
"featureType": "highway",
|
"elementType": "labels.icon",
|
"stylers": {
|
"visibility": "on"
|
}
|
}, {
|
"featureType": "arterial",
|
"elementType": "geometry",
|
"stylers": {
|
"visibility": "on",
|
"weight": 2
|
}
|
}, {
|
"featureType": "arterial",
|
"elementType": "geometry.fill",
|
"stylers": {
|
"color": "#fbfffeff"
|
}
|
}, {
|
"featureType": "arterial",
|
"elementType": "geometry.stroke",
|
"stylers": {
|
"color": "#cacfcfff"
|
}
|
}, {
|
"featureType": "arterial",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "on"
|
}
|
}, {
|
"featureType": "arterial",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#999999ff"
|
}
|
}, {
|
"featureType": "arterial",
|
"elementType": "labels.text.stroke",
|
"stylers": {
|
"color": "#ffffffff"
|
}
|
}, {
|
"featureType": "local",
|
"elementType": "geometry",
|
"stylers": {
|
"visibility": "on",
|
"weight": 1
|
}
|
}, {
|
"featureType": "local",
|
"elementType": "geometry.fill",
|
"stylers": {
|
"color": "#fbfffeff"
|
}
|
}, {
|
"featureType": "local",
|
"elementType": "geometry.stroke",
|
"stylers": {
|
"color": "#cacfcfff"
|
}
|
}, {
|
"featureType": "local",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "local",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#999999ff"
|
}
|
}, {
|
"featureType": "local",
|
"elementType": "labels.text.stroke",
|
"stylers": {
|
"color": "#ffffffff"
|
}
|
}, {
|
"featureType": "railway",
|
"elementType": "geometry",
|
"stylers": {
|
"visibility": "off",
|
"weight": 1
|
}
|
}, {
|
"featureType": "railway",
|
"elementType": "geometry.fill",
|
"stylers": {
|
"color": "#9494941a"
|
}
|
}, {
|
"featureType": "railway",
|
"elementType": "geometry.stroke",
|
"stylers": {
|
"color": "#ffffff1a"
|
}
|
}, {
|
"featureType": "subway",
|
"elementType": "geometry",
|
"stylers": {
|
"visibility": "off",
|
"weight": 1
|
}
|
}, {
|
"featureType": "subway",
|
"elementType": "geometry.fill",
|
"stylers": {
|
"color": "#c3bed433"
|
}
|
}, {
|
"featureType": "subway",
|
"elementType": "geometry.stroke",
|
"stylers": {
|
"color": "#ffffff33"
|
}
|
}, {
|
"featureType": "subway",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "subway",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#979c9aff"
|
}
|
}, {
|
"featureType": "subway",
|
"elementType": "labels.text.stroke",
|
"stylers": {
|
"color": "#ffffffff"
|
}
|
}, {
|
"featureType": "continent",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "on"
|
}
|
}, {
|
"featureType": "continent",
|
"elementType": "labels.icon",
|
"stylers": {
|
"visibility": "on"
|
}
|
}, {
|
"featureType": "continent",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#333333ff"
|
}
|
}, {
|
"featureType": "continent",
|
"elementType": "labels.text.stroke",
|
"stylers": {
|
"color": "#ffffffff"
|
}
|
}, {
|
"featureType": "city",
|
"elementType": "labels.icon",
|
"stylers": {
|
"visibility": "on"
|
}
|
}, {
|
"featureType": "city",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "on"
|
}
|
}, {
|
"featureType": "city",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#454d50ff"
|
}
|
}, {
|
"featureType": "city",
|
"elementType": "labels.text.stroke",
|
"stylers": {
|
"color": "#ffffffff"
|
}
|
}, {
|
"featureType": "town",
|
"elementType": "labels.icon",
|
"stylers": {
|
"visibility": "on"
|
}
|
}, {
|
"featureType": "town",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "town",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#454d50ff"
|
}
|
}, {
|
"featureType": "town",
|
"elementType": "labels.text.stroke",
|
"stylers": {
|
"color": "#ffffffff"
|
}
|
}, {
|
"featureType": "road",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "road",
|
"elementType": "geometry.fill",
|
"stylers": {
|
"color": "#fbfffeff"
|
}
|
}, {
|
"featureType": "poilabel",
|
"elementType": "labels.icon",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "districtlabel",
|
"elementType": "labels.icon",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "poilabel",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#999999ff"
|
}
|
}, {
|
"featureType": "districtlabel",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#888fa0ff"
|
}
|
}, {
|
"featureType": "transportation",
|
"elementType": "geometry",
|
"stylers": {
|
"color": "#d1dbdbff"
|
}
|
}, {
|
"featureType": "companylabel",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "restaurantlabel",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "lifeservicelabel",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "carservicelabel",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "financelabel",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "otherlabel",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "village",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "district",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "land",
|
"elementType": "geometry",
|
"stylers": {
|
"color": "#edf3f3ff"
|
}
|
}, {
|
"featureType": "nationalway",
|
"elementType": "geometry.stroke",
|
"stylers": {
|
"color": "#cacfcfff"
|
}
|
}, {
|
"featureType": "provincialway",
|
"elementType": "geometry.stroke",
|
"stylers": {
|
"color": "#cacfcfff"
|
}
|
}, {
|
"featureType": "cityhighway",
|
"elementType": "geometry.stroke",
|
"stylers": {
|
"color": "#cacfcfff"
|
}
|
}, {
|
"featureType": "road",
|
"elementType": "geometry.stroke",
|
"stylers": {
|
"color": "#cacfcfff"
|
}
|
}, {
|
"featureType": "subwaylabel",
|
"elementType": "labels.icon",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "subwaylabel",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "tertiarywaysign",
|
"elementType": "labels.icon",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "tertiarywaysign",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "provincialwaysign",
|
"elementType": "labels.icon",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "provincialwaysign",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "nationalwaysign",
|
"elementType": "labels.icon",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "nationalwaysign",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "highwaysign",
|
"elementType": "labels.icon",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "highwaysign",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "nationalway",
|
"elementType": "geometry.fill",
|
"stylers": {
|
"color": "#fbfffeff"
|
}
|
}, {
|
"featureType": "nationalway",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#999999ff"
|
}
|
}, {
|
"featureType": "provincialway",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#999999ff"
|
}
|
}, {
|
"featureType": "cityhighway",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#999999ff"
|
}
|
}, {
|
"featureType": "cityhighway",
|
"elementType": "labels.text.stroke",
|
"stylers": {
|
"color": "#ffffffff"
|
}
|
}, {
|
"featureType": "highway",
|
"stylers": {
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "6"
|
}
|
}, {
|
"featureType": "highway",
|
"stylers": {
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "7"
|
}
|
}, {
|
"featureType": "highway",
|
"stylers": {
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "8"
|
}
|
}, {
|
"featureType": "highway",
|
"elementType": "geometry",
|
"stylers": {
|
"visibility": "off",
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "6"
|
}
|
}, {
|
"featureType": "highway",
|
"elementType": "geometry",
|
"stylers": {
|
"visibility": "off",
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "7"
|
}
|
}, {
|
"featureType": "highway",
|
"elementType": "geometry",
|
"stylers": {
|
"visibility": "off",
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "8"
|
}
|
}, {
|
"featureType": "highway",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off",
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "6"
|
}
|
}, {
|
"featureType": "highway",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off",
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "7"
|
}
|
}, {
|
"featureType": "highway",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off",
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "8"
|
}
|
}, {
|
"featureType": "nationalway",
|
"stylers": {
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "6"
|
}
|
}, {
|
"featureType": "nationalway",
|
"stylers": {
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "7"
|
}
|
}, {
|
"featureType": "nationalway",
|
"stylers": {
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "8"
|
}
|
}, {
|
"featureType": "nationalway",
|
"elementType": "geometry",
|
"stylers": {
|
"visibility": "off",
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "6"
|
}
|
}, {
|
"featureType": "nationalway",
|
"elementType": "geometry",
|
"stylers": {
|
"visibility": "off",
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "7"
|
}
|
}, {
|
"featureType": "nationalway",
|
"elementType": "geometry",
|
"stylers": {
|
"visibility": "off",
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "8"
|
}
|
}, {
|
"featureType": "nationalway",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off",
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "6"
|
}
|
}, {
|
"featureType": "nationalway",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off",
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "7"
|
}
|
}, {
|
"featureType": "nationalway",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off",
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "8"
|
}
|
}, {
|
"featureType": "provincialway",
|
"stylers": {
|
"curZoomRegionId": "0",
|
"curZoomRegion": "8,8",
|
"level": "8"
|
}
|
}, {
|
"featureType": "provincialway",
|
"elementType": "geometry",
|
"stylers": {
|
"visibility": "off",
|
"curZoomRegionId": "0",
|
"curZoomRegion": "8,8",
|
"level": "8"
|
}
|
}, {
|
"featureType": "provincialway",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off",
|
"curZoomRegionId": "0",
|
"curZoomRegion": "8,8",
|
"level": "8"
|
}
|
}, {
|
"featureType": "cityhighway",
|
"stylers": {
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "6"
|
}
|
}, {
|
"featureType": "cityhighway",
|
"stylers": {
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "7"
|
}
|
}, {
|
"featureType": "cityhighway",
|
"stylers": {
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "8"
|
}
|
}, {
|
"featureType": "cityhighway",
|
"elementType": "geometry",
|
"stylers": {
|
"visibility": "off",
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "6"
|
}
|
}, {
|
"featureType": "cityhighway",
|
"elementType": "geometry",
|
"stylers": {
|
"visibility": "off",
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "7"
|
}
|
}, {
|
"featureType": "cityhighway",
|
"elementType": "geometry",
|
"stylers": {
|
"visibility": "off",
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "8"
|
}
|
}, {
|
"featureType": "cityhighway",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off",
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "6"
|
}
|
}, {
|
"featureType": "cityhighway",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off",
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "7"
|
}
|
}, {
|
"featureType": "cityhighway",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off",
|
"curZoomRegionId": "0",
|
"curZoomRegion": "6,8",
|
"level": "8"
|
}
|
}, {
|
"featureType": "cityhighway",
|
"elementType": "geometry.fill",
|
"stylers": {
|
"color": "#fbfffeff"
|
}
|
}, {
|
"featureType": "water",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#8f5a33ff"
|
}
|
}, {
|
"featureType": "water",
|
"elementType": "labels.text.stroke",
|
"stylers": {
|
"color": "#ffffffff"
|
}
|
}, {
|
"featureType": "country",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#8f5a33ff"
|
}
|
}, {
|
"featureType": "country",
|
"elementType": "labels.text.stroke",
|
"stylers": {
|
"color": "#ffffffff"
|
}
|
}, {
|
"featureType": "country",
|
"elementType": "labels.text",
|
"stylers": {
|
"fontsize": 28
|
}
|
}, {
|
"featureType": "manmade",
|
"elementType": "geometry",
|
"stylers": {
|
"color": "#dfe7e7ff"
|
}
|
}, {
|
"featureType": "provincialway",
|
"elementType": "geometry.fill",
|
"stylers": {
|
"color": "#fbfffeff"
|
}
|
}, {
|
"featureType": "tertiaryway",
|
"elementType": "geometry.fill",
|
"stylers": {
|
"color": "#fbfffeff"
|
}
|
}, {
|
"featureType": "manmade",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#999999ff"
|
}
|
}, {
|
"featureType": "manmade",
|
"elementType": "labels.text.stroke",
|
"stylers": {
|
"color": "#ffffffff"
|
}
|
}, {
|
"featureType": "scenicspots",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#999999ff"
|
}
|
}, {
|
"featureType": "scenicspots",
|
"elementType": "labels.text.stroke",
|
"stylers": {
|
"color": "#ffffffff"
|
}
|
}, {
|
"featureType": "airportlabel",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#999999ff"
|
}
|
}, {
|
"featureType": "airportlabel",
|
"elementType": "labels.icon",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "scenicspotslabel",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#999999ff"
|
}
|
}, {
|
"featureType": "scenicspotslabel",
|
"elementType": "labels.icon",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "educationlabel",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#999999ff"
|
}
|
}, {
|
"featureType": "educationlabel",
|
"elementType": "labels.icon",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "medicallabel",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#999999ff"
|
}
|
}, {
|
"featureType": "medicallabel",
|
"elementType": "labels.icon",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "companylabel",
|
"elementType": "labels.icon",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "restaurantlabel",
|
"elementType": "labels.icon",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "hotellabel",
|
"elementType": "labels.icon",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "hotellabel",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "shoppinglabel",
|
"elementType": "labels.icon",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "shoppinglabel",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "lifeservicelabel",
|
"elementType": "labels.icon",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "carservicelabel",
|
"elementType": "labels.icon",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "transportationlabel",
|
"elementType": "labels.icon",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "transportationlabel",
|
"elementType": "labels",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "financelabel",
|
"elementType": "labels.icon",
|
"stylers": {
|
"visibility": "off"
|
}
|
}, {
|
"featureType": "entertainment",
|
"elementType": "geometry",
|
"stylers": {
|
"color": "#d1dbdbff"
|
}
|
}, {
|
"featureType": "estate",
|
"elementType": "geometry",
|
"stylers": {
|
"color": "#d1dbdbff"
|
}
|
}, {
|
"featureType": "shopping",
|
"elementType": "geometry",
|
"stylers": {
|
"color": "#d1dbdbff"
|
}
|
}, {
|
"featureType": "education",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#999999ff"
|
}
|
}, {
|
"featureType": "education",
|
"elementType": "labels.text.stroke",
|
"stylers": {
|
"color": "#ffffffff"
|
}
|
}, {
|
"featureType": "medical",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#999999ff"
|
}
|
}, {
|
"featureType": "medical",
|
"elementType": "labels.text.stroke",
|
"stylers": {
|
"color": "#ffffffff"
|
}
|
}, {
|
"featureType": "transportation",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#999999ff"
|
}
|
}, {
|
"featureType": "transportation",
|
"elementType": "labels.text.stroke",
|
"stylers": {
|
"color": "#ffffffff"
|
}
|
}
|
];
|
|
// 船只类型图片
|
const SHIP_IMAGE = {
|
"0": "备用",
|
"20": "地效飞行器",
|
"21": "地效飞行器（危险品A类）",
|
"22": "地效飞行器（危险品B类）",
|
"23": "地效飞行器（危险品C类）",
|
"24": "地效飞行器（危险品D类）",
|
"25": "地效飞行器（保留）",
|
"29": "地效飞行器（无额外信息）",
|
"30": "渔船",
|
"31": "拖轮",
|
"32": "拖轮（拖带长度超过200米）",
|
"33": "挖泥船或水下作业船",
|
"34": "潜水作业船",
|
"35": "军用舰船",
|
"36": "帆船",
|
"37": "游艇",
|
"40": "高速船",
|
"41": "高速船（危险品A类）",
|
"42": "高速船（危险品B类）",
|
"43": "高速船（危险品C类）",
|
"44": "高速船（危险品D类）",
|
"45": "高速船（保留）",
|
"49": "高速船（无额外信息）",
|
"50": "引航船",
|
"51": "搜救船",
|
"52": "拖轮",
|
"53": "港口供应船",
|
"54": "防污染设备船",
|
"55": "执法船",
|
"56": "备用",
|
"58": "医疗运输船",
|
"59": "非战斗舰船",
|
"60": "客船",
|
"61": "客船（危险品A类）",
|
"62": "客船（危险品B类）",
|
"63": "客船（危险品C类）",
|
"64": "客船（危险品D类）",
|
"65": "客船（保留）",
|
"69": "客船（无额外信息）",
|
"70": "货船",
|
"71": "货船（危险品A类）",
|
"72": "货船（危险品B类）",
|
"73": "货船（危险品C类）",
|
"74": "货船（危险品D类）",
|
"75": "货船（保留）",
|
"79": "货船（无额外信息）",
|
"80": "液货船",
|
"81": "液货船（危险品A类）",
|
"82": "液货船（危险品B类）",
|
"83": "液货船（危险品C类）",
|
"84": "液货船（危险品D类）",
|
"85": "液货船（保留）",
|
"89": "液货船（无额外信息）",
|
"90": "其他类型",
|
"91": "其他类型（危险品A类）",
|
"92": "其他类型（危险品B类）",
|
"93": "其他类型（危险品C类）",
|
"94": "其他类型（危险品D类）",
|
"95": "其他类型（保留）",
|
"99": "其他类型（无额外信息）"
|
};
|
|
// 航道信息
|
const SHIP_CHANNEL = {
|
current: 'chengyuan',
|
chengyuan: {
|
id: 1,
|
name: '宬苑',
|
nameEn: 'cy',
|
lng: 121.510884,
|
lat: 31.219752,
|
wgsLng: 121.511941,
|
wgsLat: 31.199828
|
},
|
dufeng: {
|
id: 0,
|
name: '杜丰',
|
nameEn: 'df',
|
lng: 121.4780419,
|
lat: 31.078778,
|
wgsLng: 121.47786,
|
wgsLat: 31.061703
|
}
|
};
|
|
// 电子围栏配置项
|
const FENCE_AREA_OPTIONS = {
|
strokeColor:"red", //边线颜色。
|
fillColor:"red", //填充颜色。当参数为空时，圆形将没有填充效果。
|
strokeWeight: 2, //边线的宽度，以像素为单位。
|
strokeOpacity: 0.5, //边线透明度，取值范围0 - 1。
|
fillOpacity: 0.03, //填充的透明度，取值范围0 - 1。
|
strokeStyle: 'solid' //边线的样式，solid或dashed。
|
};
|
|
// mqtt实时船只信息
|
const ALL_SHIP = deepObserve({});
|
|
// 船只选中，水波纹扩散样式
|
let canvasLayer = null;
|
|
// 请求后台数据
|
const REQUEST = {
|
// 封装ajax请求
|
ajax({ url, type = 'GET', params, success, isLoading = true, isAlert = true }) {
|
let layerIndex = null;
|
let rootPath = document.domain === '10.5.226.53' ? '/tggz' : '';
|
return $.ajax({
|
url: `${rootPath}/tg${url}`,
|
type,
|
data: params,
|
timeout: 1000 * 60 * 5,
|
headers: type.toUpperCase() === 'POST' ? {
|
'Content-Type': 'application/json'
|
} : undefined,
|
beforeSend() {
|
if (isLoading) {
|
layerIndex = showLoading();
|
}
|
},
|
complete() {
|
isLoading && closeLoading(layerIndex);
|
},
|
success(result) {
|
let { code, data } = result;
|
if (code === 0) {
|
success && success(data);
|
} else {
|
isAlert && layer.alert('操作失败...', {
|
icon: 2,
|
anim: 1
|
});
|
}
|
},
|
error() {
|
isAlert && layer.alert('服务器异常，请稍后再试...', {
|
icon: 2,
|
anim: 1
|
});
|
}
|
});
|
}
|
};
|
|
// 页面操作事件
|
const PAGE_EVENT = {
|
shipId: null,
|
map: {
|
// marker移动定时器
|
moveTimer: {},
|
// 创建Map实例
|
init() {
|
let _this = this;
|
let { lng, lat } = SHIP_CHANNEL[SHIP_CHANNEL.current];
|
window.baiduMap = new BMap.Map('map-container', {
|
minZoom: 12,
|
maxZoom: 20,
|
enableMapClick: false
|
});
|
baiduMap.centerAndZoom(new BMap.Point(lng, lat), 17);
|
// baiduMap.panBy(leftWidth);
|
baiduMap.enableKeyboard();
|
baiduMap.enableScrollWheelZoom();
|
baiduMap.enableInertialDragging();
|
baiduMap.enableContinuousZoom();
|
// 设置地图样式`
|
baiduMap.setMapStyle({
|
styleJson: BAIDU_MAP_WHITE_STYLE
|
});
|
// 添加缩放控件
|
let zoomCtrl = new BMap.NavigationControl({
|
anchor: BMAP_ANCHOR_TOP_RIGHT,
|
type: BMAP_NAVIGATION_CONTROL_SMALL,
|
offset: {
|
width: 25,
|
height: 70
|
}
|
});
|
baiduMap.addControl(zoomCtrl);
|
|
// 监听页面的缩放事件
|
baiduMap.addEventListener('zoomend', function () {
|
_this.markerSize();
|
});
|
|
// 实例化鼠标绘制工具
|
let drawingManager = new BMapLib.DrawingManager(baiduMap, {
|
isOpen: false, //是否开启绘制模式
|
enableDrawingTool: true, //是否显示工具栏
|
drawingToolOptions: {
|
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
|
offset: new BMap.Size(10, 10), //偏离值
|
},
|
polygonOptions: FENCE_AREA_OPTIONS, //多边形的样式
|
rectangleOptions: FENCE_AREA_OPTIONS //矩形的样式
|
});
|
|
// 监听绘画工具事件
|
drawingManager.addEventListener('overlaycomplete', function (e) {
|
let { overlay } = e;
|
drawingManager.close();
|
overlay.data = { type: 'fenceArea' };
|
overlay.addContextMenu(contextMenu(overlay));
|
});
|
},
|
// 添加船只
|
addShipMarker(data) {
|
let _this = this;
|
let { object_id, bdLng, bdLat, direction, type } = data;
|
let point = new BMap.Point(bdLng, bdLat);
|
|
// 查询船只信息获取船只类型，根据类型显示相应的图片
|
// PAGE_EVENT.shipInfo(object_id, d => {
|
// let { shipType } = d || {};
|
|
let shipType = type === 'uav' ? '20' : null;
|
_this.imageSize(shipType, ({name, width, height}) => {
|
let icon = new BMap.Icon(`./image/船只/${name}.png`, new BMap.Size(width, height));
|
icon.imageOriginalSize = { width, height};
|
|
// 船
|
let shipMarker = new BMap.Marker(point, {
|
rotation: direction,
|
icon: icon
|
});
|
shipMarker.data = data;
|
|
// 监听点击事件
|
// 移动的时候点击click事件不触发，改为mouseup
|
shipMarker.addEventListener('mouseup', () => {
|
PAGE_EVENT.shipId = object_id;
|
_this.shipActivate([shipMarker]);
|
PAGE_EVENT.shipInfo(object_id);
|
|
// 隐藏时间表单
|
// 清除历史轨迹/轨迹预测
|
// $('#time-query-form').addClass('layui-hide');
|
// PAGE_EVENT.map.removeLineLayer();
|
|
// 点击船只后继续执行历史轨迹/轨迹预测事件
|
let activeType = $('.line-info .line-info-item.active').data('type');
|
if (['history', 'prediction'].includes(activeType)) {
|
PAGE_EVENT[activeType]();
|
}
|
});
|
|
// 添加船只时调整图片大小
|
_this.markerSize(shipMarker)
|
baiduMap.addOverlay(shipMarker);
|
|
// 首次在地图上添加船只时，获取第一条船的信息
|
if (!_this.shipId || !ALL_SHIP[_this.shipId]) {
|
_this.shipId = object_id;
|
_this.shipActivate([shipMarker]);
|
PAGE_EVENT.realTimeShipInfo(data);
|
}
|
|
// 添加船只后调整视角
|
// let layers = baiduMap.getOverlays();
|
// let points = [];
|
// layers.forEach(item => {
|
// if (item instanceof BMap.Marker) {
|
// points.push(item.getPosition());
|
// }
|
// });
|
// baiduMap.setViewport(points);
|
});
|
// });
|
},
|
// 移除船只
|
removeShipMarker(id) {
|
let _this = this;
|
// 根据id找到指定的船只marker
|
let shipMarker = _this.getShipMarker(id);
|
if (shipMarker) {
|
// 地图上移除船只
|
baiduMap.removeOverlay(shipMarker);
|
// 移除船只移动时记录的定时器
|
delete _this.moveTimer[id];
|
}
|
|
// 如果移除是当前选中的船只，重新获取一条船的信息，更新左侧信息
|
if (id == PAGE_EVENT.shipId || !ALL_SHIP[PAGE_EVENT.shipId]) {
|
baiduMap.removeOverlay(canvasLayer);
|
|
let newKey = null;
|
// let bounds = baiduMap.getBounds();
|
for (let key in ALL_SHIP) {
|
let item = ALL_SHIP[key];
|
// let shipObj = item.find(obj => {
|
// let { object_id, bdLng, bdLat, type } = obj;
|
// let p = new BMap.Point(bdLng, bdLat);
|
// return object_id != id && type !== 'uav' && bounds.containsPoint(p);
|
// });
|
let shipObj = item.find(obj => obj.object_id != id && obj.type !== 'uav');
|
if (shipObj) {
|
newKey = key;
|
break;
|
}
|
}
|
|
if (newKey) {
|
let length = ALL_SHIP[newKey].length;
|
PAGE_EVENT.shipId = newKey;
|
PAGE_EVENT.realTimeShipInfo(ALL_SHIP[newKey][length - 1]);
|
shipMarker = _this.getShipMarker(newKey);
|
_this.shipActivate([shipMarker]);
|
PAGE_EVENT.shipInfo(newKey);
|
}
|
}
|
},
|
// 移动船只
|
moveShipMarker(data) {
|
let _this = this;
|
let { object_id: id, bdLng, bdLat, direction } = data;
|
// 根据id找到指定的船只marker
|
let shipMarker = _this.getShipMarker(id);
|
if (!shipMarker) {
|
return;
|
}
|
|
let length = ALL_SHIP[id].length;
|
if (length > 1) {
|
let lastData = ALL_SHIP[id][length - 1];
|
let p1 = new BMap.Point(lastData.bdLng, lastData.bdLat);
|
let p2 = new BMap.Point(bdLng, bdLat);
|
shipMarker.data = lastData;
|
shipMarker.setRotation(direction);
|
// 两次经纬度一致，不再移动位置
|
if (p1.equals(p2)) {
|
return;
|
}
|
_this.move(p1, p2, shipMarker);
|
}
|
|
// 更新当前船只的移动信息
|
if (id == PAGE_EVENT.shipId) {
|
let currentShipMarker = _this.getShipMarker(PAGE_EVENT.shipId);
|
if (currentShipMarker) {
|
PAGE_EVENT.realTimeShipInfo(data);
|
// 更新水波纹样式位置
|
canvasLayer && canvasLayer.draw();
|
}
|
}
|
},
|
// 获取指定船只marker
|
getShipMarker(id) {
|
// 获取所有覆盖物
|
let layers = baiduMap.getOverlays();
|
// 根据id找到指定的船只marker
|
return layers.find(item => item instanceof BMap.Marker && item.data && item.data.object_id == id);
|
},
|
// 添加轨迹路线
|
addLineLayer({data, color = '#00ff00', lineStyle = 'solid', isCircle}) {
|
let _this = this;
|
// 添加路线之前先清除上次添加的路线
|
_this.removeLineLayer();
|
|
if (!data && data.length) {
|
return;
|
}
|
|
// 根据经纬度去重
|
let d = uniqueArray(data, ['lng', 'lat']);
|
|
let points = [];
|
d.forEach(({lng, lat, dateTime}) => {
|
// gps坐标转百度
|
let bd09 = coordinateUtils.wgs84tobd09(parseFloat(lng), parseFloat(lat));
|
let p = new BMap.Point(bd09[0], bd09[1]);
|
points.push(p);
|
|
if (!isCircle) {
|
return;
|
}
|
// 绘制圆点
|
let marker = new BMap.Marker(p, {
|
icon: new BMap.Symbol(BMap_Symbol_SHAPE_CIRCLE, {
|
fillColor: color,
|
fillOpacity: 1,
|
strokeColor: color,
|
strokeOpacity: 1,
|
scale: 3
|
})
|
});
|
// 文字标注
|
let label = new BMap.Label(dateTime, {
|
position: p,
|
offset: new BMap.Size(15, -10)
|
});
|
label.setStyle({
|
border: 'none',
|
fontSize: '14px',
|
backgroundColor: 'transparent'
|
});
|
marker.addEventListener('mouseover', () => {
|
baiduMap.addOverlay(label);
|
});
|
marker.addEventListener('mouseout', () => {
|
baiduMap.removeOverlay(label);
|
});
|
baiduMap.addOverlay(marker);
|
});
|
|
// 绘制连接线
|
let polyline = new BMap.Polyline(points, {
|
strokeStyle: lineStyle,
|
strokeColor: color,
|
strokeOpacity: 1,
|
strokeWeight: 3
|
});
|
baiduMap.addOverlay(polyline);
|
// baiduMap.setViewport(points);
|
},
|
// 移除轨迹路线
|
removeLineLayer() {
|
let layers = baiduMap.getOverlays();
|
layers.forEach(item => {
|
// 移除圆
|
if (item instanceof BMap.Marker) {
|
let icon = item.getIcon();
|
if (icon instanceof BMap.Symbol) {
|
baiduMap.removeOverlay(item);
|
}
|
}
|
// 移除线、文字
|
if (item instanceof BMap.Polyline || item instanceof BMap.Label ) {
|
baiduMap.removeOverlay(item);
|
}
|
});
|
},
|
// 动态获取图片原始大小
|
imageSize(type = '53', callback) {
|
let name = SHIP_IMAGE[type] || '港口供应船';
|
let div = name && name.includes('飞行器') ? 2 : 4;
|
let img = new Image();
|
img.src = `./image/船只/${name}.png`;
|
img.onload = () => {
|
let width = (img.naturalWidth / div).toFixed(2);
|
let height = (img.naturalHeight / div).toFixed(2);
|
img = null;
|
callback && callback({name, width, height});
|
}
|
},
|
// 根据实际需求调整大小，例如缩放级别越大，图片越大
|
markerSize(marker) {
|
let setSize = _marker => {
|
if (_marker instanceof BMap.Marker) {
|
let icon = _marker.getIcon();
|
if (icon instanceof BMap.Symbol) {
|
return;
|
}
|
|
let zoom = baiduMap.getZoom();
|
let { width, height } = icon.imageOriginalSize;
|
let scale = (zoom - 12) / (19 - 12);
|
let newWidth = width * scale;
|
let newHeight = height * scale;
|
|
let size = new BMap.Size(newWidth, newHeight);
|
icon.setSize(size);
|
icon.setImageSize(size);
|
icon.setAnchor({
|
width: newWidth / 2,
|
height: newHeight / 2
|
})
|
_marker.setIcon(icon);
|
}
|
};
|
|
if (marker) {
|
setSize(marker);
|
} else {
|
let layers = baiduMap.getOverlays();
|
layers.forEach(item => setSize(item));
|
}
|
},
|
// 船只移动轨迹路线
|
move(prvePoint, newPoint, marker, polyline) {
|
let _this = this;
|
// 当前帧数
|
let currentCount = 0
|
// _当前的坐标,把球面坐标坐标转化为平面坐标
|
let _prvePoint = baiduMap.getMapType().getProjection().lngLatToPoint(prvePoint)
|
// _终点的坐标,把球面坐标坐标转化为平面坐标
|
let _newPoint = baiduMap.getMapType().getProjection().lngLatToPoint(newPoint)
|
// 运行的状态
|
let runTime = 800
|
// 每隔多长时间执行一次
|
let intervalTimer = 10
|
// 两点之间要循环定位的次数
|
let count = runTime / intervalTimer
|
|
// 记录每条船的定时器，第二次移动时移除上次未执行完的定时，防止鬼畜
|
let { object_id } = marker.data;
|
let timer = _this.moveTimer[object_id];
|
if (timer) {
|
clearInterval(timer);
|
_this.moveTimer[object_id] = null;
|
}
|
//设置定时器
|
_this.moveTimer[object_id] = setInterval(function () {
|
// 防止便利完后maker不在了
|
if (currentCount > count) {
|
clearInterval(_this.moveTimer[object_id])
|
} else {
|
currentCount++
|
let x = linear(_prvePoint.x, _newPoint.x, currentCount, count),
|
y = linear(_prvePoint.y, _newPoint.y, currentCount, count);
|
let pos = baiduMap.getMapType().getProjection().pointToLngLat(new BMap.Pixel(x, y));
|
|
//设置marker角度(两点之间的距离车的角度保持一致)
|
if (currentCount === 1) {
|
//转换角度
|
// setRotation(prvePoint, newPoint, marker)
|
}
|
//最后一次的pos等于0
|
marker.setPosition(pos);
|
if (polyline) {
|
// 移动的时候绘制线路
|
let path = polyline.getPath();
|
path.push(pos);
|
polyline.setPath(path);
|
}
|
}
|
}, intervalTimer);
|
/*
|
*缓动效果
|
*初始坐标，目标坐标，当前的步长，总的步长
|
*@param{BMap.Pixel} initPos 初始平面坐标
|
*@parm{BMap.Pixel} targetPos 目标平面坐标
|
*@param{number} 当前帧数
|
*@param {number} count 总帧数
|
*/
|
let linear = function (initPos, targetPos, currentCount, count) {
|
let b = initPos,
|
c = targetPos - initPos,
|
t = currentCount,
|
d = count;
|
return c * t / d + b;
|
}
|
|
/**
|
*在每个点的真实步骤中设置小车转动的角度
|
*/
|
let setRotation = function(curPos, targetPos, marker) {
|
let deg = 0
|
curPos = baiduMap.pointToPixel(curPos)
|
targetPos = baiduMap.pointToPixel(targetPos)
|
if (targetPos.x !== curPos.x) {
|
let tan = (targetPos.y - curPos.y) / (targetPos.x - curPos.x),
|
atan = Math.atan(tan);
|
deg = atan * 360 / (2 * Math.PI);
|
if (targetPos.x < curPos.x) {
|
deg = -deg + 90 + 90;
|
} else {
|
deg = -deg;
|
}
|
deg = -90 + deg
|
marker.setRotation(-deg);
|
|
} else {
|
let disy = targetPos.y - curPos.y;
|
let bias = 0;
|
if (disy > 0)
|
bias = -1
|
else
|
bias = 1
|
marker.setRotation(-bias * 90);
|
}
|
}
|
},
|
// 船只选中效果
|
shipActivate(markers) {
|
// 存储绘图状态和波纹数据
|
let drawingState = {
|
ctx: null,
|
canvas: null,
|
pixelPoints: [], // 存储 { x, y, name, radius, alpha }
|
animationFrameId: null,
|
lastTime: 0,
|
maxRadius: 50, // 波纹最大半径
|
rippleSpeed: 30, // 波纹扩散速度 (像素/秒)
|
startAlpha: 1 // 波纹初始透明度
|
};
|
|
// 创建 CanvasLayer 实例
|
if (canvasLayer) {
|
baiduMap.removeOverlay(canvasLayer);
|
}
|
canvasLayer = new BMap.CanvasLayer({
|
paneName: 'vertexPane',
|
update: function () {
|
let canvas = this.canvas;
|
let ctx = canvas.getContext('2d');
|
|
drawingState.ctx = ctx;
|
drawingState.canvas = canvas;
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
// 获取现有的 radius/alpha 数据，以便在移动时保留状态
|
const existingState = {};
|
drawingState.pixelPoints.forEach(p => {
|
existingState[p.id] = { radius: p.radius, alpha: p.alpha };
|
});
|
|
drawingState.pixelPoints = markers.filter(marker => !!marker).map(marker => {
|
let { object_id } = marker.data;
|
let point = marker.getPosition();
|
let pixel = baiduMap.pointToPixel(point);
|
const oldState = existingState[object_id];
|
return {
|
x: pixel.x,
|
y: pixel.y,
|
// 保留旧的状态或创建新的，初始半径以错开动画
|
id: object_id,
|
radius: oldState ? oldState.radius : drawingState.maxRadius,
|
alpha: oldState ? oldState.alpha : drawingState.startAlpha
|
};
|
});
|
|
if (!drawingState.animationFrameId) {
|
startAnimation();
|
}
|
|
return true;
|
}
|
});
|
|
baiduMap.addOverlay(canvasLayer);
|
// 设置canvasLayer父元素层级，防止阻挡绘制工具
|
$(canvasLayer.canvas).parent().css('z-index', 100);
|
|
// 定义并启动动画循环
|
function animate() {
|
drawingState.animationFrameId = requestAnimationFrame(animate);
|
|
if (!drawingState.ctx) return;
|
|
let ctx = drawingState.ctx;
|
let canvas = drawingState.canvas;
|
let now = performance.now();
|
let deltaTime = (now - drawingState.lastTime) / 1000;
|
drawingState.lastTime = now;
|
|
// 清空 Canvas
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
let maxRadius = drawingState.maxRadius;
|
let speed = drawingState.rippleSpeed;
|
let startAlpha = drawingState.startAlpha;
|
|
// 绘制每个点及其波纹
|
drawingState.pixelPoints.forEach(p => {
|
// 更新状态：半径变大
|
p.radius += speed * deltaTime;
|
|
// 如果半径超出范围，则重置
|
if (p.radius >= maxRadius) {
|
p.radius = 0; // 重置半径
|
p.alpha = startAlpha; // 重置透明度
|
} else {
|
// 透明度随半径变大而减小
|
p.alpha = startAlpha * (1 - (p.radius / maxRadius));
|
}
|
|
// 绘制扩散的实心圆
|
ctx.beginPath();
|
ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
|
ctx.fillStyle = `rgba(0, 255, 0, ${p.alpha})`; // 使用计算出的透明度
|
ctx.fill();
|
});
|
}
|
|
// 启动动画
|
function startAnimation() {
|
if (!drawingState.animationFrameId) {
|
drawingState.lastTime = performance.now();
|
animate();
|
}
|
}
|
},
|
// 清除覆盖物
|
clearOverlays(type) {
|
let overlays = baiduMap.getOverlays();
|
overlays.forEach(item => {
|
if (item?.data?.type === type) {
|
baiduMap.removeOverlay(item);
|
}
|
});
|
}
|
},
|
// mqtt船只实时信息
|
realTime() {
|
// 根据mqtt订阅更新地图右下角服务器状态
|
const $status = $('#map-status .layui-badge-dot');
|
const statusColor = { good: 'layui-bg-green', bad: 'layui-bg-red'};
|
// mqtt配置信息
|
const host = 'ws://10.5.226.53:8083/mqtt';
|
const sendTopic = ['dfAddTrack','dfAddObj','dfRemoveObj','uavAddObj','uavAddTrack','uavRemoveObj'];
|
const qos = 0;
|
const mqttOptions = {
|
keepalive: 60,
|
clean: true,
|
username: 'eadpoint',
|
password: '321123',
|
connectTimeout: 10000,
|
reconnectPeriod: 3000
|
};
|
|
console.log('Connecting mqtt client')
|
const client = mqtt.connect(host, mqttOptions);
|
|
// 连接异常时触发
|
client.on('error', (err) => {
|
console.log('Connection error: ', err);
|
$status.removeClass(statusColor.good);
|
$status.addClass(statusColor.bad);
|
// client.end()
|
});
|
// 重新自动连接时触发
|
client.on('reconnect', () => {
|
console.log('Reconnecting...');
|
});
|
// 连接成功时触发
|
client.on('connect', () => {
|
$status.addClass(statusColor.good);
|
$status.removeClass(statusColor.bad);
|
client.subscribe(sendTopic, { qos }, (error) => {
|
if (error) {
|
console.log('Subscribe error:', error);
|
}
|
});
|
});
|
// 收到发布消息时触发
|
client.on('message', (topic, payload) => {
|
let resData = JSON.parse(payload.toString());
|
if ([sendTopic[0], sendTopic[1], sendTopic[3], sendTopic[4]].includes(topic)) {
|
let { object_id, lng, lat } = resData;
|
// gps坐标转百度
|
let bd09 = coordinateUtils.wgs84tobd09(lng, lat);
|
resData.bdLng = bd09[0];
|
resData.bdLat = bd09[1];
|
// 记录数据时间
|
resData.realTime = Date.now();
|
// 添加船只路径点
|
if (!ALL_SHIP[object_id]) {
|
ALL_SHIP[object_id] = [];
|
}
|
ALL_SHIP[object_id].push(resData);
|
if ([sendTopic[3], sendTopic[4]].includes(topic)) {
|
console.log('无人机信息', resData)
|
}
|
} else if ([sendTopic[2], sendTopic[5]].includes(topic)) {
|
// 移除船只
|
let object_id = typeof resData === 'object' ? resData.object_id : resData;
|
delete ALL_SHIP[object_id];
|
}
|
checkShip();
|
});
|
|
// mqtt移除事件可能会不及时反馈
|
// 检测船只是否长时间（30秒）未移动
|
let checkShip = layui.throttle(function() {
|
let layers = baiduMap.getOverlays();
|
layers.forEach(item => {
|
if (item instanceof BMap.Marker) {
|
let id = item?.data?.object_id;
|
if (!id) {
|
return;
|
}
|
|
let data = ALL_SHIP[id];
|
if (data) {
|
let length = data.length;
|
let { object_id, realTime } = data[length - 1];
|
let now = Date.now();
|
if ((now - realTime) > 1000 * 30) {
|
// 超过30秒没添加过数据，则移除该船只
|
console.log('超时未移动，移除船只：', object_id)
|
delete ALL_SHIP[object_id];
|
}
|
} else {
|
delete ALL_SHIP[id];
|
}
|
}
|
});
|
}, 1000 * 10);
|
},
|
// 查询船只信息
|
shipInfo(objectId, callback) {
|
REQUEST.ajax({
|
url: '/ship/findDtRadarBoatMsg',
|
params: {
|
objectId,
|
stationId: SHIP_CHANNEL[SHIP_CHANNEL.current].id,
|
},
|
success(data) {
|
let renderHtml = d => {
|
if (d) {
|
let $shipInfo = $('.ship-info-card');
|
let tpl = shipInfoTpl.innerHTML;
|
laytpl(tpl).render(d, function(html) {
|
$shipInfo.replaceWith(html);
|
});
|
}
|
}
|
if (callback) {
|
callback(data);
|
} else {
|
renderHtml(data);
|
}
|
},
|
isLoading: false,
|
isAlert: false
|
});
|
},
|
// 船只移动实时信息
|
realTimeShipInfo: layui.debounce(function(data) {
|
let $locationInfo = $('.location-info-card');
|
let tpl = locationInfoTpl.innerHTML;
|
laytpl(tpl).render(data, function(html) {
|
$locationInfo.replaceWith(html);
|
});
|
}, 100),
|
// 实时监控画面
|
camera() {
|
let name = SHIP_CHANNEL[SHIP_CHANNEL.current].name;
|
this.open({
|
title: false,
|
content: `../a.html?site=${name}基站`
|
});
|
},
|
// 历史轨迹
|
history(params = {}) {
|
let _this = this;
|
let date = new Date();
|
let end = layui.util.toDateString(date, 'yyyy-MM-dd HH:mm:ss');
|
date.setDate(date.getDate() - 1);
|
let start = layui.util.toDateString(date, 'yyyy-MM-dd HH:mm:ss');
|
$('#start-time').val(start);
|
$('#end-time').val(end);
|
REQUEST.ajax({
|
url: '/ship/queryRadarBoatHistory',
|
params: {
|
objectId: _this.shipId,
|
stationId: SHIP_CHANNEL[SHIP_CHANNEL.current].id,
|
startTime: $('#start-time').val(),
|
endTime: $('#end-time').val(),
|
...params
|
},
|
success(data) {
|
_this.map.addLineLayer({
|
data,
|
isCircle: true
|
});
|
}
|
});
|
},
|
// 预测
|
prediction() {
|
let _this = this;
|
REQUEST.ajax({
|
url: '/ship/trajectoryPrediction',
|
params: {
|
list: _this.shipId,
|
stationId: SHIP_CHANNEL[SHIP_CHANNEL.current].id
|
},
|
success(data) {
|
_this.map.addLineLayer({
|
data: data[_this.shipId],
|
color: '#fff',
|
lineStyle: 'dashed'
|
});
|
}
|
});
|
},
|
// 3D全景视角
|
'3d'() {
|
this.open({
|
title: '3D全景视角',
|
content: '../index2.html',
|
success(layero, index) {
|
let current = SHIP_CHANNEL['current'];
|
let data = {
|
"lat": SHIP_CHANNEL[current].wgsLat,
|
"lng": SHIP_CHANNEL[current].wgsLng,
|
"alt": 445.6,
|
"heading": 341.8,
|
"pitch": -9.9,
|
"name": SHIP_CHANNEL[current].nameEn,
|
"object_id": PAGE_EVENT.shipId
|
};
|
console.log(SHIP_CHANNEL['current'], data)
|
let iframe = window[`layui-layer-iframe${index}`];
|
iframe.postMessage(data, '*');
|
},
|
});
|
},
|
// 整体三维视角
|
all3d() {
|
this.open({
|
title: '三维视角',
|
content: '../index2.html',
|
success(layero, index) {
|
let current = SHIP_CHANNEL['current'];
|
let data = {
|
"lat": SHIP_CHANNEL[current].wgsLat,
|
"lng": SHIP_CHANNEL[current].wgsLng,
|
"alt": 445.6,
|
"heading": 341.8,
|
"pitch": -9.9,
|
"name": SHIP_CHANNEL[current].nameEn
|
};
|
let iframe = window[`layui-layer-iframe${index}`];
|
iframe.postMessage(data, '*');
|
},
|
end() {
|
$('#map-type .map-type-item').eq(0).click();
|
}
|
});
|
},
|
// 打开弹框
|
open(options) {
|
layer.open({
|
type: 2,
|
area: ['1000px', '700px'],
|
...options
|
});
|
},
|
// 查询电子围栏
|
fenceArea() {
|
let _this = this;
|
REQUEST.ajax({
|
url: '/fenceArea/findList',
|
params: {
|
stationId: SHIP_CHANNEL[SHIP_CHANNEL.current].id
|
},
|
success(data) {
|
if (!data?.length) {
|
return;
|
}
|
|
try {
|
let polygons = [];
|
let polygonType = 'fenceArea';
|
_this.map.clearOverlays(polygonType);
|
for (let d of data) {
|
let { id, coordinate } = d;
|
coordinate = JSON.parse(coordinate);
|
let points = [];
|
for (let item of coordinate) {
|
let { lng, lat } = item;
|
let bd09 = coordinateUtils.wgs84tobd09(lng, lat);
|
points.push(new BMap.Point(bd09[0], bd09[1]));
|
}
|
let polygon = new BMap.Polygon(points, FENCE_AREA_OPTIONS);
|
polygon.data = {
|
id,
|
type: polygonType
|
};
|
polygon.addContextMenu(contextMenu(polygon));
|
baiduMap.addOverlay(polygon);
|
polygons.push(polygon);
|
}
|
SHIP_CHANNEL[SHIP_CHANNEL.current].polygon = polygons;
|
} catch (e) {
|
console.error(e);
|
}
|
}
|
});
|
},
|
// 保存电子围栏
|
saveFenceArea(overlay) {
|
let path = overlay.getPath();
|
if (!path?.length) {
|
return;
|
}
|
|
// 清除之前保存的电子围栏
|
let polygon = SHIP_CHANNEL[SHIP_CHANNEL.current].polygon;
|
if (polygon?.length) {
|
polygon.forEach(item => this.deleteFenceArea(item));
|
}
|
|
// 百度经纬度转gps
|
let coordinates = [];
|
for (let i = 0; i < path.length; i++) {
|
let { lng, lat } = path[i];
|
let wgs = coordinateUtils.bd09towgs84(lng, lat);
|
coordinates[i] = {
|
lng: wgs[0],
|
lat: wgs[1]
|
}
|
}
|
|
REQUEST.ajax({
|
url: '/fenceArea/save',
|
type: 'POST',
|
params: JSON.stringify({
|
coordinates,
|
stationId: SHIP_CHANNEL[SHIP_CHANNEL.current].id
|
}),
|
success(data) {
|
if (data) {
|
showMsg('保存成功');
|
overlay.data = {
|
id: data,
|
type: 'fenceArea'
|
};
|
overlay.removeContextMenu();
|
overlay.addContextMenu(contextMenu(overlay));
|
if (polygon?.length) {
|
SHIP_CHANNEL[SHIP_CHANNEL.current].polygon.push(overlay);
|
} else {
|
SHIP_CHANNEL[SHIP_CHANNEL.current].polygon = [overlay];
|
}
|
}
|
}
|
});
|
},
|
// 删除电子围栏
|
deleteFenceArea(overlay) {
|
let { id } = overlay.data;
|
REQUEST.ajax({
|
url: '/fenceArea/delete',
|
type: 'DELETE',
|
params: {
|
id
|
},
|
success(data) {
|
console.log(data);
|
let polygon = SHIP_CHANNEL[SHIP_CHANNEL.current].polygon;
|
SHIP_CHANNEL[SHIP_CHANNEL.current].polygon = polygon.filter(item => item.data.id !== id );
|
baiduMap.removeOverlay(overlay);
|
}
|
});
|
},
|
// 无人机信息
|
uavInfo() {
|
REQUEST.ajax({
|
url: '/uav/findUav',
|
params: {
|
stationId: SHIP_CHANNEL[SHIP_CHANNEL.current].id
|
},
|
success(data) {
|
if (!data?.length) {
|
return;
|
}
|
|
let { uavLng, uavLat } = data[0];
|
data[0].uavLng = uavLng.substr(0, 12);
|
data[0].uavLat = uavLat.substr(0, 11);
|
|
let $uavInfo = $('.uav-info-card');
|
let tpl = uavInfoTpl.innerHTML;
|
laytpl(tpl).render(data[0], function(html) {
|
$uavInfo.replaceWith(html);
|
});
|
}
|
});
|
}
|
};
|
|
// 历史轨迹时间选择
|
laydate.render({
|
elem: '#time-dom',
|
type: 'datetime',
|
rangeLinked: true,
|
range: ['#start-time', '#end-time'],
|
done(value) {
|
let times = value.split(' - ');
|
PAGE_EVENT.history({
|
startTime: times[0],
|
endTime: times[1]
|
});
|
}
|
});
|
|
// 子页面获取数据
|
window.addEventListener('message', e => {
|
let channel = e.data;
|
if (typeof channel === 'object') {
|
return;
|
}
|
|
$('.layui-header .layui-nav .layui-nav-item').each((index, item) => {
|
let text = $(item).text();
|
if(text.includes(channel)){
|
$(item).find('.channel').click();
|
}
|
});
|
});
|
|
// 页面加载完毕后执行
|
$(function () {
|
// 初始化地图
|
PAGE_EVENT.map.init();
|
// mqtt实时信息
|
PAGE_EVENT.realTime();
|
// 显示当前航道电子围栏
|
PAGE_EVENT.fenceArea();
|
// 显示无人机信息
|
PAGE_EVENT.uavInfo();
|
});
|
|
// 航道点击事件
|
element.on('nav(channel-nav)', function(elem){
|
let value = $(elem).data('value');
|
SHIP_CHANNEL.current = value;
|
let { lng, lat } = SHIP_CHANNEL[value];
|
baiduMap.panTo(new BMap.Point(lng, lat));
|
PAGE_EVENT.fenceArea();
|
PAGE_EVENT.uavInfo();
|
});
|
|
// 航线信息点击事件
|
$(document).on('click', '.line-info .line-info-item', function () {
|
let _this = this;
|
let activeClass = 'active';
|
let type = $(_this).data('type');
|
|
$('.line-info-item').removeClass(activeClass);
|
$(_this).addClass(activeClass);
|
if (type === 'history') {
|
$('#time-query-form').removeClass('layui-hide');
|
} else {
|
$('#time-query-form').addClass('layui-hide');
|
}
|
|
PAGE_EVENT.map.removeLineLayer();
|
PAGE_EVENT[type]();
|
});
|
|
// 地图类型切换事件
|
$(document).on('click', '#map-type .map-type-item', function () {
|
let _this = this;
|
let activeClass = 'active';
|
let toggleClass = 'toggle-active';
|
let type = $(_this).data('type');
|
|
$('#map-type .map-type-item').removeClass(activeClass);
|
$(_this).addClass(activeClass);
|
if (type === 'map') {
|
$('#map-type .map-type-slider').removeClass(toggleClass);
|
} else {
|
$('#map-type .map-type-slider').addClass(toggleClass);
|
PAGE_EVENT.all3d();
|
}
|
});
|
|
// 使用Proxy监视对象变化
|
function deepObserve(target) {
|
const handler = {
|
get(target, prop) {
|
const value = target[prop];
|
if (typeof value === 'object' && value !== null) {
|
return deepObserve(value);
|
}
|
return value;
|
},
|
set(target, prop, value) {
|
// 过滤掉对象数组 length 属性的设置
|
if (prop === 'length' && Array.isArray(target)) {
|
return Reflect.set(target, prop, value);
|
}
|
|
if (Array.isArray(target)) {
|
let length = target.length;
|
if (length === 1) {
|
// 只有一条数据，在地图上创建船只
|
PAGE_EVENT.map.addShipMarker(value);
|
} else {
|
// 移动船只
|
PAGE_EVENT.map.moveShipMarker(value);
|
}
|
}
|
|
return Reflect.set(target, prop, value);
|
},
|
deleteProperty(target, prop) {
|
// 移除船只
|
PAGE_EVENT.map.removeShipMarker(prop);
|
return Reflect.deleteProperty(target, prop);
|
}
|
};
|
|
return new Proxy(target, handler);
|
}
|
|
// 根据经纬度去重
|
function uniqueArray(data, keys) {
|
const map = new Map();
|
return data.filter(item => {
|
const key = keys.map(k => item[k]).join('|');
|
if (map.has(key)) {
|
return false;
|
}
|
map.set(key, true);
|
return true;
|
});
|
}
|
|
// 绘制电子围栏的右键菜单
|
function contextMenu(overlay) {
|
let contextMenu = new BMap.ContextMenu();
|
let id = overlay?.data?.id;
|
if (!id) {
|
contextMenu.addItem(new BMap.MenuItem('保存电子围栏', function () {
|
let polygon = SHIP_CHANNEL[SHIP_CHANNEL.current].polygon;
|
if (polygon?.length) {
|
layer.confirm(`当前航道已存在电子围栏，是否覆盖？`, function(index){
|
layer.close(index);
|
PAGE_EVENT.saveFenceArea(overlay);
|
}, function () {
|
baiduMap.removeOverlay(overlay);
|
});
|
} else {
|
PAGE_EVENT.saveFenceArea(overlay);
|
}
|
}));
|
contextMenu.addSeparator();
|
}
|
contextMenu.addItem(new BMap.MenuItem('删除电子围栏', function () {
|
if (id) {
|
PAGE_EVENT.deleteFenceArea(overlay);
|
} else {
|
baiduMap.removeOverlay(overlay);
|
}
|
}));
|
return contextMenu;
|
}
|
|
function showMsg(msg, type, callback) {
|
return layer.msg(msg, {
|
anim: type,
|
time: type !== 6 ? 1000 : 3000
|
}, callback);
|
}
|
|
function showLoading() {
|
return layer.load(2, {
|
shade: 0.1
|
});
|
}
|
|
function closeLoading(index) {
|
if (index) {
|
layer.close(index);
|
} else {
|
layer.closeAll();
|
}
|
}
|
|
})
|
