echarts百度地图自定义街道区域以及弹框效果

通过echart百度地图实现:

1、地图打点,点样式包括自带的sybmol,图片方式显示;

2、地图点的点击事件

3、街道区域色块功能;

4、判断当前点击的点位是否在坐标数组范围内的功能。

// 通过VUE组件方式封装初始化echarts实例

//点位整体监控地图
Vue.component("map-pointmonitor", {
    template: '#map-pointmonitor',
    props: {
        id: {
            type: String,
            default: 'pointmonitormap'
        },
        data: {
            type: Object,
            default: {}
        },
        streetdata: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            chart: null,
            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() {
            this.chart = echarts.init(document.getElementById(this.id));
            var chartData = {
                geoCoordMap: this.data.geoCoordMap,
                data: this.data.data,
            }
            // 基于准备好的dom,初始化echarts实例
            var startPoint = {
                x: 117.975388,
                y: 24.53291
            };
            var styleJson = {
                styleJson: [
                    {
                        'featureType': 'water',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#133F58'
                        }
                    },
                    {
                        'featureType': 'scenicspotslabel',
                        'elementType': 'all',
                        'stylers': {
                            'color': '#000'
                        }
                    },
                    {
                        'featureType': 'land',
                        'elementType': 'geometry',
                        'stylers': {
                            'color': '#043448'
                        }
                    },
                    {
                        'featureType': 'highway',
                        'elementType': 'all',
                        'stylers': {
                            'visibility': 'off'
                        }
                    },
                    {
                        'featureType': 'arterial',
                        'elementType': 'geometry.fill',
                        'stylers': {
                            'color': '#005D62'
                        }
                    },
                    {
                        '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': '#0000'
                        }
                    },
                    {
                        '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'
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "poilabel",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "district",
                        "elementType": "labels.text.stroke",
                        "stylers": {
                            "visibility": "on"
                        }
                    }]
            };
            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;
                series.push({
                    type: 'effectScatter',
                    coordinateSystem: 'bmap',
                    data: [{
                        name: data[i].PsAlias,
                        value: data[i].Geocoordmap.concat([data[i].Value]),
                    }],
                    symbol: ["circle"],
                    symbolSize: function (val) {
                        return 15;
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        period: 5,
                        brushType: 'stroke',
                        scale: 4
                    },                    
                    tooltip: {
                        //show: true,
                        alwaysShowContent: true,
                        enterable: true,       //鼠标可以进入
                        backgroundColor: 'rgba(255,255,255,0.0)',//通过设置rgba调节背景颜色与透明度
                        position: function (point, params, dom, rect, size) {
                            // 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下
                            // 提示框位置
                            var x = 0; // x坐标位置
                            var y = 0; // y坐标位置

                            // 当前鼠标位置
                            var pointX = point[0];
                            var pointY = point[1];

                            // 外层div大小
                            // var viewWidth = size.viewSize[0];
                            // var viewHeight = size.viewSize[1];

                            // 提示框大小
                            var boxWidth = size.contentSize[0];
                            var boxHeight = size.contentSize[1];

                            // boxWidth > pointX 说明鼠标左边放不下提示框
                            if (boxWidth > pointX) {
                                x = 5;
                            } else { // 左边放的下
                                x = pointX - boxWidth;
                            }

                            // boxHeight > pointY 说明鼠标上边放不下提示框
                            if (boxHeight > pointY) {
                                y = 5;
                            } else { // 上边放得下
                                y = pointY - boxHeight;
                            }

                            return [x, y];
                        },
                        formatter: function (params) {                           
                            var infos = data.filter((item, index) => {
                                if (item.PsAlias === 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 = "mapbox-re";
                                }
                                else
                                    bgClass = "mapbox-bl";

                                var color1 = [
                                    { name: 'gr', color: '#00E400' },
                                    { name: 'yel', color: '#FFFF00' },
                                    { name: 'or', color: '#FF7E00' },
                                    { name: 'red', color: '#FF0000' },
                                    { name: 'pu', color: '#99004C' },
                                    { name: 'hh', color: '#7E0023' }
                                ];
                                var colorcss1 = "";
                                switch (true) {
                                    case infos.IsOnline == "0":
                                        colorcss1 = color.filter(item => item.name === "red")[0].color;
                                        break;
                                    default:
                                        colorcss1 = color.filter(item => item.name === "gr")[0].color;
                                        break;
                                }

                                var tipHtml = '<div class="mapbox-pop ' + bgClass + '" onclick="window.location.href=\'./PointMonitor/SingleEnterpriseMonitor?PSCode=' + infos.PSCode + '\'">'
                                    + '<h6 style="color:' + colorcss1 + ';"> ' + (infos.PsAlias.length > 10 ? (infos.PsAlias.substring(0, 10) + '...') : infos.PsAlias) + '</h6>'
                                    + '<div class="gis-data">'
                                    + '<p>关注程度:' + infos.AttentionDegreeName + '</p>'
                                    + '<p>点位数:' + infos.PointCount + '</p>'
                                    + '<br />'
                                    + '<p>监测设备:' + (infos.EquipmentCount || 0) + '</p>'
                                    + '<p>是否在线:' + (infos.IsOnline == "1" ? "是" : "否") + '</p>'
                                    + '</div>'
                                    + '<div class="gis-data" style="border-bottom: 0; padding-top:0;">'
                                    + '<p>更新时间:' + (infos.ProductionDateStr || "") + '</p>'
                                    + '</div>'
                                    + '</div >';
                                //tipHtml += params.name + '<br>' + params.value + "单位";
                                return tipHtml;
                            }
                            return "";
                        },
                        //triggerOn: 'click',
                    },
                    itemStyle: {
                        normal: {
                            color: color.filter(item => item.name === colorcss)[0].color,
                            //shadowBlur: 0,
                            //shadowColor: '#333'
                        }
                    },
                    zlevel: 2
                })
            }

            //添加街道图标
            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 imgColorIndex = 1;
                var imgColor = ['#5fd9ff', '#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;
                }
                var bgimg = "";
                var Geocoordmap = [];
                switch (true) {
                    case this.streetdata[i].STREET === "海沧街道":
                        bgimg = "hc-";
                        Geocoordmap = [117.97599792480469, 24.458634970231167];
                        level_hc = imgColorIndex;
                        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;
                }
                if (this.streetdata)
                    series.push({
                        name: this.streetdata[i].STREET,
                        type: 'effectScatter',
                        coordinateSystem: 'bmap',
                        zlevel: 4,
                        rippleEffect: {
                            brushType: 'fill',
                            scale: 0.7
                        },
                        showEffectOn: false,
                        symbolOffset: [0, 0],
                        symbol: 'image://' + window.currenturl + '/images/' + bgimg + imgColorIndex + ".png",
                        symbolSize: function (val) {
                            return [110, 40];
                        },
                        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";//'{color1|' + params.name + '}';
                                    return info;
                                },
                                //position: [-23, -80],
                                //show: true,
                                textStyle: {
                                    color: imgColor[imgColorIndex - 1],
                                    size: '16'
                                },
                                backgroundColor: {//内容背景图
                                    //image: '/images/' + bgimg + imgColorIndex + ".png"
                                },
                                //自定义控件(由于label无法解析html)
                                rich: {
                                    //设置控件引用名
                                    color1: {
                                        backgroundColor: "rgba(0, 23, 11, 0.1)"
                                    }
                                },
                                height: 50,
                                width: 140,
                                //lineHeight: 12,
                                padding: [0, 0]
                            }
                        },
                        tooltip: {
                            show: false,
                        },
                        itemStyle: {
                            normal: {
                                color: color[0].color
                            }
                        },
                        data: [{
                            name: this.streetdata[i].STREET,
                            value: Geocoordmap.concat([this.streetdata[i].ResponseLevel])
                        }]
                    });
            }

            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, 10000);

            鼠标移入停止轮播
            //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, 10000);
            })

            var map = this.chart.getModel().getComponent('bmap').getBMap();
            //map.enableScrollWheelZoom();
            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);
                });
            }
            //点击echart地图触发事件
            function eConsole(param) {
                //var mes = '【' + param.type + '】';
                console.log(param);
                var Streets = ["海沧街道", "东孚街道", "嵩屿街道", "新阳街道"];
                //debugger;
                if (Streets.indexOf(param.seriesName) >= 0) {
                    var Street = self.streetdata.filter(function (item) {
                        return item.STREET == param.seriesName
                    });
                    if (Street.length > 0) {
                        //self.$parent.setStreet && self.$parent.setStreet(Street);
                        //window.location.href = "./PointMonitor/SingleEnterpriseMonitor?PSCode=" + data[param.seriesIndex].PSCode;
                        window.location.href = "/Enterprise/PonitMonitor?Street=" + Street[0].STREET;
                    }
                } else {
                    if (param && param.seriesIndex >= 0)
                        window.location.href = "./PointMonitor/SingleEnterpriseMonitor?PSCode=" + data[param.seriesIndex].PSCode;
                }

            }
            this.chart.on("click", eConsole);

        }
    }
})


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

订单模板和引用js

定义vue

  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值