使用echarts+百度地图自定义区域以及label效果

// 基于准备好的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],
'海峡生活馆': [118.04256, 24.475681],
'东孚工业园': [117.935838, 24.562585],
'新阳工业区': [118.008658, 24.529653],
'东方高尔夫': [118.057699, 24.529753],
'海沧分局': [118.033488, 24.488825],
'东孚盘龙路': [117.978316, 24.539794],
'文圃园': [118.041134, 24.496846],
'党校': [118.0367, 24.492256],
}
var data = [
{ name: '嵩屿码头', value: 330 },
{ name: '海峡生活馆', value: 210 },
{ name: '东孚工业园', value: 74 },
{ name: '新阳工业区', value: 35 },
{ name: '东方高尔夫', value: 120 },
{ name: '海沧分局', value: 150 },
{ name: '东孚盘龙路', value: 50 },
{ name: '文圃园', value: 140 },
{ name: '党校', value: 180 }
];

},
position: [-170, -145],
show: true,
textStyle: {
color: '#fff',
size: '35'
},
backgroundColor: {//内容背景图
image: i % 2 === 0 ? '/images/red-f.png' : '/images/grn-f.png'
},
//自定义控件（由于label无法解析html）
rich: {
//设置控件引用名
strong1: {
fontSize: 18,
fontWeight: 'bold',
lineHeight: 25,
padding: [0, 0, 0, 60]
},
color1: {
color: '#fff701'//黄色
},
color2: {
color: '#fe0002'//红色
},
color3: {
color: '#18cc47'//绿色
}
},
height: 150,
width: 220,
lineHeight: 12,
padding: [0, 0]
}
},
itemStyle: {
normal: {
color: color.filter(item => item.name === colorcss)[0].color,
shadowBlur: 10,
//shadowColor: '#333'
}
},
zlevel: 1
})
}
var option = {
tooltip: {
show: false,
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);
});
}
//点击echart地图触发事件
//var ecConfig = echarts.config;
function eConsole(param) {
var mes = '【' + param.type + '】';
console.log(param);
window.location.href = "./PointMonitor/SingleEnterpriseMonitor?name=" + param.name;
}
/*
// -------全局通用
REFRESH: 'refresh',
RESTORE: 'restore',
RESIZE: 'resize',
CLICK: 'click',
DBLCLICK: 'dblclick',
HOVER: 'hover',
MOUSEOUT: 'mouseout',
// -------业务交互逻辑
DATA_CHANGED: 'dataChanged',
DATA_ZOOM: 'dataZoom',
DATA_RANGE: 'dataRange',
DATA_RANGE_HOVERLINK: 'dataRangeHoverLink',
LEGEND_SELECTED: 'legendSelected',
LEGEND_HOVERLINK: 'legendHoverLink',
MAP_SELECTED: 'mapSelected',
PIE_SELECTED: 'pieSelected',
MAGIC_TYPE_CHANGED: 'magicTypeChanged',
DATA_VIEW_CHANGED: 'dataViewChanged',
TIMELINE_CHANGED: 'timelineChanged',
MAP_ROAM: 'mapRoam',
*/
myChart.on("click", eConsole);
//myChart.on(ecConfig.EVENT.DBLCLICK, eConsole);
//myChart.on(ecConfig.EVENT.HOVER, eConsole);
//myChart.on(ecConfig.EVENT.DATA_ZOOM, eConsole);
//myChart.on(ecConfig.EVENT.LEGEND_SELECTED, eConsole);
//myChart.on(ecConfig.EVENT.MAGIC_TYPE_CHANGED, eConsole);
//myChart.on(ecConfig.EVENT.DATA_VIEW_CHANGED, eConsole);

//滚轮触发事件
map.addEventListener("zoomend", function (e) {
var ZoomNum = map.getZoom();
console.log("当前缩放级别" + ZoomNum);
//$("#ZoomNum").html(ZoomNum);
});