echarts+百度地圖自定義區域以及tooltip效果

// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
var startPoint = {
x: 118.1689,
y: 24.6478
};
var styleJson = {
styleJson: [
{
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#081843'
}
},
{
'featureType': 'land',
'elementType': 'geometry',
'stylers': {
'color': '#082657'
}
},
{
'featureType': 'highway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#103963'
}
},
{
'featureType': 'arterial',
'elementType': 'geometry.stroke',
'stylers': {
'color': '#103963',
'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': 'label',
'elementType': 'all',
'stylers': {
'visibility': 'on',
'color': '#FFF'
}
},
{
"featureType": "poilabel",
"elementType": "all",
"stylers": {
"visibility": "off"
}
},
{
"featureType": "district",
"elementType": "labels.text.stroke",
"stylers": {
"visibility": "on"
}
}]
};
var geoCoordMap = {
'嵩嶼碼頭': [118.049922, 24.459773],
'東孚工業園': [117.935838, 24.562585],
'新陽工業區': [118.008658, 24.529653],
'東方高爾夫': [118.057699, 24.529753],
'海滄分局': [118.033488, 24.488825]
}
var data = [
{ name: '嵩嶼碼頭', value: 330 },
{ name: '東孚工業園', value: 74 },
{ name: '新陽工業區', value: 35 },
{ name: '東方高爾夫', value: 120 },
{ name: '海滄分局', value: 150 }
];

var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};

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' }
];
var series = [];
for (var i = 0; i < data.length; i++) {
var colorcss = "";
switch (true) {
case data[i].value > 300:
colorcss = "hh";
break;
case data[i].value > 200:
colorcss = "pu";
break;
case data[i].value > 150:
colorcss = "red";
break;
case data[i].value > 100:
colorcss = "or";
break;
case data[i].value > 50:
colorcss = "yel";
break;
default:
colorcss = "gr";
break;
}

series.push({
name: '廈門' + i,
type: 'effectScatter',
coordinateSystem: 'bmap',
zlevel: 4,
rippleEffect: {
brushType: 'stroke',
scale: 1.5
},
label: {
normal: {
formatter: function (e) {
// console.log(e);
return e.name + '\n' + e.value[2];
},
show: true,
textStyle: {
color: '#fff'
}
}
},
symbol: ["circle"],
//symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANcAAABJCAYAAACuEbOGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUuNSAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEQ2QTA0NUY2NTY4MTFFOTg3MDVEMTA3RTg0QUU5QzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEQ2QTA0NjA2NTY4MTFFOTg3MDVEMTA3RTg0QUU5QzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowRDZBMDQ1RDY1NjgxMUU5ODcwNUQxMDdFODRBRTlDMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRDZBMDQ1RTY1NjgxMUU5ODcwNUQxMDdFODRBRTlDMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ph0g6ckAAAW8SURBVHja7J1faBxFGMBn/zT/TNJLMMEkxlT7lgOrFB+KQkDxqSqItqgvYoWqoIiCIM1zXgUftSpiQStBpLT6Ij5E1IdAFaUnFkxsSNpCT0ihSU2T7K636e7l28nM3bVByN39fjDM7CZ7E/by4/vmY/bOV72jahs4CqCxiW73Qn8bMjkIB00gkqOdj7Yl1/B4IXM8P5F3LHI5hjFAI0gWVZKp5Egk/Li9yGUQKxXJ1Y4RDBpJLClYKI43IlnshRTsluVKxLJJ5Q69/dNhtz33SWnsadflEA3qSaiSKFe1c0H479WXLr738KQ4F8pIFkesSoI5poJGnBYaxHJF7w6+OXXY67zzYyFbmcUL6izvF9QTPXvUfsPpMFj658il98cmE7FSuUItbYxqlsuwnnKT5iViPZuKtTRXuLxYmLrE2wMNJVt+bLBzJD8gBPsqkSrQRLMK5qn2vmpieaL5g298f8jr6v8IsaCRWSnOXfNaOpyWXH+329LxVOcDz8xcm/7svOZIpNUjKsplEiuNWv7A698d8ncPHEcsaDrBWjufvGPf0zNL0yf+1KSyCiblMhUuvKxYgx8iFjStYG1dsWCzmmCmzM8ol2NYYyEWINimYE/UIFhGLpkOltNAxAKoKpjSChuOTS65zvLi4gVrLACzYEmR4w9l2c3hWvLFjejldd9FxAIQxB7EPkg/VHa30ha5jGutpFeIBZAVrJz5bXqSulNeYrkqWyWU51xuI0BVdF/KPpnSQrnuAoDqcnnKsHHdNYjlCsEAoDKe5o1TSa5ym5/I72UTLoBh3VXyIvbD5I1JLtO6i8dGAOw4lvVWRi7T4/sUNQCqr7dsT+lb5eHJYoDaI5djM09ZUkPEAqhNMKMvpH0A/2POCADIBYBcAMjFLQBALgDkAgDkAkAuAOQCAOQCQC4A5AIA5AJALgDkAgDkAkAuAOQCAOQCQC4A5AIA5AJALgDkAgDkAtgpcg2PF8737FH7uU0AWWIvYj+IXAA7JHJFWg8Adqy+uBUuQC6A2uSKKkWuyGJiEA9y+bEB7iHATYQPgSVyRXrkkgaG8Xj1cuGteNw1kh9EMICbYsU+xF4kfkSJL1uimKfa++T3uqZ93LzlXydn2u49sODvHni8Ndff7bZ0qJXi3BK3GJpdrBvzv7xz5dMXTpXG60kLRCSLdLlk89J++bevZ9tGHlrwc0OPIRggVkmsuel3r5x48XRpvJa0IBEsTLM+m1yu3i//furv1rsfvOj3DD+KYNDMYq3M/jxe/PzlM6XxatLWDWKV5VJq8/tcXdFn0sTr507Ptg7tW/B770EwaEaxopWZH8eLJ49+k0SrVRG1ZEpYXn+lculI2cpR7fq5MyXB7i8JNoJg0Fxi/fXDePHLV7/VxFrXBLNGLj166emiSgSbyQi2C8GgAcUaLYm1R4r1mi7WmqGQEWYjVO+oSa64+UlhY1fSWpK+Ne77nvvgYNveRybEdWUWL6izvD1QT1j20Map4LHiyVdSsW4YBNOLGSqNXqlcylDUcBO5/KRJwTb6vuePH2y770BJMCez02N+Ij9mkg5ghxINjxemtFNx8eJY8YujesSSKeG6SAdlShjJyCXXWdUEk80XEc7V12i8Z1AvcomWihIIgda0Vkms9PU2xJATOGIcJsdh8kJK+1lQQS5l6AF2olR6b5LL1ELx+6btgxm55A8cJfYWapNH2uS+2lq6RyioR9FCTTBZsAgMBYzA4IayyWUTTN+DmEatdEJPba0uIhjUY1oYif9xKZmMaKEWsYw74/0q4dJRWzcmplEqTSO9ZHJHZcv4APWYIoaaYJFBqKpiVZLLJpgj/oAwkSlgrQUNuvaSKaKyFC6szz36NU6qh08pGakgNHKKaJNKqSoPFPs1TuZovS4ZYkEjCmaKTjV/DIZ/C5PVeh7JoN7Tw0rna/74C38bk0cWkfjsDWgG4arynwADAFkOklW+D1cFAAAAAElFTkSuQmCC',
//symbolRotate: 10,
symbolSize: function (val) {
//return val[2];
return 70;
},
//showEffectOn: 'render',
itemStyle: {
normal: {
color: color.filter(item => item.name === colorcss)[0].color
}
},
data: [{
name: data[i].name,
value: geoCoordMap[data[i].name].concat([data[i].value])
}]
});
}
option = {
tooltip: {
//alwaysShowContent: true,
formatter: function (params) {
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">'
+ '<h6><span class="iconfont icon-qiye"></span>' + params.name + '</h6>'
+ '<div class="gis-data">'
+ '<p>AQI值：35</p>'
+ '<p>PM2.5值：47</p>'
+ '<p>PM10值：35</p>'
+ '<p>CO值：64</p>'
+ ' <br />'
+ '<p>NO2值：21</p>'
+ ' <p>SO2值：45</p>'
+ '<p>O3值：14</p>'
+ ' <p>首要污染物：CO</p>'
+ '</div>'
+ '<div class="gis-data">'
+ '<p>溫度：35℃</p>'
+ '<p>溼度：87%</p>'
+ '<p>空氣質量：輕度污染</p>'
+ '<br />'
+ '<p>風向值：64</p>'
+ '<p>風速值：21</p>'
+ '</div>'
+ '<div class="gis-data" style="border-bottom: 0;">'
+ '<p>關注類型：35</p>'
+ '<p>更新時間：2019-07-19 15:05:21</p>'
+ ' </div>'
+ '</div >';
//tipHtml += params.name + '<br>' + params.value + "單位";
return tipHtml;
}
},
bmap: {
center: [startPoint.x, startPoint.y],
zoom: 5,
roam: true,
mapStyle: styleJson
},
series: series
};

myChart.setOption(option, true);
var map = myChart.getModel().getComponent('bmap').getBMap();
map.enableScrollWheelZoom();
getBoundary2(map, '海滄區');
function getBoundary2(map, city) {
var bdary = new BMap.Boundary();
bdary.get(city, function (rs) {//獲取行政區域
//map.clearOverlays();//清除地圖覆蓋物
//思路：利用行政區劃點的集合與外圍自定義東南西北造成一個環形遮罩層
//1.獲取選中行政區劃邊框點的集合rs.boundaries[0]
var strs = new Array();
strs = rs.boundaries[0].split(";");
var ENWS = "";
for (var i = 0; i < strs.length; i++) {
ENWS += strs[i] + ";"
}
//2.自定義外圍邊框點的集合
var E_JW = "170.672126, 39.623555;"; //東
var EN_JW = "170.672126, 81.291804;"; //東北角
var N_JW = "105.913641, 81.291804;"; //北
var NW_JW = "-169.604276, 81.291804;"; //西北角
var W_JW = "-169.604276, 38.244136;"; //西
var WS_JW = "-169.604276, -68.045308;"; //西南角
var S_JW = "114.15563, -68.045308;"; //南
var SE_JW = "170.672126, -68.045308 ;"; //東南角
//3.添加環形遮罩層
var ply1 = new BMap.Polygon(ENWS + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + N_JW + EN_JW + E_JW, { strokeColor: "none", strokeOpacity: 0, fillColor: "#fff", fillOpacity: "0.6" }); //創建多邊形覆蓋物
//map.addOverlay(ply1);//遮罩物是半透明的，若是須要純色能夠多添加幾層
//4. 給目標行政區劃添加邊框，其實就是給目標行政區劃添加一個沒有填充物的遮罩層
var ply = new BMap.Polygon(rs.boundaries[0], { strokeWeight: 2, strokeColor: "#114bf3", fillColor: "" });
map.addOverlay(ply);
//map.setViewport(ply.getPath());//調整視野
map.centerAndZoom(new BMap.Point(117.975388, 24.53241), 13);
});
}
//從新設置值