一. 普通弹窗
// 配置弹窗内容
function setPopupTemplate () {
// 积水点
return {
titleExp:'$feature.name',
title:'{name}',
content: [{
type:'fields',
fieldInfos: [
{fieldName:'regionName',label:'区域' },
{fieldName:'name',label:'积水点名称' },
{fieldName:'pondingCondition',label:'积水点情况' },
{fieldName:'manageUnit',label:'管理单位' },
{fieldName:'originCode',label:'来源' },
{fieldName:'createTime',label:'上报时间' },
{fieldName:'annual',label:'年度' },
{fieldName:'address',label:'地址' }
]
}]
}
},
// 配置弹窗字段
function setFields () {
return [
{name:'regionName',alias:'区域',type:'string' },
{name:'name',alias:'积水点名称',type:'string' },
{name:'pondingCondition',alias:'积水点情况',type:'string' },
{name:'originCode',alias:'来源',type:'string' },
{name:'createTime',alias:'上报时间',type:'string' },
{name:'annual',alias:'年度',type:'string' },
{name:'address',alias:'地址',type:'string' },
{name:'manageUnit',alias:'管理单位',type:'string' }
]
},
// 配置图层显示点（图标）
function 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)