百度地圖組件 百度地圖熱力圖 --》 二次封裝

1.百度地圖

<template>
    <!-- 地圖上顯示描點
        1.調用頁面引入: import Map from '@/components/deviceViewMap.vue';
                     注:自定義的組件名稱 不要使用關鍵字
                     components: {Map}
        2.調用頁面入參: 
            <Map :mapValueAll = "valMapPoint"></Map>
             valMapPoint: {   數據，最關鍵的地方
                width: 1500, //地圖寬
                height: 600, //地圖高
                mapPoint: [
                    {
                        allRuntime: "0天0小時", //運行時間
                        deviceStatus: "1", //設備狀態
                        device_code: "new", //設備編碼
                        device_img: "/group1/M00/00/0B/rBAAyl0QmtuAH2wGAAGSKp3wi3E073.jpg", //設備圖片
                        device_name: "模板生成測試用", //設備名稱
                        lat: "34.62", //經緯度
                        lon: "112.46",
                        device_id: 775 //設備id
                    },
                    {
                        allRuntime: "1天4小時", //運行時間
                        deviceStatus: "2", //設備狀態
                        device_code: "new", //設備編碼
                        device_img: "/group1/M00/00/0B/rBAAyl0QmtuAH2wGAAGSKp3wi3E073.jpg", //設備圖片
                        device_name: "提示信息2", //設備名稱
                        lat: "32.32", //經緯度
                        lon: "110.36",
                        device_id: 647
                    },
                    {
                        allRuntime: "89天22小時", //運行時間
                        deviceStatus: "3", //設備狀態
                        device_code: "new", //設備編碼
                        device_img: "/group1/M00/00/0B/rBAAyl0QmtuAH2wGAAGSKp3wi3E073.jpg", //設備圖片
                        device_name: "提示信息3", //設備名稱
                        lat: "32.62", //經緯度
                        lon: "111.46",
                        device_id: 779
                    },
                    {
                        allRuntime: "0天0小時", //運行時間
                        deviceStatus: "5", //設備狀態
                        device_code: "new", //設備編碼
                        device_img: "/group1/M00/00/0B/rBAAyl0QmtuAH2wGAAGSKp3wi3E073.jpg", //設備圖片
                        device_name: "提示信息4", //設備名稱
                        lat: "35", //經緯度
                        lon: "110",
                        device_id: 738
                    }
                ]
            }
    -->

    <div class="deviceAllMap">
        <slot></slot>
        <div id="devMap" :style="{height:mapValueAll.height+'px',width: mapValueAll.width+'px'}"></div>
    </div>

</template>

<script>
export default {
    props: {
        mapValueAll: {
            type: Object,
            default: function() {
                return {
                    width: 1400, //地圖寬
                    height: 800 //地圖高
                };
            }
        }
    },
    data() {
        return {
            map: null,
            infoWindow: null, //地圖信息框
            closeFlag: true, //是否 可打開地圖信息框
            map_zoom: 5 // 地圖縮放級別
        };
    },
    mounted() {
        this.initMap();
        this.setMapEvent();
        this.addMapControl();
    },
    methods: {
        //初始化地圖
        initMap() {
            var that = this;
            this.map = new BMap.Map("devMap", { mapType: BMAP_HYBRID_MAP }); // 在百度地圖容器中創建一個地圖 //創建Map實例,設置地圖允許的最小/大級別
            var myicon = new BMap.Icon("./static/images/map/map_maker.png", new BMap.Size(20, 34)); //顯示圖標大小  標記圖標
            let point = new BMap.Point(111.41, 40.48); //定義一個中心點坐標
            this.map.centerAndZoom(point, this.map_zoom); //設定地圖的中心點和坐標並將地圖顯示在地圖容器中
            if (this.mapValueAll.mapPoint) {
                if (this.mapValueAll.mapPoint.length == 0) {
                } else {
                    this.mapValueAll.mapPoint.map((item, index) => {
                        let point = new BMap.Point(item.lon, item.lat); //定義一個中心點坐標
                        let content =
                            '<div  id="' +
                            item.device_id +
                            '" style="color:#666666;">' +
                            "<div style=float:left;width:142px>" +
                            "<p style=height:20px;line-height:20px;margin-bottom:15px;font-weight:bold;color:#333333;>" +
                            "<span style=width:150px;text-align:left;display:inline-block;>" +
                            item.device_name +
                            "</span>" +
                            "</p>" +
                            "<p style=height:20px;line-height:20px;margin-bottom:8px;>" +
                            "<span style=width:65px;text-align:left;display:inline-block;>" +
                            "設備編號:" +
                            "</span>" +
                            "<span class='word map_span' title='" +
                            item.device_code +
                            "'>" +
                            item.device_code +
                            "</span>" +
                            "</p>" +
                            "<p style=height:20px;line-height:20px;margin-bottom:8px;>" +
                            "<span style=width:65px;text-align:left;display:inline-block;>" +
                            "累計運行:" +
                            "</span>" +
                            "<span class='word map_span' title='" +
                            item.allRuntime +
                            "'>" +
                            item.allRuntime +
                            "</span>" +
                            "</p>" +
                            "<p style=height:20px;line-height:20px;margin-bottom:8px;>" +
                            "<span style=width:65px;text-align:left;display:inline-block;>" +
                            "設備狀態:" +
                            "</span>" +
                            "<span class='word map_span' title='" +
                            item.deviceStatus +
                            "'>" +
                            item.deviceStatus +
                            "</span>" +
                            "</p>" +
                            "</div>" +
                            "<div style=float:right;width:90px;height:100px;margin-top:20px;>" +
                            "<img style='width:100%;height:100%' src=" +
                            this.fileUrl +
                            item.device_img +
                            " />" +
                            "</div>" +
                            "</div>" +
                            "</div>";
                        let marker = new BMap.Marker(point, { icon: myicon }); // 創建標注
                        this.addClickHandler(marker, content, item.device_id, item.device_name);
                        this.map.addOverlay(marker); // 將標注添加到地圖中
                    });
                }
            }

            this.map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放
            this.getMapZoom(); //獲取地圖縮放層級
        },
        //地圖事件
        setMapEvent() {
            this.map.enableDragging(); //啟用地圖拖拽事件，默認啟用(可不寫)
            this.map.enableScrollWheelZoom(); //啟用地圖滾輪放大縮小
            this.map.enableDoubleClickZoom(); //啟用鼠標雙擊放大，默認啟用(可不寫)
            this.map.enableKeyboard(); //啟用鍵盤上下左右鍵移動地圖
        },
        //地圖控件添加函數：
        addMapControl() {
            //向地圖中添加縮放控件
            let ctrl_nav = new BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                type: BMAP_NAVIGATION_CONTROL_LARGE
            });
            this.map.addControl(ctrl_nav);
            //向地圖中添加縮略圖控件
            let ctrl_ove = new BMap.OverviewMapControl({
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                isOpen: 1
            });
            this.map.addControl(ctrl_ove);
            //向地圖中添加比例尺控件
            let ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
            this.map.addControl(ctrl_sca);
            //向地圖添加影像地圖
            this.map.addControl(
                new BMap.MapTypeControl({
                    mapTypes: [BMAP_HYBRID_MAP, BMAP_NORMAL_MAP],
                    anchor: BMAP_ANCHOR_BOTTOM_LEFT
                })
            );
        },
        getMapZoom() {
            //監聽地圖縮放
            this.map.addEventListener("zoomend", () => {
                let ZoomNum = this.map.getZoom(); //地圖縮放層級
                this.map_zoom = ZoomNum;
            });
        },
        addClickHandler(marker, content, deviceId, deviceName) {
            let that = this;
            marker.addEventListener("mouseover", function(e) {
                if (that.closeFlag == true) {
                    that.openInfo(content, e, deviceName); //開啟信息窗口
                }
            });
            marker.addEventListener("click", function(e) {
                that.selectPoint(deviceId); //跳轉 詳情頁面
            });
        },
        openInfo(content, e, deviceName) {
            let opts = {
                boxStyle: {
                    width: "265px",
                    height: "143px",
                    padding: "15px",
                    overflow: "hidden",
                    background: "url(./static/images/map/map_infoBoxBg.png)no-repeat",
                    "background-size": "100% 100%",
                    "margin-top": "-2px",
                    "margin-left": "-4px",
                    "border-radius": "5px"
                },
                enableAutoPan: true,
                //                      align: 'INFOBOX_AT_TOP',
                closeIconUrl: "./static/images/map/map_close.png",
                closeIconMargin: "-6px -2px 0 0",
                closeIconZIndex: 1,
                closeIconWidth: "10px"
            };
            let p = e.target;
            let point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            this.infoWindow = new BMapLib.InfoBox(this.map, content, opts);
            this.infoWindow.open(point);
            this.infoWindow.addEventListener("close", () => {
                this.closeFlag = true; // false 時可以開啟下一個窗口
            });
            this.infoWindow.addEventListener("open", () => {
                this.closeFlag = false; // false 時不可以開啟下一個窗口
            });
            for (let i = 0; i < document.querySelectorAll(".infoBox>img").length; i++) {
                document.querySelectorAll(".infoBox>img")[i].onclick = function(e) {
                    document.querySelectorAll(".infoBox")[i].style.display = "none";
                };
            }
            this.infoWindow.open(point);
            this.infoWindow.addEventListener("close", () => {
                this.infoWindow.close();
            });
        },
        //跳轉到設備監控頁面
        selectPoint(deviceId) { //點擊地圖上的點 跳轉頁面
            let sissionStorage = window.localStorage;
            sissionStorage.device_id = deviceId;
            this.$router.push({ path: "" });
        }
    }
};
</script>

<style lang="scss" scoped>
</style>

2.百度地圖熱力圖

<template>
    <!-- 百度地圖 熱力圖   故障熱力分布圖??
       1. 調用頁面引入 
                    import DistributionFaultMap from '@/components/DistributionFaultMap.vue';
                    注:自定義的組件名稱 不要使用關鍵字
                    components: {DistributionFaultMap}
       2. 調用頁面入參: 
            <DistributionFaultMap :mapPoint = "valObj"></DistributionFaultMap>
           valObj: {
                title: "故障分布熱力圖", //圖表名稱
                tooltip: //提示信息
                    "顯示：設備發生故障在全國范圍內的分布情況，顏色越深表示故障越多<br/>結論：通過設備故障分布熱力圖可以分析出所選設備在全國范圍內的故障高發區域",
                distributionPoint: [  //故障點
                    { lon: "110.29", lat: "39.86", val: 41 },
                    { lon: "107.31", lat: "39.97", val: 4 },
                    { lon: "106.40", lat: "39.75", val: 1 }
                ],
                width: 1000, //寬
                height: 300  //高
            }
    -->
    <div class="echart_box">
        <slot></slot>
        <div class="echart_tit" v-show="mapPoint.title">{{mapPoint.title}}
            <el-tooltip placement="bottom-start" effect="light" v-show="mapPoint.tooltip">
                <div slot="content" v-html="mapPoint.tooltip">
                </div>
                <i class="el-icon-question"></i>
            </el-tooltip>
        </div>
        <div class="echart_model" :style="{width:mapPoint.width+'px',height:mapPoint.height+'px'}" id="hot_map"></div>
    </div>
</template>

<script>
export default {
    props: {
        mapPoint: {
            //經緯度 lot經度,lat:緯度
            type: Object,
            default: function() {
                return {
                    width: 1400, //地圖寬
                    height: 800,//地圖高
                };
            }
        }
    },
    data() {
        return {
            map: null
        };
    },
    mounted() {
        this.hotMap(); //設置地圖;
        console.log(this.mapPoint.title,this.mapPoint.width,"555555555555555555")
    },
    methods: {
        hotMap() {
            this.map = new BMap.Map("hot_map"); // 在百度地圖容器中創建一個地圖 //創建Map實例,設置地圖允許的最小/大級別
            let point = new BMap.Point(106.54354, 39.16597); //定義一個中心點坐標 -  中國大概中間的位置
            this.map.enableScrollWheelZoom(true); //開啟鼠標滾輪縮放
            this.map.centerAndZoom(point, 4);

            var that = this;
            if (!isSupportCanvas()) {
                alert("熱力圖目前只支持有canvas支持的瀏覽器,您所使用的瀏覽器不能使用熱力圖功能~");
            }
            that.heatmapOverlay = new BMapLib.HeatmapOverlay({
                radius: 20
            });
            that.map.addOverlay(this.heatmapOverlay);
            let points = [],
                obj = {};
            this.mapPoint.distributionPoint.forEach((item, int) => {
                obj = {};
                obj.lng = item.lon;
                obj.lat = item.lat;
                obj.count = parseInt(item.val) * 5;
                points.push(obj);
            });
            that.heatmapOverlay.setDataSet({
                data: points,
                max: 100
            });

            //判斷瀏覽區是否支持canvas
            function isSupportCanvas() {
                var elem = document.createElement("canvas");
                return !!(elem.getContext && elem.getContext("2d"));
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.echart_box {
    margin: 4px;
    position: relative;
    z-index: 1;
}
.echart_tit {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: left;
    padding-left: 14px;
    box-sizing: border-box;
}
</style>