arcgis添加featerlayer图层并添加自定义chart图弹窗

// 设置弹窗

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 +='
' + 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)

你可能感兴趣的:(arcgis添加featerlayer图层并添加自定义chart图弹窗)