地图首页内容修改

longyvfengyun

2023-11-16 dbb835e105e7aae2556c274fa06cd308e997e075

地图首页内容修改

 package-lock.json

@@ -15,6 +15,8 @@
        "element-plus": "^2.3.14",
        "less": "^4.2.0",
        "less-loader": "^11.1.3",
        "mapv": "^2.0.62",
        "mapvgl": "^1.0.0-beta.188",
        "pinia": "^2.1.6",
        "postcss-px2rem": "^0.3.0",
        "px2rem-loader": "^0.1.9",
@@ -1005,6 +1007,23 @@
        "proxy-from-env": "^1.1.0"
      }
    },
    "node_modules/babel-plugin-external-helpers": {
      "version": "6.22.0",
      "resolved": "https://registry.npmjs.org/babel-plugin-external-helpers/-/babel-plugin-external-helpers-6.22.0.tgz",
      "integrity": "sha512-TdAMiM6MzLokhk3yCA0KCctmivVZ/mmCwbp7YPmRGkqh2KkcNuxE3R0jxuYU+4xmvfMZx4p4uo8d1cT9t5BLxA==",
      "dependencies": {
        "babel-runtime": "^6.22.0"
      }
    },
    "node_modules/babel-runtime": {
      "version": "6.26.0",
      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
      "dependencies": {
        "core-js": "^2.4.0",
        "regenerator-runtime": "^0.11.0"
      }
    },
    "node_modules/balanced-match": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1185,6 +1204,13 @@
      "funding": {
        "url": "https://github.com/sponsors/mesqueeb"
      }
    },
    "node_modules/core-js": {
      "version": "2.6.12",
      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
      "hasInstallScript": true
    },
    "node_modules/css": {
      "version": "2.2.4",
@@ -1782,6 +1808,19 @@
        "node": ">=6"
      }
    },
    "node_modules/mapv": {
      "version": "2.0.62",
      "resolved": "https://registry.npmjs.org/mapv/-/mapv-2.0.62.tgz",
      "integrity": "sha512-P/diaWXuH+vJHVON//RBA7nCEdJAdafwN3Hys/TVYB6e3n7emqlQm+r9qy2xYV0GuxflRhbEeMPJWVIK5HEEqw==",
      "dependencies": {
        "babel-plugin-external-helpers": "^6.22.0"
      }
    },
    "node_modules/mapvgl": {
      "version": "1.0.0-beta.188",
      "resolved": "https://registry.npmjs.org/mapvgl/-/mapvgl-1.0.0-beta.188.tgz",
      "integrity": "sha512-nROfH5DwE2+RQJ8rs0bksXuY0u9is135eT2/HOWIIo+2aJWygyv9buV2WxmUoZDkt8Z9fSsz7ltiFiUHSsgklw=="
    },
    "node_modules/memoize-one": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
@@ -2192,6 +2231,11 @@
      "dependencies": {
        "safe-buffer": "^5.1.0"
      }
    },
    "node_modules/regenerator-runtime": {
      "version": "0.11.1",
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
    },
    "node_modules/resolve-url": {
      "version": "0.2.1",
@@ -3349,6 +3393,23 @@
        "proxy-from-env": "^1.1.0"
      }
    },
    "babel-plugin-external-helpers": {
      "version": "6.22.0",
      "resolved": "https://registry.npmjs.org/babel-plugin-external-helpers/-/babel-plugin-external-helpers-6.22.0.tgz",
      "integrity": "sha512-TdAMiM6MzLokhk3yCA0KCctmivVZ/mmCwbp7YPmRGkqh2KkcNuxE3R0jxuYU+4xmvfMZx4p4uo8d1cT9t5BLxA==",
      "requires": {
        "babel-runtime": "^6.22.0"
      }
    },
    "babel-runtime": {
      "version": "6.26.0",
      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
      "requires": {
        "core-js": "^2.4.0",
        "regenerator-runtime": "^0.11.0"
      }
    },
    "balanced-match": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3476,6 +3537,11 @@
      "requires": {
        "is-what": "^3.14.1"
      }
    },
    "core-js": {
      "version": "2.6.12",
      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
    },
    "css": {
      "version": "2.2.4",
@@ -3940,6 +4006,19 @@
        "semver": "^5.6.0"
      }
    },
    "mapv": {
      "version": "2.0.62",
      "resolved": "https://registry.npmjs.org/mapv/-/mapv-2.0.62.tgz",
      "integrity": "sha512-P/diaWXuH+vJHVON//RBA7nCEdJAdafwN3Hys/TVYB6e3n7emqlQm+r9qy2xYV0GuxflRhbEeMPJWVIK5HEEqw==",
      "requires": {
        "babel-plugin-external-helpers": "^6.22.0"
      }
    },
    "mapvgl": {
      "version": "1.0.0-beta.188",
      "resolved": "https://registry.npmjs.org/mapvgl/-/mapvgl-1.0.0-beta.188.tgz",
      "integrity": "sha512-nROfH5DwE2+RQJ8rs0bksXuY0u9is135eT2/HOWIIo+2aJWygyv9buV2WxmUoZDkt8Z9fSsz7ltiFiUHSsgklw=="
    },
    "memoize-one": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
@@ -4222,6 +4301,11 @@
        "safe-buffer": "^5.1.0"
      }
    },
    "regenerator-runtime": {
      "version": "0.11.1",
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
    },
    "resolve-url": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",

 package.json

@@ -15,6 +15,8 @@
    "element-plus": "^2.3.14",
    "less": "^4.2.0",
    "less-loader": "^11.1.3",
    "mapv": "^2.0.62",
    "mapvgl": "^1.0.0-beta.188",
    "pinia": "^2.1.6",
    "postcss-px2rem": "^0.3.0",
    "px2rem-loader": "^0.1.9",

 src/components/carInfoList.vue

New file
@@ -0,0 +1,91 @@
<script setup>
const props = defineProps({
    infos: {
        type: Object,
        default() {
            return {
                boxName: "",
                boxSn: "",
                lon: 0,
                lat: 0,
                createTime: "",
                updateTime: "",
                uploadTime: ""
            }
        }
    },
})
</script>

<template>
    <div class="info-list">
        <div class="info-item">
            <div class="info-label">
                车辆名称：
            </div>
            <div class="info-value">
                {{infos.boxName}}
            </div>
        </div>
        <div class="info-item">
            <div class="info-label">
                车辆编码：
            </div>
            <div class="info-value">
                {{infos.boxSn}}
            </div>
        </div>
        <div class="info-item">
            <div class="info-label">
                经度：
            </div>
            <div class="info-value">
                {{infos.lon}}
            </div>
            <div class="info-label">
                ；纬度：
            </div>
            <div class="info-value">
                {{infos.lat}}
            </div>
        </div>
        <div class="info-item">
            <div class="info-label">
                创建时间：
            </div>
            <div class="info-value">
                {{new Date(infos.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(infos.updateTime).format("yyyy-MM-dd hh:mm:ss")}}
            </div>
        </div>
        <div class="info-item">
            <div class="info-label">
                上传时间：
            </div>
            <div class="info-value">
                {{new Date(infos.uploadTime).format("yyyy-MM-dd hh:mm:ss")}}
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.info-list {
    .info-item {
        padding: 4px 0;
        .info-label {
            display: inline-block;
        }
        .info-value {
            display: inline-block;
        }
    }
}
</style>

 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>

 src/views/moudle/carInfo/carPosModule.js

@@ -21,8 +21,10 @@
        item.show = false;
        return item;
      });
      return data;
    }catch (e) {
      console.log(e);
      return [];
    }
  }