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 = {‘ Songyu Wharf ‘: [118.049922, 24.459773], ‘Channel Life Hall ‘: [118.04256, 24.475681],’ Dongfu Industrial Park ‘: [117.935838, 24.562585], ‘Xinyang Industrial Zone ‘: [118.008658, 24.529653],’ Dongfang Golf ‘: [118.057699, 24.529753], ‘Haicang Branch ‘: [118.033488, 24.488825] dongfu Panlong Road: [117.978316, 24.539794] [118.0367, 24.492256],} var data = [{name: ‘Song Yu Marina ‘, value: 330}, {name:’ song Yu Marina ‘, value: 210}, {name: ‘Song Yu Marina ‘, value: 210}, {name: ‘Dongfu Industrial Park ‘, value: 74}, {name:’ Xinyang industrial Park ‘, value: 35}, {name: ‘Oriental golf ‘, value: 120}, {name:’ Haicang branch ‘, value: 74}, {name: ‘Xinyang Industrial park ‘, value: 35}, {name:’ Oriental Golf ‘, value: 120}, {name: ‘Haicang branch ‘, value: 150}, {name: ‘fangfanglu ‘, value: 50}, {name:’ fangfanglu ‘, value: 100}, {name: ‘fangfanglu ‘, value: 50}, {name:’ fangfanglu ‘, value: 100}];
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({ type: ‘effectScatter’, coordinateSystem: ‘bmap’, data: [{ name: data[i].name, value: geoCoordMap[data[i].name].concat([data[i].value]) }], symbolSize: function (val) { return 10; }, showEffectOn: ‘render’, rippleEffect: { period: 2, brushType: ‘stroke’, scale: 3 }, hoverAnimation: true, label: { normal: { formatter: Function (params) {var info = ‘\ n \ n {strong1 |’ + params. Name + ‘} ‘+’ \ n \ n attention: city accused of ‘+’ two-thirds point digits’ + ‘\ n \ n monitoring equipment: Whether 4/5 ‘+’ networking: networking ‘+’ \ n \ n update date: ‘+’ {color3 | ‘+’ 2019-08-01 09:00:00 ‘+’} ‘return info;
}, position: [-170, -145], show: true, textStyle: {color: ‘# FFF ‘, size: ’35’}, backgroundColor: {// i % 2 === 0 ? ‘/images/red-f.png’ : ‘/images/grn-f.png’}, // Custom control (because label cannot parse HTML) rich: {// Set control reference name strong1: {fontSize: }, color1: {color: ‘#fff701’// yellow}, color2: {color: RGB (51, 51, 51), color2: {color: RGB (51, 51, 51); {color: ‘#fe0002’// red}, color5: {color: ‘#fe0002’// green}, 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 = ‘
‘ + Params. Name + ‘< h6 >’ + ‘< div class = “gis – data” >’ + ‘< p > AQI value: 35 < / p >’ + ‘< p > PM2.5 value: 47 < / p >’ + ‘< p > PM10 value: 35 < / p >’ + ‘< p > CO value: 64 < / p > ‘+’ < br / > ‘+’ < p > NO2 value: 21 < / p > ‘+’ < p > SO2 values: 45 < / p > ‘+’ < p > O3 value: 14 < / p > ‘+’ < p > primary pollutants: CO < / p > ‘+’ < / div > ‘+’ < div class = “gis – data” > ‘+’ < p > temperature: 35 ℃ < / p > ‘+’ < p > humidity: 87% < / p > ‘+’ < p > air quality: Light pollution < / p > ‘+’ < br / > ‘+’ < p > wind value: 64 < / p > ‘+’ < p > wind speed value: 21 < / p > ‘+’ < / div > ‘+’ < div class = “gis data -” style = “border – bottom: 0;” > ‘+’ < p > type: 35 < / p > ‘+’ < p > update time: 2019-07-19 15:05:21 < / p > ‘+’ < / div > ‘+’ < / div > ‘; //tipHtml += params.name + ‘
‘ + 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, ‘Haicang district ‘); function getBoundary2(map, city) { var bdary = new BMap.Boundary(); Bdary. Get (city, function (rs) {// clearOverlays(); // Clear the map overlay // idea: use the set of administrative division points and peripheral custom southeast northwest to form a ring mask layer //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] + “;” 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;” ; Var ply1 = new map. Polygon(ENWS + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + N_JW + EN_JW + E_JW, Opacity: # FFF, fillOpacity: “0 “}); // Build polygon overlay // map.addoverlay (ply1); // Add more layers if you need a solid color. Var ply = new bmap. Polygon(rs.boundaries[0], {strokeWeight: 2, strokeColor: 1) “#114bf3”, fillColor: “” }); map.addOverlay(ply); //map.setViewport(ply.getPath()); CenterAndZoom (new map.point (117.975388, 24.53241), 13); }); } var ecConfig = echarts.config; Function eConsole(param) {var mes = ‘[‘ + param.type +’] ‘; console.log(param); window.location.href = “./PointMonitor/SingleEnterpriseMonitor? name=” + param.name; } /* // ——- global universal 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(” current zoom level “+ ZoomNum); //$(“#ZoomNum”).html(ZoomNum); });