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

<template>
    <div class="mapCom">
        <div id="map"></div>
    </div>
</template>
<script>
    // import httpRequest from "@/utils/request.js";
    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}.png",
                ciLayer: null,
                viewCenterMap: {
                    GJNY_SXGS_ZZ_FDC_STA: {
                        lng: 107.86058,
                        lat: 37.37861
                    },
                    GJNY_SXGS_JSL_FDC_STA: {
                        lng: 108.51853,
                        lat: 37.45717
                    },
                    GJNY_SXGS_XZ_FDC_STA: {
                        lng: 107.9109,
                        lat: 37.46585
                    },
                    GJNY_SXGS_FSG_FDC_STA: {
                        lng: 107.85678,
                        lat: 37.41682
                    },
                    GJNY_SXGS_CSL_FDC_STA: {
                        lng: 108.2031,
                        lat: 37.2811
                    },
                    GJNY_SXGS_LJS_FDC_STA: {
                        lng: 108.39083,
                        lat: 37.485
                    },
                },
            };
        },

        watch: {
            ids(val) {
                this.funStationPos(val);
                // this.funStationPosLabel(val)
            },
        },

        mounted() {
            this.initMap();
        },

        unmounted() {
            this.map.remove();
            this.map = null;
        },

        methods: {
            initMap() {
                // 矢量文本标签渲染器
                let canvasLabel = new L.CanvasLabel({
                    collisionFlg: true,
                    scale: 2,
                });
                this.map = L.map("map", {
                    renderer: canvasLabel,
                    // center: [40.02404009136253, 116.50641060224784], // 地图中心--北京
                    // center: [38.44673272215545, 106.27624511718751], // 地图中心--银川
                    // center: [108.953939, 34.266611], // 地图中心--陕西
                    // center: [109.470962, 34.520632], // 地图中心--渭南
                    zoom: 16, //缩放比列
                    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: 1,
                    maxZoom: 16,
                }).addTo(this.map);

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

            async funStationPos(ids) {
                let res = null;
                this.rightObj = {};
                if (ids.length > 0) {
                    res = await httpRequest.get("/base/windturbine", {
                        params: {
                            wpids: this.ids.join(","),
                        },
                    });
                } else {
                    // res = await httpRequest.get("/base/station", {
                    //     params: {},
                    // });
                    tabStr = "station"
                    let datas = await httpRequest.get("/benchmarking/wpByCplist?companyids=NX_FGS&type=-1");
                    res = datas.data
                }

                if (res.code === 200) {
                    if (res.data && res.data.data && res.data.data.length) {
                        // 清除现有的 layers
                        this.layers.forEach((layer) => {
                            this.map.removeLayer(layer);
                        });
                        this.layers = [];

                        const viewCenter =
                            this.viewCenterMap[res.data.data[0].windpowerstationId] || null;

                        if (!this.ciLayer) {
                            this.ciLayer = L.canvasIconLayer({}).addTo(this.map);
                        } else {
                            this.ciLayer.clearLayers();
                        }

                        //   let iconUrl = require(`@/assets/images/indexCom/run_Icon.gif`);
                        let iconUrl = require(`@/assets/images/indexCom/fengji.png`);
                        // const img = new Image();
                        // img.src = require("@/assets/images/indexCom/run_Icon.gif");

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

                            let marker = L.marker(
                                [Number(item.latitude), Number(item.longitude)], {
                                    icon: L.divIcon({
                                            className: "iconSty",
                                            iconUrl: iconUrl,
                                            iconSize: [30, 39],
                                            iconAnchor: [15, 12.5],
                                        }
                                        // {
                                        //   className: "currentMapIcon",
                                        //   html: `<img src="${img.src}" style="width: 30px; height: 39px;">`,
                                        //   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.altitude}m</div>
        </div>`
                            );

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

                            let c1 = L.circleMarker(latlng, {
                                radius: 5,
                                color: "transparent",
                                labelStyle: {
                                    text: item.aname,
                                    scale: 1.2,
                                    rotation: 0,
                                    offsetY: 35,
                                    fillStyle: "#fff",
                                    zIndex: i,
                                },
                                data: item,
                            }).addTo(this.map);

                            marker.on("tooltipopen", (e) => {
                                this.rightObj = item;
                            });

                            marker.addTo(this.map);

                            this.layers.push(c1);
                            this.layers.push(marker);

                            this.ciLayer.addLayer(marker);
                        }

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

                        if (viewCenter) {
                            this.map.setView(viewCenter, 13);
                        } else if (this.layers.length > 0) {
                            this.map.setView(this.layers[0].getLatLng(), 13);
                        }
                    }
                }
            },

            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 = [];
                        const viewCenter =
                            this.viewCenterMap[res.data[0].windpowerstationId] || null;
                        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) {
                                that.rightObj = item;
                            });
                        }
                        let center = this.map.getCenter();
                        this.map.panTo([center.lat, center.lng], {
                            animate: true,
                        });
                        this.map.setView(viewCenter || 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, index) => {
                        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: 100%;
    }

    .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>
<style lang="less">
    .mapCom {
        .currentMapIcon {
            img {
                position: absolute;
                z-index: 1000;
            }
        }
    }
</style>