fd_dwgz_zhyw_nx/src/views/economicsOperation/stationAnalyse/posAnalysis/components/leafletMap1.vue

<template>
    <div class="mapCom">
        <div id="map"></div>
    </div>
</template>
<script>
    import httpRequest from "@/tools/request.js";
    import {
        CanvasLabel
    } from "@panzhiyue/leaflet-canvaslabel";
    import "./leaflet.canvas-markers.js";
    export default {
        props: {
            ids: {
                type: Array,
                default: () => {
                    return [];
                },
            },
            windList: {
                type: Array,
                default: () => {
                    return [];
                },
            },
        },
        data() {
            return {
                map: null,
                DefaultIcon1: null,
                layerGroup: [],
                layers: [],
                rightObj: {},
                areaLayer: null,
                tilsUrl: "./static/kMapTiles/{z}/{x}/{y}.jpg",
                canvasLabel: null,
                markers: null
            };
        },
        watch: {
            ids(val) {
                this.layers = [];

                this.funStationPos(val);
                // this.funStationPosLabel(val)
            },
        },
        mounted() {
            this.initMap();
        },
        methods: {
            initMap() {
                //矢量文本标签渲染器
                this.canvasLabel = new L.CanvasLabel({
                    collisionFlg: true,
                    scale: 2,
                });
                this.map = L.map("map", {
                    renderer: this.canvasLabel,
                    // center: [40.02404009136253, 116.50641060224784], // 地图中心--北京
                    // center: [38.44673272215545, 106.27624511718751], // 地图中心--银川
                    // center: [108.953939, 34.266611], // 地图中心--陕西
                    // center: [109.470962, 34.520632], // 地图中心--渭南
                    zoom: 18, //缩放比列
                    zoomControl: false, //禁用 + - 按钮
                    doubleClickZoom: true, // 禁用双击放大
                    attributionControl: false, // 移除右下角leaflet标识
                    preferCanvas: true,
                    contextmenu: true,
                    contextmenuWidth: 140,
                    // contextmenuItems: [{
                    //         text: "功率曲线拟合分析",
                    //         callback: this.powerLine,
                    //     },
                    //     {
                    //         text: "对风偏差分析",
                    //         callback: this.windAny,
                    //     },
                    //     {
                    //         text: "曲线偏差率分析",
                    //         callback: this.qxAny,
                    //     },
                    //     {
                    //         text: "温度与功率分析",
                    //         callback: this.wdyglAny,
                    //     },
                    //     {
                    //         text: "损失电量分析",
                    //         callback: this.ssdlAny,
                    //     },
                    //     {
                    //         text: "桨距角分析",
                    //         callback: this.jjjAny,
                    //     },
                    // ],
                });


                // let name = L.tileLayer(
                //     "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
                // ).addTo(this.map)

                let name = L.tileLayer(this.tilsUrl, {
                    minZoom: 10,
                    maxZoom: 18,
                }).addTo(this.map);

                // this.setAreaLayer("db", true);
                // this.setAreaLayer("jb", true);
                this.setAreaLayer("nx", true);
            },

            async funStationPos(ids) {
                let res = null;
                let tabStr = ""

                // 移除所有 Marker
                if (this.markers) {
                    this.markers.clearLayers();
                }
                if (ids.length > 0) {
                    tabStr = "winds"
                    res = await httpRequest.get("/base/windturbine", {
                        params: {
                            wpids: this.ids.join(","),
                        },
                    });
                } else {
                    tabStr = "station"
                    let datas = await httpRequest.get("/benchmarking/wpByCplist?companyids=NX_FGS&type=-1");
                    res = datas.data
                }
                if (res.code === 200) {
                    let resdatas = null
                    resdatas = tabStr === "station" ? res.data : res.data.data
                    if (resdatas && resdatas.length) {
                        // 创建一个 LayerGroup 来管理所有的 Marker
                        this.markers = L.layerGroup().addTo(this.map);

                        let iconUrl = require(`@/assets/images/indexCom/fengji.png`);

                        for (let i = 0; i < resdatas.length; i++) {
                            let item = resdatas[i];

                            let latlng = L.latLng(
                                Number(item.latitude),
                                Number(item.longitude)
                            );

                            let marker = L.marker(latlng, {
                                    // title: item.name,
                                    icon: L.divIcon({
                                        html: `<div class="custom-icon"><img src="${iconUrl}" alt="Icon"/><span style="color:#000;margin-left:10px">${item.aname}</span></div>`,
                                        className: "iconSty",
                                        iconSize: [30, 39],
                                        iconAnchor: [15, 12.5],
                                    }),
                                    // data: item,
                                })
                                .bindTooltip(
                                    `
                                <div class="tip-box-top">
                                    <div class="item">${item.aname}风机</div>
                                    <div class="item">经度：${item.latitude}°</div>
                                    <div class="item">纬度：${item.longitude}°</div>
                                    <div class="item">海拔高度:${item.spare3}m</div>
                                </div>`
                                )
                                .addTo(this.map);
                            this.layers.push(marker);
                            // 添加 Marker 到 LayerGroup
                            this.markers.addLayer(marker);

                            let that = this;
                            marker.on("mouseover", function onmouseover(e) {
                                that.rightObj = item;
                            });
                        }

                        let center = this.map.getCenter();
                        this.map.panTo([center.lat, center.lng], {
                            animate: true,
                        });
                        this.map.setView(this.layers[0].getLatLng(), 14);
                    }
                }
            },

            async funStationPosLabel(ids) {
                if (this.layers.length > 0) {
                    for (var i = 0; i < this.layers.length; i++) {
                        this.map.removeLayer(this.layers[i]);
                    }
                    this.layers = [];
                }
                let res = null;
                if (ids.length > 0) {
                    res = await httpRequest.get("/base/location", {
                        params: {
                            ids: this.ids.join(","),
                        },
                    });
                } else {
                    res = await httpRequest.get("/base/station", {
                        params: {},
                    });
                }
                if (res.code === 200) {
                    if (res.data && res.data.length) {
                        this.layers = [];
                        for (let i = 0; i < res.data.length; i++) {
                            let item = res.data[i];

                            let latlng = L.latLng(
                                Number(item.latitude),
                                Number(item.longitude)
                            );
                            let c = L.circleMarker(latlng, {
                                    radius: 5,
                                    color: "#12e799",
                                    labelStyle: {
                                        text: item.aname,
                                        scale: 1,
                                        rotation: 0,
                                        offsetY: 15,
                                        fillStyle: "#000",
                                        zIndex: i,
                                    },
                                    data: item,
                                })
                                .bindTooltip(
                                    `
                                <div class="tip-box-top">
                                    <div class="item">${item.aname}</div>
                                    <div class="item">经度：${item.latitude}°</div>
                                    <div class="item">纬度：${item.longitude}°</div>
                                    <div class="item">海拔高度:${item.altitude}m</div>
                                </div>`
                                )
                                .addTo(this.map);
                            this.layers.push(c);

                            let that = this;
                            c.on("mouseover", function onmouseover(e) {
                                console.log("map", item);
                                that.rightObj = item;
                            });
                        }
                        let center = this.map.getCenter();
                        this.map.panTo([center.lat, center.lng], {
                            animate: true,
                        });
                        this.map.setView(this.layers[0].getLatLng(), 13);
                    }
                }
            },

            setAreaLayer(jsonName, isBounds) {
                const wfAllGeoJson = require(`@/assets/${jsonName}.json`);
                this.areaLayer = L.geoJSON(wfAllGeoJson, {
                    style: (feature) => {
                        return {
                            fillOpacity: 0.1,
                            fillColor: "rgb(27, 242, 245)",
                            weight: 2,
                            color: "rgb(27, 242, 245)",
                        };
                    },
                });
                this.map.addLayer(this.areaLayer);
                if (isBounds) {
                    this.map.fitBounds(this.areaLayer.getBounds());
                }
            },

            powerLine(e) {
                if (!this.rightObj.latitude && !this.rightObj.longitude) {
                    this.$message({
                        message: "该坐标系下暂无功率曲线拟合",
                        type: "error",
                    });
                } else {
                    this.layers.forEach((item) => {
                        if (item.options.data) {
                            if (item.options.data.name.indexOf("风电场") === -1) {
                                if (
                                    item.options.data.latitude === this.rightObj.latitude &&
                                    item.options.data.longitude === this.rightObj.longitude
                                ) {
                                    this.$emit("rightClick", {
                                        menuIndex: 0,
                                        current: this.rightObj,
                                    });
                                }
                            } else {
                                if (item.options.data.name === this.rightObj.name) {
                                    this.$message({
                                        message: "风场暂无功率曲线拟合功能",
                                        type: "error",
                                    });
                                }
                            }
                        }
                    });
                }
            },

            windAny(e) {
                if (!this.rightObj.latitude && !this.rightObj.longitude) {
                    this.$message({
                        message: "该坐标系下暂无对风偏差分析",
                        type: "error",
                    });
                } else {
                    this.layers.forEach((item) => {
                        if (item.options.data) {
                            if (item.options.data.name.indexOf("风电场") === -1) {
                                if (
                                    item.options.data.latitude === this.rightObj.latitude &&
                                    item.options.data.longitude === this.rightObj.longitude
                                ) {
                                    this.$emit("rightClick", {
                                        menuIndex: 1,
                                        current: this.rightObj,
                                    });
                                }
                            } else {
                                if (item.options.data.name === this.rightObj.name) {
                                    this.$message({
                                        message: "风场暂无对风偏差分析功能",
                                        type: "error",
                                    });
                                }
                            }
                        }
                    });
                }
            },

            qxAny(e) {
                if (!this.rightObj.latitude && !this.rightObj.longitude) {
                    this.$message({
                        message: "该坐标系下暂无曲线偏差分析",
                        type: "error",
                    });
                } else {
                    this.layers.forEach((item) => {
                        if (item.options.data) {
                            if (item.options.data.name.indexOf("风电场") === -1) {
                                if (
                                    item.options.data.latitude === this.rightObj.latitude &&
                                    item.options.data.longitude === this.rightObj.longitude
                                ) {
                                    this.$emit("rightClick", {
                                        menuIndex: 2,
                                        current: this.rightObj,
                                    });
                                }
                            } else {
                                if (item.options.data.name === this.rightObj.name) {
                                    this.$message({
                                        message: "风场暂无曲线偏差分析功能",
                                        type: "error",
                                    });
                                }
                            }
                        }
                    });
                }
            },

            wdyglAny(e) {
                if (!this.rightObj.latitude && !this.rightObj.longitude) {
                    this.$message({
                        message: "该坐标系下暂无温度与功率分析",
                        type: "error",
                    });
                } else {
                    this.layers.forEach((item) => {
                        if (item.options.data) {
                            if (item.options.data.name.indexOf("风电场") === -1) {
                                if (
                                    item.options.data.latitude === this.rightObj.latitude &&
                                    item.options.data.longitude === this.rightObj.longitude
                                ) {
                                    this.$emit("rightClick", {
                                        menuIndex: 3,
                                        current: this.rightObj,
                                    });
                                }
                            } else {
                                if (item.options.data.name === this.rightObj.name) {
                                    this.$message({
                                        message: "风场暂无温度与功率分析功能",
                                        type: "error",
                                    });
                                }
                            }
                        }
                    });
                }
            },

            ssdlAny(e) {
                if (!this.rightObj.latitude && !this.rightObj.longitude) {
                    this.$message({
                        message: "该坐标系下暂无损失电量分析",
                        type: "error",
                    });
                } else {
                    this.layers.forEach((item) => {
                        if (item.options.data) {
                            if (item.options.data.name.indexOf("风电场") === -1) {
                                if (
                                    item.options.data.latitude === this.rightObj.latitude &&
                                    item.options.data.longitude === this.rightObj.longitude
                                ) {
                                    this.$emit("rightClick", {
                                        menuIndex: 4,
                                        current: this.rightObj,
                                    });
                                }
                            } else {
                                if (item.options.data.name === this.rightObj.name) {
                                    this.$message({
                                        message: "风场暂无损失电量分析功能",
                                        type: "error",
                                    });
                                }
                            }
                        }
                    });
                }
            },

            jjjAny(e) {
                if (!this.rightObj.latitude && !this.rightObj.longitude) {
                    this.$message({
                        message: "该坐标系下暂无桨距角分析",
                        type: "error",
                    });
                } else {
                    this.layers.forEach((item) => {
                        if (item.options.data) {
                            if (item.options.data.name.indexOf("风电场") === -1) {
                                if (
                                    item.options.data.latitude === this.rightObj.latitude &&
                                    item.options.data.longitude === this.rightObj.longitude
                                ) {
                                    this.$emit("rightClick", {
                                        menuIndex: 5,
                                        current: this.rightObj,
                                    });
                                }
                            } else {
                                if (item.options.data.name === this.rightObj.name) {
                                    this.$message({
                                        message: "风场暂无桨距角分析功能",
                                        type: "error",
                                    });
                                }
                            }
                        }
                    });
                }
            },
        },
    };
</script>
<style scoped lang="less">
    .mapCom {
        height: 100%;

        .iconLabel {
            width: 80px !important;
        }

        .iconSty {
            .iconStyClass {
                width: 50px;
                height: 100px;
                position: relative;
                top: 40px;
            }
        }
    }

    #map {
        width: 100%;
        height: 100vh;
    }

    .custom-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: white;
        border: 1px solid #ccc;
        padding: 5px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .custom-icon img {
        width: 32px;
        height: 32px;
        margin-right: 5px;
    }

    .custom-icon span {
        font-size: 14px;
    }

    .lmap-image {
        width: 32px;
        height: 32px;
    }

    .lmap-span {
        display: inline-block;
        margin-left: 5px;
        padding: 5px;
        font-weight: bold;
        line-height: 20px;
        font-size: 14px;
        color: #fff;
        white-space: nowrap;
    }

    .lmap-text {
        display: inline-block;
        margin-left: 5px;
        padding: 5px;
        font-weight: bold;
        line-height: 20px;
        font-size: 16px;
        color: #fff;
        width: 500px;
        white-space: nowrap;
        position: absolute;
        text-align: center;
        top: 25px;
        left: -250px;
    }
</style>