百度地图组件 百度地图热力图 --》 二次封装

1.百度地图

<template>
    <!-- 地图上显示描点
        1.调用页面引入: import Map from '@/components/deviceViewMap.vue';
                     注:自定义的组件名称 不要使用关键字
                     components: {Map}
        2.调用页面入参: 
            <Map :mapValueAll = "valMapPoint"></Map>
             valMapPoint: {   数据，最关键的地方
                 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', mapValueAll.width+'px'}"></div>
    </div>

</template>

<script>
export default {
    props: {
        mapValueAll: {
            type: Object,
            default: function() {
                return {
                     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;142px>" +
                            "<p style=height:20px;line-height:20px;margin-bottom:15px;font-weight:bold;color:#333333;>" +
                            "<span style=150px;text-align:left;display:inline-block;>" +
                            item.device_name +
                            "</span>" +
                            "</p>" +
                            "<p style=height:20px;line-height:20px;margin-bottom:8px;>" +
                            "<span style=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=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=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;90px;height:100px;margin-top:20px;>" +
                            "<img style='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: {
                     "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 }
                ],
                 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="{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 {
                     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;
     100%;
    height: 40px;
    line-height: 40px;
    text-align: left;
    padding-left: 14px;
    box-sizing: border-box;
}
</style>