// 设置弹窗
setPopupTemplate () {
// 积水点
return {
titleExp:'$feature.name',
title:'{name}',
content:function (res) {
var param = {
hazardId: res.graphic.attributes.id,
pageNum:1,
pageSize:10
}
return getPointDeviceData(param).then(res => {
const xData = [];const yData = []
res.data.list.forEach(item => {
xData.push(item.collectTime)
yData.push(item.waterLevel)
})
// this.dealData(res.data.list)
const chartOption = {
grid: {
width:'90%',
top:'32px',
bottom:'24px'
},
legend: {},
tooltip: {
trigger:'axis',
formatter:function (params) {
let relVal = params[0].name
for (let i =0,l = params.length;i
relVal +='<br/>' + params[i].marker + params[i].seriesName +' : ' + params[i].value +'米'
}
return relVal
}
},
xAxis: {
type:'category',
data:xData
},
yAxis: {
name:'(m)',
type:'value'
},
series: [{
name:'积水',
data:yData,
type:'line',
itemStyle: {
color:'#69a8f4'
}
}]
}
const divElement =document.createElement('div')
divElement.style.width ='400px'
divElement.style.height ='200px'
divElement.id ='main'
// 初始化 echart
const echart = echarts.init(divElement)
echart.setOption(chartOption)
return divElement
})
}
}
},
// 设置显示字段
setFields () {
return [
{name:'name',alias:'积水点名称',type:'string' }
]
},
// 设置点图标
setRenderer () {
const symbol = {
type:'picture-marker',
url:require('@/assets/images/amap/电子水尺-在监测.png'),
width:'24px',
height:'24px'
}
return {
type:'simple',
symbol:symbol
}
}
// 配置图层
function setPoint (data, key) {
const graphics = []
let graphic
const featureLayer =new this.$esri.FeatureLayer()
const popupTemplate = setPopupTemplate()
const fields = setFields()
if (data.length ===0) {
return console.info('data为空')
}
// 装载数据
for (let i =0;i < data.length;i++) {
graphic =new this.$esri.Graphic({
geometry: {
type:'point',
longitude: data[i].longitude,
latitude: data[i].latitude
},
attributes: data[i]
})
graphics.push(graphic)
}
/**
* 设置feature属性
*/
featureLayer.objectIdField ='id'
featureLayer.geometryType ='point'
featureLayer.source =graphics
featureLayer.fields =fields
featureLayer.outFields = ['*']
featureLayer.popupTemplate =popupTemplate
featureLayer.renderer = setRenderer()
featureLayer.labelingInfo = {
labelExpressionInfo: {
expression:popupTemplate.titleExp
},
labelPlacement:'above-center'
}
return featureLayer
},
// 添加图层，自行根据自己代码添加
this.currentLayer =this.setPoint(data.data,'memberMap')
JTMapKit.mapView.map.layers.add(this.currentLayer)
