/**
|
* 企业信访投诉图层
|
*/
|
function ComplaintLayer(options) {
|
this.isShow = false
|
// 吕巷区域企业信访图层
|
this.complaints = []
|
this.markers = []
|
|
// 吕巷区域企业生产工艺图层
|
this.companys = []
|
this.markers2 = []
|
|
// 吕巷区域企业违法风险等级图层
|
this.assessments = []
|
this.markers3 = []
|
|
// 吕巷区域信访来源地
|
this.sources = []
|
this.markers4 = []
|
this.markers4_1 = []
|
|
// 吕巷区域信访集中区
|
this.centers = []
|
this.markers5 = []
|
this.markers5_1 = []
|
|
this.showTypes = [1, 2, 3, 4, 5, 6]
|
|
this.zoomLevel = 14
|
}
|
|
ComplaintLayer.prototype = {
|
init: function () {
|
this.searchBox()
|
},
|
enable: function () {
|
this.isEnable = true
|
this.uiChange(true)
|
},
|
disable: function () {
|
this.isEnable = false
|
this.uiChange(false)
|
},
|
/**
|
* UI显示隐藏变化
|
*/
|
uiChange: function (isShow) {
|
if (isShow) {
|
$('#complaint_type').slideDown("fast")
|
} else {
|
$('#complaint_type').slideUp("fast")
|
}
|
},
|
searchBox: function () {
|
var that = this
|
$('.complaint-check').on('click', function () {
|
var type = parseInt(this.value)
|
var i = that.showTypes.indexOf(type)
|
if (i == -1) {
|
that.showTypes.push(type)
|
} else {
|
that.showTypes.splice(i, 1)
|
}
|
that.refreshContent()
|
MapUtil.addViews(that.markers, false)
|
})
|
},
|
toggleComplaint: function () {
|
this.isShow = !this.isShow
|
if (!this.isShow) {
|
this.disable()
|
MapUtil.removeViews(this.markers)
|
} else {
|
this.enable()
|
DataUtil.toggleLoading()
|
this.getData(function () {
|
MapUtil.addViews(this.markers)
|
DataUtil.toggleLoading()
|
}.bind(this))
|
}
|
},
|
toggleComplaint2: function () {
|
this.isShow2 = !this.isShow2
|
if (!this.isShow2) {
|
MapUtil.removeViews(this.markers2)
|
} else {
|
DataUtil.toggleLoading()
|
this.getData2(function () {
|
MapUtil.addViews(this.markers2)
|
DataUtil.toggleLoading()
|
}.bind(this))
|
}
|
},
|
toggleComplaint3: function () {
|
this.isShow3 = !this.isShow3
|
if (!this.isShow3) {
|
MapUtil.removeViews(this.markers3)
|
} else {
|
DataUtil.toggleLoading()
|
this.getData3(function () {
|
MapUtil.addViews(this.markers3)
|
DataUtil.toggleLoading()
|
}.bind(this))
|
}
|
},
|
toggleComplaint4: function () {
|
this.isShow4 = !this.isShow4
|
this.zoomEvent(4)
|
if (!this.isShow4) {
|
MapUtil.removeViews(this.markers4)
|
MapUtil.removeViews(this.markers4_1)
|
} else {
|
DataUtil.toggleLoading()
|
this.getData4(function () {
|
MapUtil.addViews(this.markers4)
|
MapUtil.addViews(this.markers4_1)
|
DataUtil.toggleLoading()
|
}.bind(this))
|
}
|
},
|
toggleComplaint5: function () {
|
this.isShow5 = !this.isShow5
|
this.zoomEvent(5)
|
if (!this.isShow5) {
|
MapUtil.removeViews(this.markers5)
|
MapUtil.removeViews(this.markers5_1)
|
} else {
|
DataUtil.toggleLoading()
|
this.getData5(function () {
|
MapUtil.addViews(this.markers5)
|
MapUtil.addViews(this.markers5_1)
|
DataUtil.toggleLoading()
|
}.bind(this))
|
}
|
},
|
getData: function (callback) {
|
if (this.complaints.length === 0) {
|
HttpService.getComplaint(function (data) {
|
this.complaints = data
|
this.refreshMarkers(data, callback)
|
}.bind(this))
|
} else {
|
callback()
|
}
|
},
|
getData2: function (callback) {
|
if (this.companys.length === 0) {
|
HttpService.getCompanyInfo(function (data) {
|
this.companys = data
|
this.refreshMarkers2(data, callback)
|
}.bind(this))
|
} else {
|
callback()
|
}
|
},
|
getData3: function (callback) {
|
if (this.assessments.length === 0) {
|
HttpService.getAssessment(function (data) {
|
this.assessments = data
|
this.refreshMarkers3(data, callback)
|
}.bind(this))
|
} else {
|
callback()
|
}
|
},
|
getData4: function (callback) {
|
if (this.sources.length === 0) {
|
this.sources = deBugSources
|
this.refreshMarkers4(this.sources, callback)
|
} else {
|
callback()
|
}
|
},
|
getData5: function (callback) {
|
if (this.centers.length === 0) {
|
this.centers = deBugCenters
|
this.refreshMarkers5(this.centers, callback)
|
} else {
|
callback()
|
}
|
},
|
refreshMarkers: function (data, callback) {
|
var lnglats = []
|
this.complaints.forEach(e => {
|
if (e.ciLng != undefined) {
|
lnglats.push([e.ciLng, e.ciLat])
|
}
|
});
|
MapUtil.convertFromGPS(lnglats, function (gd) {
|
for (let i = 0; i < data.length; i++) {
|
let c = data[i]
|
let lngLat = gd[i]
|
let content = this.getMarkerContent(c)
|
var marker = new AMap.Marker({
|
position: new AMap.LngLat(...lngLat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
title: c.ciName,
|
content: content,
|
animation: "AMAP_ANIMATION_DROP"
|
});
|
this.markers.push(marker)
|
}
|
callback()
|
}.bind(this))
|
},
|
refreshMarkers2: function (data, callback) {
|
var lnglats = []
|
this.companys.forEach(e => {
|
if (e.ciLongitude != undefined) {
|
lnglats.push([e.ciLongitude, e.ciLatitude])
|
}
|
});
|
MapUtil.convertFromGPS(lnglats, function (gd) {
|
for (let i = 0; i < data.length; i++) {
|
let c = data[i]
|
let lngLat = gd[i]
|
let content = this.getMarkerContent2(c)
|
var marker = new AMap.Marker({
|
position: new AMap.LngLat(...lngLat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
title: c.ciName,
|
content: content,
|
animation: "AMAP_ANIMATION_DROP"
|
});
|
this.markers2.push(marker)
|
}
|
callback()
|
}.bind(this))
|
},
|
refreshMarkers3: function (data, callback) {
|
var lnglats = []
|
this.assessments.forEach(e => {
|
if (e.ciLng != undefined) {
|
lnglats.push([e.ciLng, e.ciLat])
|
}
|
});
|
MapUtil.convertFromGPS(lnglats, function (gd) {
|
for (let i = 0; i < data.length; i++) {
|
let c = data[i]
|
let lngLat = gd[i]
|
let content = this.getMarkerContent3(c)
|
var marker = new AMap.Marker({
|
position: new AMap.LngLat(...lngLat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
title: c.ciName,
|
content: content,
|
animation: "AMAP_ANIMATION_DROP"
|
});
|
this.markers3.push(marker)
|
}
|
callback()
|
}.bind(this))
|
},
|
refreshMarkers4: function (data, callback) {
|
data.forEach(d => {
|
var circle = new AMap.Circle({
|
center: new AMap.LngLat(...d.center), // 圆心位置
|
radius: d.radius, //半径
|
strokeColor: "#A1C2F8", //线颜色
|
strokeOpacity: 1, //线透明度
|
strokeWeight: 1, //线粗细度
|
fillColor: "#A1C2F8", //填充颜色
|
fillOpacity: 0.35 //填充透明度
|
})
|
var text = new AMap.Text({
|
text: d.name,
|
position: new AMap.LngLat(...d.center),
|
style: {
|
'font-size': '16px',
|
'color': '#333333',
|
'fontWeight': '600',
|
'background-color': '#ffffff55'
|
}
|
})
|
this.markers4.push(circle)
|
this.markers4_1.push(text)
|
})
|
callback()
|
},
|
refreshMarkers5: function (data, callback) {
|
data.forEach(d => {
|
var circle = new AMap.Circle({
|
center: new AMap.LngLat(...d.center), // 圆心位置
|
radius: d.radius, //半径
|
strokeColor: "#DEE4E4", //线颜色
|
strokeOpacity: 1, //线透明度
|
strokeWeight: 1, //线粗细度
|
fillColor: "#DEE4E4", //填充颜色
|
fillOpacity: 0.35 //填充透明度
|
})
|
var text = new AMap.Text({
|
text: d.name,
|
position: new AMap.LngLat(...d.center),
|
style: {
|
'font-size': '16px',
|
'color': '#333333',
|
'fontWeight': '600',
|
'background-color': '#ffffff55'
|
}
|
})
|
this.markers5.push(circle)
|
this.markers5_1.push(text)
|
})
|
callback()
|
},
|
refreshContent: function () {
|
for (let i = 0; i < this.complaints.length; i++) {
|
let c = this.complaints[i]
|
let content = this.getMarkerContent(c)
|
this.markers[i].setContent(content)
|
}
|
},
|
getMarkerContent: function (c) {
|
var show = false
|
var content = `<div>${c.index} ${c.ciName}</div>`
|
c.result.forEach(t => {
|
if (this.showTypes.indexOf(t.type) == -1) {
|
return
|
}
|
show = true
|
let icon = this.getIcon(t.type)
|
content += `<div>
|
<img src="${icon}" style="width: 16px;height: 16px"/>
|
${t.typeName}：${t.count}个 占比：${(t.percent * 100).toFixed(2)}%
|
</div>`
|
});
|
var mc = '<div>'
|
mc += '<img src="./asset/mipmap/company.png" style="width: 30px;height: 30px"/>'
|
if (show) {
|
mc += '<div class="marker-content">'
|
mc += content
|
mc += '</div>'
|
}
|
mc += '</div>'
|
|
return mc
|
},
|
getIcon: function (type) {
|
switch (type) {
|
case 1:
|
return "./asset/mipmap/stink.png"
|
case 2:
|
return "./asset/mipmap/pungent.png"
|
case 3:
|
return "./asset/mipmap/dust.png"
|
case 4:
|
return "./asset/mipmap/plastics.png"
|
case 5:
|
return "./asset/mipmap/oil_paint.png"
|
case 6:
|
return "./asset/mipmap/other_smell.png"
|
default:
|
return "./asset/mipmap/other_smell.png"
|
}
|
},
|
getMarkerContent2: function (c) {
|
var content = ''
|
// `<div>${c.ciIndex} ${c.ciName}</div>`
|
|
var icon = "./asset/mipmap/c_level_no.png",
|
color = 'green'
|
content += `<div style='color: ${color};'>${c.ciMainBusiness}</div>`
|
var mc = '<div>'
|
mc += `<img src="${icon}" style="width: 30px;height: 30px"/>`
|
mc += '<div class="marker-content">'
|
mc += content
|
mc += '</div>'
|
mc += '</div>'
|
|
return mc
|
},
|
getMarkerContent3: function (c) {
|
var content = ''
|
// `<div>${c.ciIndex} ${c.ciName}</div>`
|
|
var icon = "./asset/mipmap/c_level_no.png",
|
color = 'green'
|
switch (c.risk) {
|
case '低风险':
|
color = 'green'
|
icon = "./asset/mipmap/c_level_0.png"
|
break;
|
case '中风险':
|
color = 'rgb(187, 108, 4)'
|
icon = "./asset/mipmap/c_level_1.png"
|
break;
|
case '高风险':
|
color = 'red'
|
icon = "./asset/mipmap/c_level_2.png"
|
break;
|
default:
|
icon = "./asset/mipmap/c_level_no.png"
|
break;
|
}
|
content += `<div style='color: ${color};'>${c.risk}</div>`
|
var mc = '<div>'
|
mc += `<img src="${icon}" style="width: 30px;height: 30px"/>`
|
mc += '<div class="marker-content">'
|
mc += content
|
mc += '</div>'
|
mc += '</div>'
|
|
return mc
|
},
|
_onZoom: function () {
|
var context = mapController.complaintLayer
|
var zoom = MapUtil._map.getZoom()
|
if (zoom >= context.zoomLevel) {
|
if (context.tags.indexOf(4) != -1) {
|
MapUtil.addViews(context.markers4_1, false)
|
}
|
if (context.tags.indexOf(5) != -1) {
|
MapUtil.addViews(context.markers5_1, false)
|
}
|
} else {
|
MapUtil.removeViews(context.markers4_1, false)
|
MapUtil.removeViews(context.markers5_1, false)
|
}
|
context.lastZoom = zoom
|
},
|
zoomEvent: function (tag) {
|
if (this.tags == undefined) {
|
this.tags = []
|
}
|
var i = this.tags.indexOf(tag)
|
if (i == -1) {
|
this.tags.push(tag)
|
} else {
|
this.tags.splice(i, 1)
|
}
|
if (this.tags.length == 0) {
|
MapUtil._map.off('zoomend', this._onZoom)
|
} else {
|
MapUtil._map.on('zoomend', this._onZoom)
|
}
|
}
|
}
|
