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