VUE组件封装echarts百度地图点位效果
2024-03-25 18:32:01
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 = thisif (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";}elsebgClass = "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";elsecolorcss = "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";}elsebgClass = "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
VUE组件封装echarts百度地图点位效果相关推荐
- vue全家桶+Echarts+百度地图，搭建数据可视化系统（项目）
vue全家桶+Echarts+百度地图,搭建数据可视化系统 1. 前言 1.1 业务场景 突然接到产品说要做一个数据监控的系统.有线图.柱状图.地图,类似于数据可视化的方式. 本人之前从未接触过Ech ...
- vue全家桶+Echarts+百度地图，搭建数据可视化系统
本文章篇幅略长,内容有点多 大佬可根据目录选择性查阅 新人可一步步来阅读 1 前言 1.1 业务场景 突然接到产品说要做一个数据监控的系统.有线图.柱状图.地图,类似于数据可视化的方式. 本人之前从未 ...
- echarts 折线图 设置y轴最小刻度_【硬货】vue全家桶+Echarts+百度地图，搭建数据可视化系统...
作者丨夙言 来源丨前端大牛爱好者(Web-2017) https://segmentfault.com/a/1190000018993981 本文章篇幅略长,内容有点多,大佬可根据目录选择性查阅,新人 ...
- 【硬货】vue全家桶+Echarts+百度地图，搭建数据可视化系统
本文章篇幅略长,内容有点多,大佬可根据目录选择性查阅,新人可一步步来阅读. 1. 前言 1.1 业务场景 突然接到产品说要做一个数据监控的系统.有线图.柱状图.地图,类似于数据可视化的方式. 本人之前 ...
- echarts百度地图涟漪效果
services: type: 'scatter' symbol:'pin',//设置标注形状 效果: type: 'effectScatter', symbol:'pin',//设置标注形状 效果: ...
- 地图统计_博客 城市访问量统计并且通过Echarts+百度地图展示
本篇讲解一下 如何在Vue 中使用 Echarts + 百度地图 统计 博客访问量 并且通过QQWry 解析 ip 地址 利用Echarts 展示出来 效果图如下: 1.纯真Ip地址库 QQWry 这 ...
- Vue+Echarts+百度地图 小例子
刚学完Echarts后,看到一些官方例子,粘贴代码下来却实现不了相应的效果,经过一番了解,发现还要引入百度地图,记录详细过程如下. 1.安装echarts(使用3.x,4.x) npm install ...
- Vue+Echarts+百度地图API
Vue+Echarts+百度地图API 不容易啊,又注册了一个地图账户 使用npm安装方式 去百度地图官网申请key,也就是地图API密钥AK 在vue项目的public文件夹中的index.html ...
- vue+openlayer+echarts 在地图点位上添加柱状图
** vue+openlayer+echarts 给地图点位添加柱状图 ** 重点在方法addColumnChart()里,三步实现 在网上百度了很多相关文章,最终都无疾而终,只能硬着头皮自己摸索,好 ...
- echarts vue组件封装
echarts vue组件封装 为什么封装echarts组件 1.原生echarts不是vue组件风格的,不爽 2.原生echarts需要操作dom,麻烦 3.原生echarts没有响应式系统,太菜 ...
最新文章
- 科普：5G网络关键技术详解
- 如何避免表单重复提交
- 万字长文详解大数据应用实战案例-万亿级大数据监控平台建设方案
- php根据位置获取经纬度(百度地图)
- 分布式和集群区别以及分布式事务
- Eclipse4.5 mars 配置Velocity插件
- 在linux系统中 用户的主目录可以不在,在Linux系统中,root用户的家目录是 答案：/root...
- 好文！2020届最新互联网校招薪资大全！
- Kafka： Producer （0.10.0.0）
- 【个人笔记】OpenCV4 C++ 快速入门 17课
- java取窗口句柄_如何获取Java中的所有窗口句柄列表(使用JNA)？
- Processing 案例 | 三角函数之美
- 2018-05-04 《设计模式：可复用面向对象软件的基础》- 实例研究
- k8s-（maser节点api-server、scheduler、controller-manager.sh）
- c++ IP地址离线查询
- Designing Data-Intensive Applications
- pikachu-远程代码、命令执行漏洞（RCE）
- LLaMA模型系统解读
- 特征提取与检测6-SURF特征检测
- python实例方法不可以用类调用_python中可以直接用类调用方法吗