VUE组件封装echarts百度地图点位效果

1、地图打点,点样式包括(自带的sybmol,图片方式显示),弹框样式包括(图片背景方式、自定义div(建议该方式,更加灵活));

2、地图点位点击事件

3、街道区域色块功能(地图自带最小的单位为区,如果需要显示街道及以下,本例为街道,需要自己通过http://geojson.io/#map=14/24.4919/117.8682网站进行描边,获取到坐标);

4、判断当前点击的点位是否在坐标数组范围内的功能(通过在点击地图事件中判断当前点位是否在坐标范围内解决无法点击色块的问题)。

// 通过VUE组件方式封装初始化echarts实例//点位整体监控地图

//投屏页地图
Vue.component("map-pointmonitor", {
    template: '#map-pointmonitor',
    props: {
        id: {
            type: String,
            default: 'pointmonitormap'
        },
        data: {
            type: Object,
            default: {}
        },
        streetdata: {
            type: Object,
            default: {}
        },
        detectionrecord: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            chart: null,
            currentIndex: 0,
            currentIndex: 0
        }
    },
    mounted() {
        setTimeout(this.initChart(), 100);
    },
    watch: {
        data: {
            handler(val, oldval) {
                this.initChart();
            },
            deep: true
        }
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            var styleJson = {
                styleJson: [
                    {
                        'featureType': 'water',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#031B35'
                        }
                    },
                    {
                        'featureType': 'land',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#001526'
                        }
                    },
                    {
                        'featureType': 'highway',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'arterial',
                        'elementType': 'geometry.fill',
                        'stylers': {
                            'color': '#00303E'
                        }
                    },
                    {
                        'featureType': 'arterial',
                        'elementType': 'geometry.stroke',
                        'stylers': {
                            'color': '#00303E',
                            'lightness': -70
                        }
                    },
                    {
                        'featureType': 'local',
                        'elementType': 'geometry',
                        'stylers': {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "railway",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        'featureType': 'subway',
                        'elementType': 'all',
                        'stylers': {
                            "visibility": "off"
                        }
                    },
                    {
                        'featureType': 'building',
                        'elementType': 'geometry.fill',
                        'stylers': {
                            'color': '#000000'
                        }
                    },
                    {
                        'featureType': 'all',
                        'elementType': 'labels.text.fill',
                        'stylers': {
                            'color': '#857f7f'
                        }
                    },
                    {
                        'featureType': 'all',
                        'elementType': 'labels.text.stroke',
                        'stylers': {
                            'color': '#000000'
                        }
                    },
                    {
                        'featureType': 'building',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#022338'
                        }
                    },
                    {
                        'featureType': 'green',
                        'elementType': 'geometry',
                        'stylers': {
                            "visibility": "off"
                        }
                    },
                    {
                        'featureType': 'boundary',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#465b6c'
                        }
                    },
                    {
                        'featureType': 'manmade',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#022338'
                        }
                    },
                    {
                        "featureType": "poilabel",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "district",
                        "elementType": "labels.text.stroke",
                        "stylers": {
                            "visibility": "on"
                        }
                    }]
            };
            this.chart = echarts.init(document.getElementById(this.id));
            var chartData = {
                data: this.data
            }
            // 基于准备好的dom,初始化echarts实例
            var startPoint = {
                x: 117.976279,
                y: 24.55096
            };
 
            var data = chartData.data;
            var color = [
                { name: 'gr', color: '#00E400' },
                { name: 'yel', color: '#FFFF00' },
                { name: 'or', color: '#FF7E00' },
                { name: 'red', color: '#FF0000' },
                { name: 'pu', color: '#99004C' },
                { name: 'hh', color: '#7E0023' },
                { name: 'mo', color: '#5CC0D4' }//监控点位颜色
            ];
            var series = [];
            for (var i = 0; i < data.length; i++) {
                var colorcss = "";
                switch (true) {
                    case data[i].IsOnline == "0":
                        colorcss = "red";
                        break;
                    default:
                        colorcss = "mo";
                        break;
                }
                var self = this
                if (data[i].PointType == 2) {
                    var bgimg = "";
                    switch (true) {
                        case data[i].Value > 300:
                            bgimg = "aqi-dred.png";
                            colorcss = 'hh';
                            break;
                        case data[i].Value > 200:
                            bgimg = "aqi-purple.png";
                            colorcss = 'pu';
                            break;
                        case data[i].Value > 150:
                            bgimg = "aqi-red.png";
                            colorcss = 'red';
                            break;
                        case data[i].Value > 100:
                            bgimg = "aqi-orange.png";
                            colorcss = 'or';
                            break;
                        case data[i].Value > 50:
                            bgimg = "aqi-yel.png";
                            colorcss = 'yel';
                            break;
                        default:
                            bgimg = "aqi-green.png";
                            colorcss = 'gr';
                            break;
                    }
 
                    series.push({
                        type: 'effectScatter',
                        coordinateSystem: 'bmap',
                        data: [{
                            name: data[i].PointName,
                            value: data[i].Geocoordmap.concat([data[i].Value]),
                        }],
                        symbol: ["circle"],
                        symbolSize: function (val) {
                            return 10;
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            period: 5,
                            brushType: 'stroke',
                            scale: 2
                        },
                        tooltip: {
                            show: true,
                            alwaysShowContent: true,
                            enterable: true,       //鼠标可以进入
                            backgroundColor: 'rgba(255,255,255,0.0)',//通过设置rgba调节背景颜色与透明度
                            formatter: function (params) {
                                var infos = data.filter((item, index) => {
                                    if (item.PointName === params.name) {
                                        self.currentIndex = index;
                                        return true;
                                    }
                                })[0];
 
                                if (infos != undefined) {
                                    //self.$parent.setQualityData && self.$parent.setQualityData(infos.Qualitys, infos.PsAlias);
                                    var bgClass = "";
                                    if (infos.IsOnline == "0") {
                                        bgClass = "window-gr";
                                    }
                                    else
                                        bgClass = "mapbox-bl";
                                    var colorcss = "";
                                    switch (true) {
                                        case params.value[2] > 300:
                                            colorcss = "hh";
                                            break;
                                        case params.value[2] > 200:
                                            colorcss = "pu";
                                            break;
                                        case params.value[2] > 150:
                                            colorcss = "red";
                                            break;
                                        case params.value[2] > 100:
                                            colorcss = "or";
                                            break;
                                        case params.value[2] > 50:
                                            colorcss = "yel";
                                            break;
                                        default:
                                            colorcss = "gr";
                                            break;
                                    }
                                    var tipHtml = '<div class="window-' + colorcss + ' window-pop" onclick="console.log(\'我点击了tooltip\')">'
                                        + '<h6> <span class="iconfont icon-qiye"></span>' + infos.PointName + '</h6>'
                                        + '<div class="gis-data">'
                                        + '<p>AQI值:' + infos.RESULT_API + '</p>'
                                        + '<p>PM2.5值:' + infos.PM25.toFixed(3) + '</p>'
                                        + '<p>PM10值:' + infos.PM10.toFixed(3) + '</p>'
                                        + '<p>CO值:' + infos.CO.toFixed(3) + '</p>'
                                        + '   <br />'
                                        + '<p>NO2值:' + infos.NO2.toFixed(3) + '</p>'
                                        + ' <p>SO2值:' + infos.SO2.toFixed(3) + '</p>'
                                        + '<p>O3值:' + infos.O3.toFixed(3) + '</p>'
                                        + '</div>'
                                        + '<div class="gis-data">'
                                        + '<p>空气质量:' + (infos.RESULT_MEMO == null ? '无' : infos.RESULT_MEMO) + '</p>'
                                        + ' <p>首要污染物:' + (infos.MAINWRW == null ? '无' : infos.MAINWRW) + '</p>'
                                        + '</div>'
                                        + '<div class="gis-data" style="border-bottom: 0;">'
                                        + '<p>关注类型:' + (infos.AttentionDegreeName == null ? '无' : infos.AttentionDegreeName) + '</p>'
                                        + '       <p>更新时间:' + (infos.ProductionDateStr || "") + '</p>'
                                        + '</div>'
                                        + ' </div>';
                                    //tipHtml += params.name + '<br>' + params.value + "单位";
                                    return tipHtml;
                                }
                                return "";
                            },
                            //triggerOn: 'click',
                        },
                        label: {
                            normal: {
                                show: true,
                                enterable: true,       //鼠标可以进入
                                clickable: true,
                                formatter: function (params) {
                                    var infos = data.filter(item => item.PointName === params.name)[0];
                                    //触发右侧数据质量面板刷新                                
                                    var info = '\n\n     ' + infos.Value;
                                    return info;
                                },
                                position: [-23, -80],
                                //show: true,
                                textStyle: {
                                    color: '#fff',
                                    size: '18'
                                },
                                backgroundColor: {//内容背景图
                                    image: '/images/' + bgimg
                                },
                                //自定义控件(由于label无法解析html)
                                rich: {
                                    //设置控件引用名
                                    strong1: {
                                        fontSize: 16,
                                        fontWeight: 'bold',
                                        lineHeight: 25,
                                        padding: [0, 0, 0, 20]
                                    },
                                    color1: {
                                        color: '#fff701'//黄色
                                    },
                                    color2: {
                                        color: '#fe0002'//红色
                                    },
                                    color3: {
                                        color: '#18cc47'//绿色
                                    }
                                },
                                height: 87,
                                width: 53,
                                //lineHeight: 12,
                                padding: [0, 0]
                            },
 
                        },
                        itemStyle: {
                            normal: {
                                color: color.filter(item => item.name === colorcss)[0].color,
                                shadowBlur: 5,
                                //shadowColor: '#333'
                            }
                        },
                        zlevel: 1
                    })
                }
                else if (data[i].PointType == 3) {
                    var pointColor = "#23958b";//默认无超标颜色
                    var detectionrecord = self.detectionrecord.filter((item) => {
                        if (item.PointValue >= item.LimitValue && data[i].PointID == item.PSCode)
                            pointColor = "#FF0000";
                        return item.PSCode == data[i].PointID;
                    })
                    series.push({
                        type: 'effectScatter',
                        coordinateSystem: 'bmap',
                        data: [{
                            name: data[i].PointName,
                            value: data[i].Geocoordmap.concat([data[i].Value]),
                        }],
                        symbol: ["triangle"],
                        symbolSize: function (val) {
                            return 15;
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            period: 5,
                            brushType: 'stroke',
                            scale: 2
                        },
                        tooltip: {
                            show: true,
                            alwaysShowContent: true,
                            enterable: true,       //鼠标可以进入
                            backgroundColor: 'rgba(255,255,255,0.0)',//通过设置rgba调节背景颜色与透明度
                            formatter: function (params) {
                                var infos = data.filter((item, index) => {
                                    if (item.PointName === params.name) {
                                        self.currentIndex = index;
                                        return true;
                                    }
                                })[0];
 
                                if (infos != undefined) {
                                    var colorcss = "";
                                    var UploadTime = "";
                                    var isLimit = false;
                                    var eachHtml = "";
                                    detectionrecord.forEach(function (item) {
                                        if (item.PointValue >= item.LimitValue)
                                            isLimit = true;
                                        UploadTime = item.UploadTime;
                                        eachHtml += '<p>' + item.PollutantName + ':' + item.PointValue + '(' + item.MeasureUnit + ') ' + (item.PointValue >= item.LimitValue ? "超标" : "正常") + '</p></br>';
 
                                    })
                                    if (isLimit)
                                        colorcss = "red";
                                    else
                                        colorcss = "bg";
                                    var tipHtml = '<div class="window-' + colorcss + ' window-pop" >'
                                        + '<h6 onclick="GotoPage(\'' + infos.PointID + '\')" style="cursor: pointer;"> <span class="iconfont icon-qiye"></span>' + infos.PointName + '</h6>'
                                        + '<div class="gis-data">'
                                        + eachHtml
                                        + '   <br />'
                                        + '</div>'
                                        + '<div class="gis-data">'
                                        + '<p>更新时间:' + UploadTime + '<p>'
                                        + '</div>'
                                        + ' </div>';
                                    return tipHtml;
                                }
                                return "";
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: pointColor,
                                shadowBlur: 5,
                            }
                        },
                        zlevel: 1
                    })
                }
                else {
                    series.push({
                        type: 'effectScatter',
                        coordinateSystem: 'bmap',
                        data: [{
                            name: data[i].PointName,
                            value: data[i].Geocoordmap.concat([data[i].Value]),
                        }],
                        symbol: ["circle"],
                        symbolSize: function (val) {
                            return 15;
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            period: 5,
                            brushType: 'stroke',
                            scale: 2
                        },
                        tooltip: {
                            show: true,
                            alwaysShowContent: true,
                            enterable: true,       //鼠标可以进入
                            backgroundColor: 'rgba(255,255,255,0.0)',//通过设置rgba调节背景颜色与透明度
                            formatter: function (params) {
                                var infos = data.filter((item, index) => {
                                    if (item.PointName === params.name) {
                                        self.currentIndex = index;
                                        return true;
                                    }
                                })[0];
 
                                if (infos != undefined) {
                                    var bgClass = "";
                                    if (infos.IsOnline == "0") {
                                        bgClass = "mapbox-re";
                                    }
                                    else
                                        bgClass = "mapbox-bl";
                                    var tipHtml = '<div class="mapbox-pop ' + bgClass + '">'
                                        + ' <h6> ' + (infos.PointName.length > 10 ? (infos.PointName.substring(0, 10) + '...') : infos.PointName) + '</h6>'
                                        + '    <div class="gis-data">'
                                        + '<p>关注程度:' + infos.AttentionDegreeName + '</p>'
                                        + '<p>点位数:' + infos.PointCount + '</p>'
                                        + '        <br />'
                                        + '<p>监测设备:' + infos.EquipmentCount + '</p>'
                                        + '<p>是否在线:' + (infos.IsOnline == "1" ? "是" : "否") + '</p>'
                                        + '    </div>'
                                        + '   <div class="gis-data" style="border-bottom: 0; padding-top:0;">'
                                        + '       <p>更新时间:' + (infos.ProductionDateStr || "") + '</p>'
                                        + '</div>'
                                        + '</div>';
                                    return tipHtml;
                                }
                                return "";
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: color.filter(item => item.name === colorcss)[0].color,
                                shadowBlur: 5,
                            }
                        },
                        zlevel: 1
                    })
                }
 
            }
            //添加街道图标
            window.currenturl = window.location.href.split(':')[0] + '://' + document.domain + ":" + window.location.port;
            var level_hc = 1;//海沧响应级别,0为正常
            var level_sy = 1;//嵩屿响应级别,0为正常
            var level_xy = 1;//新阳响应级别,0为正常
            var level_df = 1;//东孚响应级别,0为正常
            for (var i = 0; i < this.streetdata.length; i++) {
                var bgimg = "";
                var Geocoordmap = [];
                var imgColorIndex = 1;
                var imgColor = ['#0da192', '#5fb3ff', '#009eff', '#0064ff'];
                switch (true) {
                    case this.streetdata[i].ResponseLevel === 0:
                        imgColorIndex = 1;
                        break;
                    case this.streetdata[i].ResponseLevel === 1:
                        imgColorIndex = 4;
                        break;
                    case this.streetdata[i].ResponseLevel === 2:
                        imgColorIndex = 3;
                        break;
                    case this.streetdata[i].ResponseLevel === 3:
                        imgColorIndex = 2;
                        break;
                }
                switch (true) {
                    case this.streetdata[i].STREET === "海沧街道":
                        bgimg = "hc-";
                        level_hc = imgColorIndex;
                        Geocoordmap = [117.97599792480469, 24.458634970231167];
                        break;
                    case this.streetdata[i].STREET === "嵩屿街道":
                        bgimg = "sy-";
                        Geocoordmap = [118.06406021118164, 24.492538078008447];
                        level_sy = imgColorIndex;
                        break;
                    case this.streetdata[i].STREET === "东孚街道":
                        bgimg = "df-";
                        Geocoordmap = [117.899294, 24.603363];
                        level_df = imgColorIndex;
                        break;
                    default:
                        bgimg = "xy-";
                        Geocoordmap = [117.98818588256836, 24.540096385782515];
                        level_xy = imgColorIndex;
                        break;
                }
            }
 
            var self = this;
            var option = {
                tooltip: {
                    enterable: true,       //鼠标可以进入
                    alwaysShowContent: false,
                    trigger: 'item'
                },
                bmap: {
                    center: [startPoint.x, startPoint.y],
                    zoom: 13,
                    roam: true,
                    mapStyle: styleJson,
                    series: [{
                        type: 'map',
                        mapType: 'china',
                        coordinateSystem: 'bmap'
                    }]
                },
                series: series
            };
 
            this.chart.setOption(option, true);
            轮播tooltip开始
            //var func = function () {
            //    self.chart.dispatchAction({
            //        type: 'showTip',
            //        seriesIndex: self.currentIndex,
            //        dataIndex: 0
            //    });
            //    self.currentIndex++;
            //    if (self.currentIndex >= data.length) {
            //        self.currentIndex = 0;
            //    }
            //};
            //func();
            //var mTime = setInterval(func, 3000);
 
            //鼠标移入停止轮播
            var selfTime = this.mTime;
            //this.chart.on("mousemove", function (e) {
            //    clearInterval(mTime);
            //    self.chart.dispatchAction({
            //        type: 'showTip',
            //        seriesIndex: self.currentIndex,
            //        dataIndex: 0
            //    });
            //})
            //鼠标移出恢复轮播
            //this.chart.on("mouseout", function () {
            //    clearInterval(mTime);
            //    func();
            //    mTime = setInterval(func, 3000);
            //})
            var map = this.chart.getModel().getComponent('bmap').getBMap();
            var colors = ["#0da192", "#ff8294", "#e82c48", "#94051a"];
            var point_hc = "117.97101974487306,24.489413749714622;117.96200752258301,24.48222750013779;117.96209335327148,24.480274644002066;117.96063423156738,24.475978253828025;117.95780181884764,24.473400349324063;117.96046257019042,24.46871311496997;117.95840263366698,24.464494454850758;117.96183586120607,24.46371320598545;117.95951843261719,24.45707239496206;117.95951843261719,24.45707239496206;117.98440933227539,24.451915759061432;117.98432350158691,24.452618949111944;117.98243522644043,24.453009608555394;117.98260688781738,24.454494103393856;117.99007415771483,24.452931476763613;117.99015998840332,24.45480662639424;117.99290657043457,24.454728495716825;117.99118995666502,24.450274967015854;118.02011489868163,24.44464923209822;118.0206298828125,24.452853344923373;118.01084518432617,24.453478398288706;118.00595283508301,24.456291100059076;118.01161766052245,24.46230694581464;118.01299095153807,24.466916295532087;118.02595138549805,24.467463156336283;118.02243232727051,24.488866984284154;118.01831245422362,24.494490743779757;118.01359176635741,24.492147541216028;118.00466537475586,24.49097592356269;117.98904418945312,24.492459970746975;117.9862117767334,24.492538078008447;117.97719955444336,24.490116730347225;117.97170639038087,24.489569967972496";
            var point_sy = "118.02002906799316,24.444805505903414;118.02114486694336,24.444258546737565;118.02183151245117,24.443945997577167;118.02234649658205,24.44300834544613;118.02406311035155,24.442305101770724;118.02474975585936,24.44152371530793;118.02595138549805,24.44136743743417;118.04208755493165,24.44097674190221;118.04603576660158,24.440507905665605;118.049898147583,24.439882787971314;118.05187225341795,24.439882787971314;118.0521297454834,24.444258546737565;118.05238723754881,24.44574314466583;118.05307388305663,24.44761840126476;118.05367469787596,24.449415495989253;118.05564880371092,24.453244003640076;118.05719375610353,24.455666060647953;118.05891036987303,24.457150524185852;118.06028366088866,24.45941625059706;118.06285858154295,24.46254132360022;118.0645751953125,24.46402570611317;118.06637763977052,24.470275545811756;118.06843757629395,24.480274644002066;118.06989669799805,24.484648999654024;118.07238578796387,24.494334531633775;118.07453155517578,24.500504763845026;118.07856559753418,24.51417192132151;118.08096885681152,24.521122076915518;118.08320045471191,24.527525250675097;118.08431625366211,24.530180129404926;118.08568954467773,24.53205412764961;118.0891227722168,24.535723959844557;118.08955192565918,24.536348601447635;118.08543205261229,24.537207478576015;118.08217048645021,24.53806634982697;118.07744979858397,24.538690979772323;118.07573318481445,24.5387690582969;118.0744457244873,24.539315606608813;118.07272911071776,24.539549840870986;118.07169914245605,24.540096385782515;118.04775238037108,24.542516770349096;118.02886962890624,24.54407828400275;118.02844047546387,24.54407828400275;118.02852630615234,24.538300586420796;118.02878379821776,24.535958200810004;118.02861213684082,24.534786991611373;118.02861213684082,24.53377193479942;118.02861213684082,24.532678787514772;118.0290412902832,24.531741796551437;118.02947044372557,24.53142946467622;118.03024291992189,24.530804798594634;118.03067207336424,24.5304729434746;118.03142309188843,24.530511985298958;118.03221702575685,24.53045342255786;118.03324699401855,24.530394859789457;118.03449153900146,24.53023869227349;118.03517818450928,24.53023869227349;118.03597211837769,24.530199650364157;118.0382466316223,24.53002396162187;118.03957700729369,24.52990683565709;118.04017782211302,24.52990683565709;118.04090738296507,24.529809230602982;118.04176568984987,24.529750667534095;118.04232358932494,24.529731146505057;118.04341793060303,24.529106471973414;118.0442762374878,24.52859892162796;118.04582118988036,24.52773998560015;118.04584264755249,24.527486207922003;118.0459713935852,24.527290993974404;118.04629325866699,24.52688104369657;118.04674386978148,24.526178268677906;118.04725885391235,24.52561214149698;118.04738759994507,24.52526075092854;118.0479884147644,24.522605768187677;118.04743051528929,24.520048342037143;118.04534912109376,24.516885651426502;118.04118633270262,24.511790037964914;118.03597211837769,24.50554226053975;118.0351996421814,24.504995565237653;118.0181622505188,24.494490743779757;118.02243232727051,24.48876934735005;118.02410602569579,24.478517047568037;118.02590847015381,24.46750221773141;118.01303386688231,24.466955357096865;118.01153182983398,24.46195537831843;118.00590991973878,24.456291100059076;118.01101684570311,24.453478398288706;118.02054405212402,24.452814278985077;118.02015781402586,24.445118052932575";
            var point_xy = "118.02841901779173,24.543941652333874;118.02871942520142,24.532795910893455;118.02893400192261,24.53160515145164;118.0306077003479,24.530570548012715;118.0422592163086,24.529750667534095;118.04564952850342,24.52781807093638;118.04734468460083,24.525416924635913;118.0479884147644,24.522722900962684;118.04740905761719,24.520067864571413;118.04528474807739,24.516846605365824;118.03590774536131,24.505405586937158;118.01833391189575,24.494588376272457;118.01350593566895,24.492147541216028;118.00464391708374,24.490956396509336;117.99496650695801,24.491893691650642;117.98904418945312,24.492499024383772;117.98625469207764,24.492557604816238;117.97717809677123,24.490155784711607;117.9716420173645,24.489550440700867;117.9709768295288,24.48943327700746;117.96192169189453,24.48222750013779;117.96147108078004,24.484492775285144;117.96215772628786,24.48597689895725;117.95855283737183,24.501246733399086;117.95542001724242,24.501324835202677;117.95434713363647,24.503980267653933;117.9521369934082,24.505717983524733;117.94917583465575,24.506928512967804;117.94711589813231,24.508334274463643;117.94561386108398,24.510247646788454;117.94447660446167,24.51233670371112;117.94295310974121,24.51303955617586;117.93990612030028,24.51253194090125;117.93741703033446,24.513430028068537;117.93567895889281,24.515636171465214;117.93376922607422,24.5229181220116;117.93136596679686,24.52651013514909;117.92329788208008,24.53166371365548;117.91883468627928,24.53166371365548;117.9217529296875,24.53525547660224;117.92484283447264,24.537597875327783;117.92673110961913,24.540096385782515;117.93102264404297,24.53525547660224;117.93394088745117,24.530102045537678;117.94166564941406,24.526041617523095;117.95557022094727,24.53463082955918;117.96346664428711,24.53666092108343;117.97170639038087,24.5374417167728;117.98131942749022,24.539784074695962;117.98698425292969,24.552588191822093;117.99591064453124,24.550089930124585;117.99985885620116,24.547435472550017;118.02749633789061,24.544156359175304";
            var point_df = "117.98698425292969,24.552588191822093;117.98114776611328,24.539315606608813;117.97162055969237,24.537363637422438;117.96338081359863,24.536426681429443;117.9557418823242,24.53486507256461;117.94149398803711,24.526041617523095;117.93394088745117,24.530102045537678;117.93119430541992,24.535177395891846;117.92673110961913,24.540018308083738;117.92492866516112,24.53751979607458;117.9214096069336,24.53533355726405;117.91866302490234,24.53166371365548;117.91342735290527,24.53236645797072;117.91205406188965,24.533303444271642;117.9111957550049,24.536973239942053;117.91128158569336,24.540018308083738;117.91274070739746,24.543844058193574;117.91325569152832,24.54665473904422;117.90982246398924,24.550089930124585;117.90879249572754,24.55313467993515;117.90827751159668,24.555242540350456;117.91068077087402,24.562034294001684;117.91351318359375,24.56570324922706;117.91368484497069,24.568201199845927;117.9107666015625,24.57272860844354;117.90784835815428,24.57483613940755;117.90209770202637,24.577880288213787;117.89806365966798,24.58076825844618;117.89437294006348,24.58467081513412;117.88750648498537,24.588104964425213;117.8858757019043,24.59029028311878;117.8912830352783,24.59380232253615;117.8931713104248,24.597626431177872;117.89265632629393,24.60386962275355;117.89360046386719,24.60597662960702;117.89265632629393,24.609176090679338;117.89239883422852,24.6115951410667;117.89368629455566,24.61292169722315;117.89548873901367,24.613545954075356;117.90166854858398,24.61214137177622;117.90947914123535,24.613311858120912;117.91849136352539,24.61276563252323;117.9206371307373,24.614248239309614;117.92587280273438,24.624782044540563;117.93016433715819,24.633052410290944;117.93196678161621,24.633988643624463;117.938232421875,24.637655489967766;117.94183731079102,24.63890375352977;117.94355392456055,24.641400243234045;117.95110702514647,24.63671928411111;117.95325279235841,24.63367656662607;117.95445442199706,24.629463450862463;117.95333862304688,24.625484266666636;117.9503345489502,24.62205114321693;117.94836044311523,24.61541870593642;117.94569969177246,24.610736773703568;117.94449806213377,24.60355747057237;117.94544219970703,24.594582762359718;117.95042037963866,24.586231803759645;117.960205078125,24.579207201723747;117.9737663269043,24.57959746772822;117.98011779785155,24.574758083337347;117.98827171325684,24.565547125660405;117.98715591430664,24.552978540717266";
            getBoundary("海沧区");  //行政区划覆盖遮罩
            function getBoundary(city) {
                var bdary = new BMap.Boundary();
                bdary.get(city, function (rs) {//获取行政区域
                    //map.clearOverlays();//清除地图覆盖物
                    //思路:利用行政区划点的集合与外围自定义东南西北形成一个环形遮罩层
                    //1.获取选中行政区划边框点的集合rs.boundaries[0]
                    var count = rs.boundaries.length; //行政区域的点有多少个
                    if (count === 0) {
                        alert('未能获取当前输入行政区域');
                        return;
                    }
                    var ply_hc = new BMap.Polygon(point_hc, { strokeWeight: 2, strokeColor: colors[level_hc - 1], strokeOpacity: 0, fillColor: colors[level_hc - 1], fillOpacity: "0.4" }) //建立多边形覆盖物
                    var ply_sy = new BMap.Polygon(point_sy, { strokeWeight: 2, strokeColor: colors[level_sy - 1], strokeOpacity: 0, fillColor: colors[level_sy - 1], fillOpacity: "0.4" }) //建立多边形覆盖物
                    var ply_xy = new BMap.Polygon(point_xy, { strokeWeight: 2, strokeColor: colors[level_xy - 1], strokeOpacity: 0, fillColor: colors[level_xy - 1], fillOpacity: "0.4" }) //建立多边形覆盖物
                    var ply_df = new BMap.Polygon(point_df, { strokeWeight: 2, strokeColor: colors[level_df - 1], strokeOpacity: 0, fillColor: colors[level_df - 1], fillOpacity: "0.4" }) //建立多边形覆盖物
                    self.streetdata && self.streetdata.length>0 && self.streetdata.forEach(function (item) {
                        if (item.STREET == "海沧街道") {
                            map.addOverlay(ply_hc);
                        }
                        else if (item.STREET == "嵩屿街道") {
                            map.addOverlay(ply_sy);
                        }
                        else if (item.STREET == "新阳街道") {
                            map.addOverlay(ply_xy);
                        }
                        else if (item.STREET == "东孚街道") {
                            map.addOverlay(ply_df);
                        }
                    })
                    map.addEventListener("click", function (e) {
                        var point = e.point;
                        if (BMapLib.GeoUtils.isPointInPolygon(point, ply_hc)) {
                            window.open("/Enterprise/PonitMonitor?Street=海沧街道");
                            console.log("海沧街道");
                        } else if (BMapLib.GeoUtils.isPointInPolygon(point, ply_sy)) {
                            window.open("/Enterprise/PonitMonitor?Street=嵩屿街道");
                            console.log("嵩屿街道");
                        }
                        else if (BMapLib.GeoUtils.isPointInPolygon(point, ply_xy)) {
                            window.open("/Enterprise/PonitMonitor?Street=新阳街道");
                            console.log("新阳街道");
                        }
                        else if (BMapLib.GeoUtils.isPointInPolygon(point, ply_df)) {
                            window.open("/Enterprise/PonitMonitor?Street=东孚街道");
                            console.log("东孚街道");
                        } else {
                            console.log("区域外");
                        }
                    })
                    //map.setViewport(ply.getPath());//调整视野
                    //map.centerAndZoom(new BMap.Point(117.975388, 24.53291), 13);
                });
            }
            //map.disableDoubleClickZoom();
            //点击echart地图触发事件
            this.chart.on("click", eConsole);
            function eConsole(param) {
                var Streets = ["海沧街道", "东孚街道", "嵩屿街道", "新阳街道"];
                //debugger;
                if (Streets.indexOf(param.seriesName) >= 0) {
                    window.location.href = "/Enterprise/PonitMonitor?Street=" + param.seriesName;
                }
                else {
                    var EnterpriseDatas = chartData.data;
                    if (EnterpriseDatas.length > 0) {
                        var obj = EnterpriseDatas.filter(function (e) { return e.PointName == param.name });
                        if (obj != undefined && obj.length > 0 && obj[0].RESULT_API <= 0)
                            window.location.href = "./Enterprise/PointMonitor/SingleEnterpriseMonitor?PSCode=" + obj[0].PointID;
                    }
                }
            }
        }
    }
})
 
 

组件使用,放在需要显示的地方。

定义模板和引用js

定义vue

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

zzl_1010

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值