From dbb835e105e7aae2556c274fa06cd308e997e075 Mon Sep 17 00:00:00 2001
From: longyvfengyun <496960745@qq.com>
Date: 星期四, 16 十一月 2023 14:02:59 +0800
Subject: [PATCH] 地图首页内容修改
---
src/views/home.vue | 182 ++++++++++++++++++++++++++++++---------------
1 files changed, 121 insertions(+), 61 deletions(-)
diff --git a/src/views/home.vue b/src/views/home.vue
index 09ae03b..17c8fdc 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -1,6 +1,10 @@
<script setup>
-import {nextTick, onMounted, onUnmounted, ref} from 'vue';
-import {BaiduMap, BmInfoWindow, BmLabel, BmMarker} from "vue-baidu-map-3x";
+import {computed, nextTick, onMounted, reactive, ref} from 'vue';
+import {
+ BaiduMap,
+ BmInfoWindow
+} from "vue-baidu-map-3x";
+import {View, PointLayer, IconLayer, TextLayer} from "mapvgl";
import mapJson from "@/assets/mapJson/map_config";
import {FullScreen} from "@element-plus/icons-vue";
import BoxComponent from "@/components/boxComponent.vue";
@@ -27,21 +31,118 @@
}
import carPosModule from "@/views/moudle/carInfo/carPosModule";
+import CarInfoList from "@/components/carInfoList.vue";
const {
- carPosInfo,
getCarPosList
} = carPosModule();
-const infoWindowClose = (item) => {
- item.show = false;
+const infoWindow = reactive({
+ show: false,
+ content: {
+ boxName: "",
+ boxSn: "",
+ lon: 0,
+ lat: 0,
+ createTime: "",
+ updateTime: ""
+ },
+});
+
+const mapPosition = {
+ lng: 116.404,
+ lat: 39.915
};
-const infoWindowOpen = (item) => {
- item.show = true
-};
+const iconLayer = ref({});
+const textLayer = ref({});
+
+const handleMapReady = ({map})=>{
+ let view = new View({
+ map: map
+ });
+
+ textLayer.value = new TextLayer({
+ enablePicked: false,
+ autoSelect: false,
+ selectedColor: '#f00', // 閫変腑椤归鑹�
+ color: '#fff',
+ offset: [0, 30],
+ lineWidth: 3, // 鏂囧瓧绮楃粏锛屽湪璁剧疆鎻忚竟鏃舵墠鏈夋晥
+ //textMaxWidth: 500, // 鏂囧瓧鏈�澶у搴︼紝瓒呰繃鍒欐崲琛�
+ textMaxHeight: 50,
+ textAlign: 'center', // 鏂囧瓧瀵归綈鏂瑰紡锛屾敮鎸�'center'銆�'left'
+ lineHeight: 24,
+ stroke: {
+ color: '#000'
+ }
+ });
+
+ view.addLayer(textLayer.value);
+
+ iconLayer.value = new IconLayer({
+ width: 40,
+ height: 29,
+ opacity: 0.8,
+ icon: carPng,
+ selectedIndex: -1, // 閫変腑椤�
+ enablePicked: true, // 鏄惁鍙互鎷惧彇
+ selectedColor: '#ff0000', // 閫変腑椤归鑹�
+ autoSelect: true, // 鏍规嵁榧犳爣浣嶇疆鏉ヨ嚜鍔ㄨ缃�変腑椤�
+ onClick: (e)=>{
+ console.log(e);
+ if(e.dataIndex !== -1) {
+ const point = e.dataItem.geometry.coordinates;
+ const info = e.dataItem.properties.info;
+ infoWindow.show = false;
+ nextTick(()=>{
+ infoWindow.show = true;
+ infoWindow.content = info;
+ mapPosition.lng = point[0];
+ mapPosition.lat = point[1];
+ });
+ }
+ },
+ onDblClick: e => {
+ console.log('double click', e);
+ },
+ onRightClick: e => {
+ console.log('right click', e);
+ }
+ });
+
+ view.addLayer(iconLayer.value);
+
+ searchCarPos();
+}
+
+const searchCarPos = async ()=>{
+ const res = await getCarPosList();
+ console.log(res);
+ let data = res.map(item=>{
+ return {
+ geometry: {
+ type: 'Point',
+ coordinates: [item.lon, item.lat]
+ },
+ properties: {
+ icon: carPng,
+ text: item.boxName,
+ info: item
+ }
+ }
+ });
+
+ textLayer.value.setData(data);
+ iconLayer.value.setData(data);
+
+}
+
+const infoWinOpen = ()=>{}
+const infoWinClose = ()=>{
+ infoWindow.show = false;
+}
onMounted(()=>{
- getCarPosList();
const boxGaugeOption = getGaugeOption(10, 90, "浠婃棩鍦ㄧ嚎姹借溅鏁�");
boxGauge.value.setOption(boxGaugeOption);
@@ -81,9 +182,6 @@
</div>
</div>
<div class="baidu-map-content">
-<!-- <div class="baidu-map-tools-right" v-if="!isFullScreen">-->
-<!-- <el-button type="primary" @click="changeScreenState" :icon="FullScreen" />-->
-<!-- </div>-->
<div class="baidu-map-float">
<div class="box-container">
<div class="box-container-top">
@@ -190,46 +288,19 @@
<baidu-map
class="map-container"
ak="4GdR40xNyYI2w2XiIgYgS4TdiS3c197C"
- v="3.0" type="API"
- :center="{lng: 114.3202, lat: 30.59}" :zoom="15" :scroll-wheel-zoom="true" :mapStyle="mapStyle">
- <bm-marker
- v-for="(item, key) in carPosInfo" :key="'key'+key"
- :position="{lng: item.lon, lat: item.lat}"
- :dragging="false"
- @click="infoWindowOpen(item)"
- :icon="{url: carPng, size: {width: 40, height: 40}}">
-<!-- <bm-info-window-->
-<!-- :show="item.show"-->
-<!-- :offset="{width: 0, height: -15}"-->
-<!-- @close="infoWindowClose(item)"-->
-<!-- @open="infoWindowOpen(item)">-->
-<!-- <div class="info-list">-->
-<!-- <div class="info-item">-->
-<!-- <div class="info-label">杞﹁締鍚嶇О锛�</div>-->
-<!-- <div class="info-value">{{item.boxName}}</div>-->
-<!-- </div>-->
-<!-- <div class="info-item">-->
-<!-- <div class="info-label">杞﹁締璇嗗埆鐮侊細</div>-->
-<!-- <div class="info-value">{{item.boxSn}}</div>-->
-<!-- </div>-->
-<!-- <div class="info-item">-->
-<!-- <div class="info-label">鍒涘缓鏃ユ湡锛�</div>-->
-<!-- <div class="info-value">{{new Date(item.createTime).format("yyyy-MM-dd hh:mm:ss")}}</div>-->
-<!-- </div>-->
-<!-- <div class="info-item">-->
-<!-- <div class="info-label">涓婁紶鏃ユ湡锛�</div>-->
-<!-- <div class="info-value">{{new Date(item.uploadTime).format("yyyy-MM-dd hh:mm:ss")}}</div>-->
-<!-- </div>-->
-<!-- <div class="info-item">-->
-<!-- <div class="info-label">鏇存柊鏃ユ湡锛�</div>-->
-<!-- <div class="info-value">{{new Date(item.updateTime).format("yyyy-MM-dd hh:mm:ss")}}</div>-->
-<!-- </div>-->
-<!-- </div>-->
-<!-- </bm-info-window>-->
- <bm-label :content="item.boxName" :offset="{width: -12, height: 30}"></bm-label>
- </bm-marker>
+ v="3.0"
+ type="WebGL"
+ :center="{lng: 114.3202, lat: 30.59}"
+ :zoom="5"
+ :scroll-wheel-zoom="true"
+ :mapStyle="mapStyle" @ready="handleMapReady">
+ <bm-info-window :width="300" :position="mapPosition" title="杞﹁締淇℃伅" :show="infoWindow.show" @close="infoWinClose" @open="infoWinOpen">
+ <car-info-list :infos="infoWindow.content"></car-info-list>
+ </bm-info-window>
</baidu-map>
+ {{infoWindow}}
</div>
+ {{infoWindow}}
</div>
</div>
@@ -343,16 +414,5 @@
}
.hdw-chart-box {
height: 150px;
-}
-.info-list {
- .info-item {
- padding: 4px 0;
- .info-label {
- display: inline-block;
- }
- .info-value {
- display: inline-block;
- }
- }
}
</style>
--
Gitblit v1.9.1