$(function(){
|
var bmapChart = echarts.init(document.getElementById('map'))
|
bmapChart.setOption({
|
bmap: {
|
center: [115.93675,28.701835],
|
zoom: 12,
|
roam: true,
|
mapStyle: {
|
styleJson: [{
|
'featureType': 'water',
|
'elementType': 'all',
|
'stylers': {
|
'color': '#234768'
|
}
|
}, {
|
'featureType': 'land',
|
'elementType': 'all',
|
'stylers': {
|
'color': '#183a5f'
|
}
|
}, {
|
'featureType': 'railway',
|
'elementType': 'all',
|
'stylers': {
|
'visibility': 'on'
|
}
|
}, {
|
'featureType': 'highway',
|
'elementType': 'all',
|
'stylers': {
|
'color': '#3f65ad',
|
'visibility': 'off'
|
}
|
}, {
|
'featureType': 'highway',
|
'elementType': 'labels',
|
'stylers': {
|
'visibility': 'off'
|
}
|
}, {
|
'featureType': 'arterial',
|
'elementType': 'geometry',
|
'stylers': {
|
'color': '#175fff'
|
}
|
}, {
|
'featureType': 'arterial',
|
'elementType': 'geometry.fill',
|
'stylers': {
|
'color': '#173758'
|
}
|
}, {
|
'featureType': 'poi',
|
'elementType': 'all',
|
'stylers': {
|
'visibility': 'on'
|
}
|
}, {
|
'featureType': 'green',
|
'elementType': 'all',
|
'stylers': {
|
'visibility': 'off'
|
}
|
}, {
|
'featureType': 'subway',
|
'elementType': 'all',
|
'stylers': {
|
'visibility': 'off'
|
}
|
}, {
|
'featureType': 'manmade',
|
'elementType': 'all',
|
'stylers': {
|
'color': '#1e4584'
|
}
|
}, {
|
'featureType': 'local',
|
'elementType': 'all',
|
'stylers': {
|
'color': '#183a5f'
|
}
|
}, {
|
'featureType': 'arterial',
|
'elementType': 'labels',
|
'stylers': {
|
'visibility': 'on'
|
}
|
}, {
|
'featureType': 'boundary',
|
'elementType': 'all',
|
'stylers': {
|
'color': '#1d4570'
|
}
|
}, {
|
'featureType': 'building',
|
'elementType': 'all',
|
'stylers': {
|
'color': '#1d4570'
|
}
|
}, // 行政标注
|
{
|
"featureType": "label",
|
"elementType": "labels.text.fill",
|
"stylers": {
|
"color": "#ffffff",
|
"visibility": "on"
|
}
|
},
|
{
|
"featureType": "label",
|
"elementType": "labels.text.stroke",
|
"stylers": {
|
"color": "#444444",
|
"visibility": "on"
|
}
|
}]
|
}
|
},
|
tooltip:{
|
trigger: 'item',
|
},
|
series: []
|
});
|
|
|
//echart获取百度地图实例对象
|
var ecModel = bmapChart._model;
|
var bmap = null;
|
ecModel.eachComponent('bmap', function (bmapModel) {
|
if(bmap == null){
|
bmap = bmapModel.__bmap;
|
}
|
});
|
var infoBoxTemp = null;
|
bmap.enableScrollWheelZoom(true);
|
//******************** 江西省边界线 *******************
|
getBoundary();
|
function getBoundary(){
|
var bdary = new BMap.Boundary();
|
var name = "江西省";
|
bdary.get(name, function(rs){ //获取行政区域
|
var count = rs.boundaries.length; //行政区域的点有多少个
|
for(var i = 0; i < count; i++){
|
var ply = new BMap.Polygon(rs.boundaries[i],
|
{
|
strokeWeight: 4, //设置多边形边线线粗
|
strokeOpacity: 1, //设置多边形边线透明度0-1
|
StrokeStyle: "solid", //设置多边形边线样式为实线或虚线，取值 solid 或 dashed
|
strokeColor: "#378eef", //设置多边形边线颜色
|
fillColor: "#ffffff",
|
fillOpacity:0.01
|
}); //建立多边形覆盖物
|
bmap.addOverlay(ply); //添加覆盖物
|
bmap.setViewport(ply.getPath()); //调整视野
|
}
|
});
|
}
|
|
|
siteQuery("W", "switchWater"); //水质
|
siteQuery("A", "switchAir"); //空气
|
siteQuery("S", "switchSoil"); //土壤
|
siteQuery("M", "switchWeater"); //气象
|
function siteQuery(elementType, switchtest){
|
$.ajax({
|
url: getNativePath() + "naturalFactors/findStationEleInfoByType.do",
|
type: "get",
|
data:{"elementType":elementType},
|
dataType: "json",
|
success: function(result) {
|
var markArr = [];
|
if(switchtest == "switchWater"){
|
siteQueryData(result, markArr, elementType);
|
}
|
layui.use(['form', 'layedit', 'laydate'], function(){
|
var form = layui.form, layer = layui.layer, layedit = layui.layedit, laydate = layui.laydate;
|
//监听指定开关
|
form.on('switch('+switchtest+')', function(data){
|
//判断上一个窗体是否存在，若存在则执行close
|
if(infoBoxTemp){ infoBoxTemp.close(); }
|
if(this.checked){
|
form.render();
|
siteQueryData(result, markArr, elementType);
|
}else{
|
for(var i=0; i<markArr.length; i++){
|
bmap.removeOverlay(markArr[i]);
|
}
|
}
|
});
|
});
|
}
|
});
|
}
|
|
function siteQueryData(result, markArr, elementType){
|
var myIcon = new BMap.Icon("images/water1.png", new BMap.Size(75, 75));
|
if(elementType == "A"){
|
myIcon = new BMap.Icon("images/default1.png", new BMap.Size(75, 75));
|
}else if(elementType == "S"){
|
myIcon = new BMap.Icon("images/soil1.png", new BMap.Size(75, 75));
|
}else if(elementType == "M"){
|
myIcon = new BMap.Icon("images/weather1.png", new BMap.Size(75, 75));
|
}
|
|
if(result.data.length <= 0){
|
return false;
|
}
|
for(var i=0; i<result.data.length; i++){
|
var point = new BMap.Point(result.data[i].lon, result.data[i].lat);
|
var mylable = new BMap.Label(result.data[i].stationName, {
|
offset:new BMap.Size(45, 27)
|
});
|
mylable.setStyle({ color : "#1bd0ad", fontSize : "14px", border:"0px", "background":"transparent"})
|
var marker = new BMap.Marker(point, {icon: myIcon});
|
var stcd = result.data[i].stationName;
|
marker.setLabel(mylable);
|
bmap.addOverlay(marker);
|
markArr.push(marker);
|
addClickHandler(stcd,marker, result.data[i]);
|
if(i == 0){
|
bmap.centerAndZoom(new BMap.Point(result.data[i].lon, result.data[i].lat), 8);
|
}
|
}
|
}
|
|
function addClickHandler(stcd, marker, result){
|
marker.addEventListener("click",function(e){
|
openInfo(stcd,e, result)
|
});
|
}
|
|
function openInfo(stcd,e, data){
|
// console.log(data)
|
//添加更新时间，根据图片路径进行判断
|
var uptime = data.valueList['0'].uptime;
|
var p = e.target;
|
var src = e.currentTarget.Bc.childNodes[0].childNodes[0].src;
|
if(src.indexOf('water') != -1){
|
var sthtml = '<div style="color: #56cedf;font-weight: bold;"><label>水环境:</label><span>'+ uptime + '</span></div>';
|
}else if(src.indexOf('default') != -1){
|
var sthtml = '<div style="color: #1bd0ad;font-weight: bold;"><label>空气:</label><span>'+ uptime + '</span></div>';
|
}else if(src.indexOf('soil') != -1){
|
var sthtml = '<div style="color: #fca501;font-weight: bold;"><label>土壤:</label><span>'+ uptime + '</span></div>';
|
}else if(src.indexOf('weather') != -1){
|
var sthtml = '<div style="color: #df5f13;font-weight: bold;"><label>气象:</label><span>'+ uptime + '</span></div>';
|
}
|
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
|
for(var j=0; j<data.valueList.length; j++){
|
if(data.valueList[j].unit == "无"){
|
data.valueList[j].unit = "";
|
}
|
if(typeof data.valueList[j].value != 'number'){
|
data.valueList[j].value = 0;
|
}
|
|
sthtml += '<div><label>'+data.valueList[j].fieldname+':</label><span>'+parseFloat(data.valueList[j].value).toFixed(2)+data.valueList[j].unit+'</span></div>'
|
}
|
sthtml = '<div class="map-pup-til">'+data.stationName+'</div><div class="map-pup">'+sthtml+'<div class="jiao-icon"><span></span></div></div>';
|
var infoBox = new BMapLib.InfoBox(bmap, sthtml, {
|
boxStyle:{
|
width: "260px",
|
height: "200px",
|
marginBottom: "35px",
|
marginleft:"6px",
|
backgroundColor:"#253b75",
|
color:"#fff",
|
border:"1px solid #188488",
|
borderRadius:"3px"
|
},
|
closeIconUrl: "images/close-pup.png",
|
closeIconMargin:'4px',
|
closeIconZIndex:1,
|
enableAutoPan: true,
|
align: INFOBOX_AT_TOP
|
});
|
//判断上一个窗体是否存在，若存在则执行close
|
if(infoBoxTemp){ infoBoxTemp.close(); }
|
infoBoxTemp = infoBox;
|
infoBox.open(point);
|
$('.map-pup').niceScroll({
|
cursorcolor: "#ccc",//#CC0071 光标颜色
|
cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
|
touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
|
cursorwidth: "5px", //像素光标的宽度
|
cursorborder: "0", // 游标边框css定义
|
cursorborderradius: "5px",//以像素为光标边界半径
|
autohidemode: false //是否隐藏滚动条
|
});
|
$(".infoBox").hover(function(){
|
bmap.disableScrollWheelZoom();
|
}, function(){
|
bmap.enableScrollWheelZoom();
|
})
|
}
|
|
});
|
