切换背景为地图
This commit is contained in:
parent
896d64fd11
commit
79776f5e9c
@ -6,7 +6,7 @@ VITE_APP_ENV = 'production'
|
||||
# 地址替换时间20250427
|
||||
|
||||
# base_url
|
||||
VITE_APP_BASE_API='http://10.0.202:9123'
|
||||
VITE_APP_BASE_API='http://14.103.162.172:9123'
|
||||
|
||||
# 可安可
|
||||
VITE_APP_CONCOAI_API='https://rest.concoai.com'
|
||||
|
||||
BIN
src/assets/img/position.png
Normal file
BIN
src/assets/img/position.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
876
src/assets/js/custom_map_config.json
Normal file
876
src/assets/js/custom_map_config.json
Normal file
@ -0,0 +1,876 @@
|
||||
[{
|
||||
"featureType": "background",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "land",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"color": "#003044ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "building",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": {
|
||||
"color": "#002435ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "building",
|
||||
"elementType": "geometry.stroke",
|
||||
"stylers": {
|
||||
"color": "#00121cff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "road",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": {
|
||||
"color": "#066f6dff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "road",
|
||||
"elementType": "geometry.stroke",
|
||||
"stylers": {
|
||||
"color": "#004c45ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "water",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": {
|
||||
"color": "#07A7A2ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "water",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"color": "#133f58ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "country",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": {
|
||||
"color": "#07A7A2ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "city",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": {
|
||||
"color": "#07A7A2ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "continent",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": {
|
||||
"color": "#07A7A2ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "village",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": {
|
||||
"color": "#07A7A2ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "town",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": {
|
||||
"color": "#07A7A2ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "district",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": {
|
||||
"color": "#07A7A2ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "districtlabel",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": {
|
||||
"color": "#07A7A2ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "districtlabel",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": {
|
||||
"color": "#078381ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "poilabel",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": {
|
||||
"color": "#07A7A2ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "poilabel",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": {
|
||||
"color": "#002738ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "poilabel",
|
||||
"elementType": "labels.icon",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}, {
|
||||
"featureType": "scenicspotslabel",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": {
|
||||
"color": "#07A7A2ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "scenicspotslabel",
|
||||
"elementType": "labels.icon",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}, {
|
||||
"featureType": "transportationlabel",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": {
|
||||
"color": "#07A7A2ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "transportationlabel",
|
||||
"elementType": "labels.icon",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}, {
|
||||
"featureType": "airportlabel",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": {
|
||||
"color": "#07A7A2ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "airportlabel",
|
||||
"elementType": "labels.icon",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}, {
|
||||
"featureType": "green",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"color": "#0c364cff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "district",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": {
|
||||
"color": "#078381ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "city",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": {
|
||||
"color": "#078381ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "country",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": {
|
||||
"color": "#078381ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "continent",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": {
|
||||
"color": "#078381ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "town",
|
||||
"elementType": "labels",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}, {
|
||||
"featureType": "village",
|
||||
"elementType": "labels",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}, {
|
||||
"featureType": "town",
|
||||
"elementType": "labels.icon",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}, {
|
||||
"featureType": "city",
|
||||
"elementType": "labels.icon",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}, {
|
||||
"featureType": "railway",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}, {
|
||||
"featureType": "subway",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}, {
|
||||
"featureType": "highwaysign",
|
||||
"elementType": "labels",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}, {
|
||||
"featureType": "nationalwaysign",
|
||||
"elementType": "labels",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}, {
|
||||
"featureType": "nationalwaysign",
|
||||
"elementType": "labels.icon",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}, {
|
||||
"featureType": "provincialwaysign",
|
||||
"elementType": "labels",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}, {
|
||||
"featureType": "provincialwaysign",
|
||||
"elementType": "labels.icon",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}, {
|
||||
"featureType": "tertiarywaysign",
|
||||
"elementType": "labels",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}, {
|
||||
"featureType": "tertiarywaysign",
|
||||
"elementType": "labels.icon",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}, {
|
||||
"featureType": "subwaylabel",
|
||||
"elementType": "labels",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}, {
|
||||
"featureType": "subwaylabel",
|
||||
"elementType": "labels.icon",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}, {
|
||||
"featureType": "road",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": {
|
||||
"color": "#07A7A2ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "road",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": {
|
||||
"color": "#078381ff",
|
||||
"weight": 1.5,
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "highway",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": {
|
||||
"color": "#078381ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "nationalway",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": {
|
||||
"color": "#078381ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "provincialway",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": {
|
||||
"color": "#078381ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "cityhighway",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": {
|
||||
"color": "#078381ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "arterial",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": {
|
||||
"color": "#078381ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "tertiaryway",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": {
|
||||
"color": "#078381ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "fourlevelway",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": {
|
||||
"color": "#078381ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "local",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": {
|
||||
"color": "#002738ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "scenicspotslabel",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": {
|
||||
"color": "#002738ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "subway",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": {
|
||||
"color": "#078381ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "shopping",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}, {
|
||||
"featureType": "manmade",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}, {
|
||||
"featureType": "manmade",
|
||||
"elementType": "labels",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}, {
|
||||
"featureType": "highwaysign",
|
||||
"elementType": "labels.icon",
|
||||
"stylers": {
|
||||
"visibility": "off"
|
||||
}
|
||||
}, {
|
||||
"featureType": "water",
|
||||
"elementType": "labels.text.stroke",
|
||||
"stylers": {
|
||||
"color": "#002e42ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "road",
|
||||
"elementType": "labels.text",
|
||||
"stylers": {
|
||||
"fontsize": 28
|
||||
}
|
||||
}, {
|
||||
"featureType": "highway",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": {
|
||||
"color": "#066f6dff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "highway",
|
||||
"elementType": "geometry.stroke",
|
||||
"stylers": {
|
||||
"color": "#004c45ff",
|
||||
"visibility": "on",
|
||||
"weight": 1.5
|
||||
}
|
||||
}, {
|
||||
"featureType": "highway",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": {
|
||||
"color": "#07A7A2ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "nationalway",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": {
|
||||
"color": "#066f6dff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "nationalway",
|
||||
"elementType": "geometry.stroke",
|
||||
"stylers": {
|
||||
"color": "#004c45ff",
|
||||
"visibility": "on",
|
||||
"weight": 1.5
|
||||
}
|
||||
}, {
|
||||
"featureType": "nationalway",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": {
|
||||
"color": "#07A7A2ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "provincialway",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": {
|
||||
"color": "#066f6dff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "cityhighway",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": {
|
||||
"color": "#066f6dff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "arterial",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": {
|
||||
"color": "#066f6dff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "tertiaryway",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": {
|
||||
"color": "#066f6dff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "fourlevelway",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": {
|
||||
"color": "#066f6dff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "local",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": {
|
||||
"color": "#066f6dff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "provincialway",
|
||||
"elementType": "geometry.stroke",
|
||||
"stylers": {
|
||||
"color": "#004c45ff",
|
||||
"visibility": "on",
|
||||
"weight": 1.5
|
||||
}
|
||||
}, {
|
||||
"featureType": "cityhighway",
|
||||
"elementType": "geometry.stroke",
|
||||
"stylers": {
|
||||
"color": "#004c45ff",
|
||||
"visibility": "on",
|
||||
"weight": 1.5
|
||||
}
|
||||
}, {
|
||||
"featureType": "arterial",
|
||||
"elementType": "geometry.stroke",
|
||||
"stylers": {
|
||||
"color": "#004c45ff",
|
||||
"visibility": "on",
|
||||
"weight": 1.5
|
||||
}
|
||||
}, {
|
||||
"featureType": "tertiaryway",
|
||||
"elementType": "geometry.stroke",
|
||||
"stylers": {
|
||||
"color": "#004c45ff",
|
||||
"visibility": "on",
|
||||
"weight": 1.5
|
||||
}
|
||||
}, {
|
||||
"featureType": "fourlevelway",
|
||||
"elementType": "geometry.stroke",
|
||||
"stylers": {
|
||||
"color": "#004c45ff",
|
||||
"visibility": "on",
|
||||
"weight": 1.5
|
||||
}
|
||||
}, {
|
||||
"featureType": "local",
|
||||
"elementType": "geometry.stroke",
|
||||
"stylers": {
|
||||
"color": "#004c45ff",
|
||||
"visibility": "on",
|
||||
"weight": 1.5
|
||||
}
|
||||
}, {
|
||||
"featureType": "nationalway",
|
||||
"stylers": {
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "6"
|
||||
}
|
||||
}, {
|
||||
"featureType": "nationalway",
|
||||
"stylers": {
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "7"
|
||||
}
|
||||
}, {
|
||||
"featureType": "nationalway",
|
||||
"stylers": {
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "8"
|
||||
}
|
||||
}, {
|
||||
"featureType": "nationalway",
|
||||
"stylers": {
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "9"
|
||||
}
|
||||
}, {
|
||||
"featureType": "nationalway",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"visibility": "off",
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "6"
|
||||
}
|
||||
}, {
|
||||
"featureType": "nationalway",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"visibility": "off",
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "7"
|
||||
}
|
||||
}, {
|
||||
"featureType": "nationalway",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"visibility": "off",
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "8"
|
||||
}
|
||||
}, {
|
||||
"featureType": "nationalway",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"visibility": "off",
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "9"
|
||||
}
|
||||
}, {
|
||||
"featureType": "nationalway",
|
||||
"elementType": "labels",
|
||||
"stylers": {
|
||||
"visibility": "off",
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "6"
|
||||
}
|
||||
}, {
|
||||
"featureType": "nationalway",
|
||||
"elementType": "labels",
|
||||
"stylers": {
|
||||
"visibility": "off",
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "7"
|
||||
}
|
||||
}, {
|
||||
"featureType": "nationalway",
|
||||
"elementType": "labels",
|
||||
"stylers": {
|
||||
"visibility": "off",
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "8"
|
||||
}
|
||||
}, {
|
||||
"featureType": "nationalway",
|
||||
"elementType": "labels",
|
||||
"stylers": {
|
||||
"visibility": "off",
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "9"
|
||||
}
|
||||
}, {
|
||||
"featureType": "provincialway",
|
||||
"stylers": {
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "8,10",
|
||||
"level": "8"
|
||||
}
|
||||
}, {
|
||||
"featureType": "provincialway",
|
||||
"stylers": {
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "8,10",
|
||||
"level": "9"
|
||||
}
|
||||
}, {
|
||||
"featureType": "provincialway",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"visibility": "off",
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "8,10",
|
||||
"level": "8"
|
||||
}
|
||||
}, {
|
||||
"featureType": "provincialway",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"visibility": "off",
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "8,10",
|
||||
"level": "9"
|
||||
}
|
||||
}, {
|
||||
"featureType": "provincialway",
|
||||
"elementType": "labels",
|
||||
"stylers": {
|
||||
"visibility": "off",
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "8,10",
|
||||
"level": "8"
|
||||
}
|
||||
}, {
|
||||
"featureType": "provincialway",
|
||||
"elementType": "labels",
|
||||
"stylers": {
|
||||
"visibility": "off",
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "8,10",
|
||||
"level": "9"
|
||||
}
|
||||
}, {
|
||||
"featureType": "cityhighway",
|
||||
"stylers": {
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "6"
|
||||
}
|
||||
}, {
|
||||
"featureType": "cityhighway",
|
||||
"stylers": {
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "7"
|
||||
}
|
||||
}, {
|
||||
"featureType": "cityhighway",
|
||||
"stylers": {
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "8"
|
||||
}
|
||||
}, {
|
||||
"featureType": "cityhighway",
|
||||
"stylers": {
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "9"
|
||||
}
|
||||
}, {
|
||||
"featureType": "cityhighway",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"visibility": "off",
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "6"
|
||||
}
|
||||
}, {
|
||||
"featureType": "cityhighway",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"visibility": "off",
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "7"
|
||||
}
|
||||
}, {
|
||||
"featureType": "cityhighway",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"visibility": "off",
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "8"
|
||||
}
|
||||
}, {
|
||||
"featureType": "cityhighway",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"visibility": "off",
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "9"
|
||||
}
|
||||
}, {
|
||||
"featureType": "cityhighway",
|
||||
"elementType": "labels",
|
||||
"stylers": {
|
||||
"visibility": "off",
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "6"
|
||||
}
|
||||
}, {
|
||||
"featureType": "cityhighway",
|
||||
"elementType": "labels",
|
||||
"stylers": {
|
||||
"visibility": "off",
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "7"
|
||||
}
|
||||
}, {
|
||||
"featureType": "cityhighway",
|
||||
"elementType": "labels",
|
||||
"stylers": {
|
||||
"visibility": "off",
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "8"
|
||||
}
|
||||
}, {
|
||||
"featureType": "cityhighway",
|
||||
"elementType": "labels",
|
||||
"stylers": {
|
||||
"visibility": "off",
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "6,9",
|
||||
"level": "9"
|
||||
}
|
||||
}, {
|
||||
"featureType": "arterial",
|
||||
"stylers": {
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "9,9",
|
||||
"level": "9"
|
||||
}
|
||||
}, {
|
||||
"featureType": "arterial",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"visibility": "off",
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "9,9",
|
||||
"level": "9"
|
||||
}
|
||||
}, {
|
||||
"featureType": "arterial",
|
||||
"elementType": "labels",
|
||||
"stylers": {
|
||||
"visibility": "off",
|
||||
"curZoomRegionId": "0",
|
||||
"curZoomRegion": "9,9",
|
||||
"level": "9"
|
||||
}
|
||||
}, {
|
||||
"featureType": "local",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": {
|
||||
"color": "#07A7A2ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "fourlevelway",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": {
|
||||
"color": "#07A7A2ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "tertiaryway",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": {
|
||||
"color": "#07A7A2ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "arterial",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": {
|
||||
"color": "#07A7A2ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "cityhighway",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": {
|
||||
"color": "#07A7A2ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "provincialway",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": {
|
||||
"color": "#07A7A2ff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}, {
|
||||
"featureType": "scenicspots",
|
||||
"elementType": "geometry",
|
||||
"stylers": {
|
||||
"color": "#0c364cff",
|
||||
"visibility": "on"
|
||||
}
|
||||
}]
|
||||
@ -1,11 +1,13 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<!-- 地图容器 -->
|
||||
<div id="map-container" class="map-container"></div>
|
||||
<!-- 渐变边框 -->
|
||||
<div class="border-gradient top"></div>
|
||||
<div class="border-gradient bottom"></div>
|
||||
<div class="border-gradient left"></div>
|
||||
<div class="border-gradient right"></div>
|
||||
<div class="center_tip">
|
||||
<!-- <div class="center_tip">
|
||||
<div class="center-tip-content">
|
||||
<template v-for="robot in outdoorRobots" :key="robot.id">
|
||||
<div class="center-tip-robot" @click="handleRobotClick(robot.id)">
|
||||
@ -18,7 +20,7 @@
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- 顶部组件 -->
|
||||
<TopHeader />
|
||||
|
||||
@ -121,6 +123,8 @@ import Icon3 from '../assets/img/icon3.png'
|
||||
import Icon4 from '../assets/img/icon4.png'
|
||||
import jkA from '../assets/img/jkA.png'
|
||||
import jkRobot from '../assets/img/jkRobot.png'
|
||||
import customMapStyle from '../assets/js/custom_map_config.json'
|
||||
import position from '../assets/img/position.png'
|
||||
|
||||
|
||||
// 统计数据
|
||||
@ -323,7 +327,148 @@ function handleRobotClick(id) {
|
||||
onMounted(() => {
|
||||
fetchRobotStatistics();
|
||||
fetchMonitorStreams();
|
||||
loadMapScript();
|
||||
});
|
||||
|
||||
// 地图实例
|
||||
const map = ref(null);
|
||||
|
||||
const loadMapScript = () => {
|
||||
// 此处在所需页面引入资源就是,不用再public/index.html中引入
|
||||
const script = document.createElement("script");
|
||||
script.type = "text/javascript";
|
||||
script.className = "loadmap";
|
||||
// 此处需要注意：申请ak时,一定要应用类别一定要选浏览器端,不能选服务端,不然地图会报ak无效
|
||||
script.src =
|
||||
"https://api.map.baidu.com/getscript?v=3.0&ak=qyF9CAmGoZ2jZrKXqW7q3OaWV7wkgqjn";
|
||||
script.onload = () => {
|
||||
init();
|
||||
};
|
||||
let loadmap = document.getElementsByClassName("loadmap");
|
||||
if (loadmap.length > 0) {
|
||||
// 每次append script之前判断一下,避免重复添加script资源标签
|
||||
for (let i = 0; i < loadmap.length; i++) {
|
||||
document.body.removeChild(loadmap[i]);
|
||||
}
|
||||
}
|
||||
document.body.appendChild(script);
|
||||
};
|
||||
|
||||
const init = () => {
|
||||
let BMap = window.BMap; // 注意要带window,不然会报错
|
||||
map.value = new BMap.Map("map-container");
|
||||
const centerPoint = new BMap.Point(121.544962, 30.844821); // 上海康达新能源材料有限公司坐标
|
||||
map.value.centerAndZoom(centerPoint, 22); // 放大到22级，更近距离显示
|
||||
map.value.enableScrollWheelZoom(true);
|
||||
|
||||
// 使用自定义地图样式
|
||||
map.value.setMapStyleV2({styleJson: customMapStyle});
|
||||
|
||||
map.value.disableDoubleClickZoom();
|
||||
|
||||
// 设置地图缩放限制
|
||||
map.value.setMinZoom(18); // 最小缩放级别为18
|
||||
map.value.setMaxZoom(25); // 最大缩放级别为25
|
||||
|
||||
// 自定义图标
|
||||
const myIcon = new BMap.Icon(
|
||||
position, // 图标路径
|
||||
new BMap.Size(32, 40), // 调整图标大小，确保底部完全显示
|
||||
{
|
||||
imageOffset: new BMap.Size(0, 0), // 图片偏移
|
||||
anchor: new BMap.Size(16, 40) // 调整锚点位置，确保图标底部对准坐标点
|
||||
}
|
||||
);
|
||||
|
||||
// 添加标记点并使用自定义图标
|
||||
const marker = new BMap.Marker(centerPoint, { icon: myIcon }); // 创建标记
|
||||
map.value.addOverlay(marker); // 将标记添加到地图中
|
||||
|
||||
// 为全局window对象添加点击处理函数，供标签内的点击事件使用
|
||||
window.handleRobotClick = (id) => {
|
||||
// 获取对应机器人的状态
|
||||
const robot = outdoorRobots.value.find(r => r.id === id);
|
||||
// 如果机器人状态为离线，则不跳转
|
||||
if (robot && robot.status === '离线') {
|
||||
console.log('机器人离线，不跳转');
|
||||
return;
|
||||
}
|
||||
// 否则正常跳转
|
||||
handleRobotClick(id);
|
||||
};
|
||||
|
||||
// 创建自定义标签内容
|
||||
const createLabelContent = () => {
|
||||
let content = '<div class="center-tip-content">';
|
||||
|
||||
// 遍历室外机器人数据
|
||||
outdoorRobots.value.forEach(robot => {
|
||||
// 为离线状态的机器人添加特殊样式
|
||||
const offlineClass = robot.status === '离线' ? 'robot-offline' : '';
|
||||
|
||||
content += `
|
||||
<div class="center-tip-robot ${offlineClass}" onclick="window.handleRobotClick('${robot.id}')">
|
||||
<span class="robot-id">${robot.id}</span>
|
||||
<span class="divider">|</span>
|
||||
<span class="robot-power">电量：${robot.battery}%</span>
|
||||
<span class="divider">|</span>
|
||||
<span class="robot-status">${robot.status}</span>
|
||||
<span class="alarm-btn">${robotAlertMap.value[robot.id] > 0 ? '有告警' : '无告警'}</span>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
content += '</div>';
|
||||
return content;
|
||||
};
|
||||
|
||||
// 创建标签
|
||||
let opts = {
|
||||
position: centerPoint,
|
||||
offset: new BMap.Size(-130, -80) // 上移60px
|
||||
};
|
||||
|
||||
let label = new BMap.Label(createLabelContent(), opts);
|
||||
|
||||
// 设置标签样式
|
||||
label.setStyle({
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
backgroundColor: "rgba(0,0,0,0.4)",
|
||||
zIndex: "2",
|
||||
borderRadius: "6px",
|
||||
fontSize: "12px",
|
||||
});
|
||||
|
||||
// 添加标签到地图
|
||||
map.value.addOverlay(label);
|
||||
|
||||
// 更新标签位置的函数
|
||||
const updateLabelPosition = () => {
|
||||
const pixel = map.value.pointToOverlayPixel(centerPoint);
|
||||
label.setPosition(centerPoint);
|
||||
};
|
||||
|
||||
// 更新标签内容的函数
|
||||
const updateLabelContent = () => {
|
||||
label.setContent(createLabelContent());
|
||||
};
|
||||
|
||||
// 监听室外机器人数据变化，更新标签内容
|
||||
watch(outdoorRobots, () => {
|
||||
updateLabelContent();
|
||||
});
|
||||
|
||||
// 监听告警数据变化，更新标签内容
|
||||
watch(robotAlertMap, () => {
|
||||
updateLabelContent();
|
||||
}, { deep: true });
|
||||
|
||||
// 添加地图事件监听
|
||||
map.value.addEventListener('zoomend', updateLabelPosition);
|
||||
map.value.addEventListener('moveend', updateLabelPosition);
|
||||
map.value.addEventListener('resize', updateLabelPosition);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -331,9 +476,17 @@ onMounted(() => {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: url("../assets/img/bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
background-color: #001520;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.left_content,
|
||||
@ -441,7 +594,7 @@ onMounted(() => {
|
||||
left: 25%;
|
||||
right: 25%;
|
||||
bottom: 1.667vw; /* 32px at 1920px width */
|
||||
z-index: 2;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.monitor-title {
|
||||
@ -542,58 +695,58 @@ onMounted(() => {
|
||||
|
||||
.center_tip {
|
||||
position: absolute;
|
||||
|
||||
top: 42%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 2000;
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: auto;
|
||||
pointer-events: none; /* 允许点击穿透到地图 */
|
||||
}
|
||||
.center-tip-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 6px;
|
||||
padding: 0.5vw 1vw; /* 5px 24px */
|
||||
font-size: 14px;
|
||||
color: #B9E8FF;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
|
||||
gap: 0.3vw; /* 12px */
|
||||
}
|
||||
.center-tip-content .robot-id {
|
||||
|
||||
color: #B9E8FF;
|
||||
}
|
||||
.center-tip-content .divider {
|
||||
color: #B9E8FF;
|
||||
margin: 0 0.417vw;
|
||||
}
|
||||
.center-tip-content .robot-power {
|
||||
color: #B9E8FF;
|
||||
}
|
||||
.center-tip-content .robot-status {
|
||||
color: #B9E8FF;
|
||||
}
|
||||
.center-tip-content .alarm-btn {
|
||||
</style>
|
||||
<style>
|
||||
.alarm-btn {
|
||||
background: #FF9800;
|
||||
color: #151515;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 0.1vw 0.3vw; /* 2.5px 19px */
|
||||
padding: 0.1vw 0.3vw;
|
||||
font-size: 12px;
|
||||
margin-left: 0.625vw;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.center-tip-robot {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
padding: 0 0.3vw;
|
||||
padding: 0.3vw;
|
||||
}
|
||||
|
||||
/* 离线状态机器人样式 */
|
||||
.robot-offline {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.robot-id {
|
||||
color: #B9E8FF;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.divider {
|
||||
color: #B9E8FF;
|
||||
margin: 0 0.417vw;
|
||||
}
|
||||
|
||||
.robot-power {
|
||||
color: #B9E8FF;
|
||||
}
|
||||
|
||||
.robot-status {
|
||||
color: #B9E8FF;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user