|
@@ -2,7 +2,7 @@
|
|
|
<div
|
|
<div
|
|
|
id="tracking-map"
|
|
id="tracking-map"
|
|
|
ref="mapContainer"
|
|
ref="mapContainer"
|
|
|
- style="width: 100%; height: 520px"
|
|
|
|
|
|
|
+ style="width: 100%; height: 448px"
|
|
|
class="tracking-map"
|
|
class="tracking-map"
|
|
|
></div>
|
|
></div>
|
|
|
</template>
|
|
</template>
|
|
@@ -272,7 +272,6 @@ let visibleMarkers = new Set()
|
|
|
|
|
|
|
|
// 添加标记后更新中心和缩放级别
|
|
// 添加标记后更新中心和缩放级别
|
|
|
const addMarkersToMap = () => {
|
|
const addMarkersToMap = () => {
|
|
|
- // debugger
|
|
|
|
|
if (!map) return // 确保地图已经初始化
|
|
if (!map) return // 确保地图已经初始化
|
|
|
|
|
|
|
|
markerPositions.value.forEach((position) => {
|
|
markerPositions.value.forEach((position) => {
|
|
@@ -302,7 +301,7 @@ const addMarkersToMap = () => {
|
|
|
if (viewData.value.length > 0) {
|
|
if (viewData.value.length > 0) {
|
|
|
// 根据标记的位置设置中心点以及缩放级别
|
|
// 根据标记的位置设置中心点以及缩放级别
|
|
|
const bounds = L.latLngBounds(viewData.value)
|
|
const bounds = L.latLngBounds(viewData.value)
|
|
|
- map!.fitBounds(bounds, { paddingTopLeft: [20, 70], paddingBottomRight: [400, 0] })
|
|
|
|
|
|
|
+ map!.fitBounds(bounds, { paddingTopLeft: [20, 70], paddingBottomRight: [0, 0] })
|
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
|
if (isFirstRender) {
|
|
if (isFirstRender) {
|
|
|
initialCenter = map!.getCenter()
|
|
initialCenter = map!.getCenter()
|
|
@@ -344,7 +343,6 @@ const addShipMarker = (x: number) => {
|
|
|
// 获取线段的最后一个点和倒数第二个点
|
|
// 获取线段的最后一个点和倒数第二个点
|
|
|
const lastPoint = solidLine[solidLine.length - 1]
|
|
const lastPoint = solidLine[solidLine.length - 1]
|
|
|
const secondLastPoint = solidLine[solidLine.length - 2]
|
|
const secondLastPoint = solidLine[solidLine.length - 2]
|
|
|
- console.log(lastPoint, secondLastPoint, 'lastPoint, secondLastPoint')
|
|
|
|
|
// 计算线段末端的角度(以弧度为单位)
|
|
// 计算线段末端的角度(以弧度为单位)
|
|
|
const angle =
|
|
const angle =
|
|
|
(Math.atan2(
|
|
(Math.atan2(
|
|
@@ -481,7 +479,7 @@ const getMarker = () => {
|
|
|
}
|
|
}
|
|
|
markerPositions.value.push({
|
|
markerPositions.value.push({
|
|
|
lat: item.lat,
|
|
lat: item.lat,
|
|
|
- lng: (Number(item.lng) + 360) % 360,
|
|
|
|
|
|
|
+ lng: item.lng,
|
|
|
city: item.infor,
|
|
city: item.infor,
|
|
|
label: item.label,
|
|
label: item.label,
|
|
|
icon: iconColorList[item.label].icon,
|
|
icon: iconColorList[item.label].icon,
|
|
@@ -490,7 +488,7 @@ const getMarker = () => {
|
|
|
})
|
|
})
|
|
|
viewData.value = (data?.rangePoint.length > 0 ? data?.rangePoint : data?.point)?.map(
|
|
viewData.value = (data?.rangePoint.length > 0 ? data?.rangePoint : data?.point)?.map(
|
|
|
(item) => {
|
|
(item) => {
|
|
|
- return [Number(item.lat), (Number(item.lon || item.lng) + 360) % 360]
|
|
|
|
|
|
|
+ return [Number(item.lat), item.lon || item.lng]
|
|
|
}
|
|
}
|
|
|
)
|
|
)
|
|
|
// 请求成功后添加标记,并动态添加重置按钮
|
|
// 请求成功后添加标记,并动态添加重置按钮
|
|
@@ -534,6 +532,7 @@ onUnmounted(() => {
|
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
|
@import 'leaflet/dist/leaflet.css';
|
|
@import 'leaflet/dist/leaflet.css';
|
|
|
.tracking-map {
|
|
.tracking-map {
|
|
|
|
|
+ border-radius: 12px;
|
|
|
.leaflet-popup-content-wrapper {
|
|
.leaflet-popup-content-wrapper {
|
|
|
border-radius: 6px;
|
|
border-radius: 6px;
|
|
|
}
|
|
}
|