arcgis实现框架配置气泡弹框及风场

一、配置信息

气泡弹出配置

{
  layerCode: 'dianwei',
  isRLayerPanel: true,
  url: '/static/geojson/point/station.json',
  dataPath: 'data/stationList/list',
  dataLongitudeField: 'longitude',
  dataLatitudeField: 'latitude',
  geoType: 'point',
  opacity: 0.8,
  floatLabelInfo: {floatLabelField: 'stationName', offsetX: 8, offsetY: -16},
  CustomPopupTemplate: {
    titleField: 'stationName',
    // content: '<table border="1" bordercolor="#99ccff" style="width: 99%">' +
    //   '<tr><td>站名</td><td>{stationName}</td></tr>' +
    //   '<tr><td>AQI</td><td>{aqi}</td></tr>' +
    //   '<tr><td>so2</td><td>{so2}</td></tr>' +
    //   '<tr><td>站名</td><td>{stationName}</td></tr>' +
    //   '<tr><td>AQI</td><td>{aqi}</td></tr>' +
    //   '<tr><td>so2</td><td>{so2}</td></tr>' +
    //   '<tr><td>站名</td><td>{stationName}</td></tr>' +
    //   '<tr><td>AQI</td><td>{aqi}</td></tr>' +
    //   '<tr><td>so2</td><td>{so2}</td></tr>' +
    //   '<tr><td>站名</td><td>{stationName}</td></tr>' +
    //   '<tr><td>AQI</td><td>{aqi}</td></tr>' +
    //   '<tr><td>so2</td><td>{so2}</td></tr>' +
    //   '<tr><td>站名</td><td>{stationName}</td></tr>' +
    //   '<tr><td>AQI</td><td>{aqi}</td></tr>' +
    //   '<tr><td>so2</td><td>{so2}</td></tr>' +
    //   '<tr><td>站名</td><td>{stationName}</td></tr>' +
    //   '<tr><td>AQI</td><td>{aqi}</td></tr>' +
    //   '<tr><td>so2</td><td>{so2}</td></tr>' +
    //   '<tr><td>站名</td><td>{stationName}</td></tr>' +
    //   '<tr><td>AQI</td><td>{aqi}</td></tr>' +
    //   '<tr><td>so2</td><td>{so2}</td></tr>' +
    //   '<tr><td>站名</td><td>{stationName}</td></tr>' +
    //   '<tr><td>AQI</td><td>{aqi}</td></tr>' +
    //   '<tr><td>so2</td><td>{so2}</td></tr>' +
    //   '<tr><td>站名</td><td>{stationName}</td></tr>' +
    //   '<tr><td>AQI</td><td>{aqi}</td></tr>' +
    //   '<tr><td>so2</td><td>{so2}</td></tr>' +
    //   '<tr><td>站名</td><td>{stationName}</td></tr>' +
    //   '<tr><td>AQI</td><td>{aqi}</td></tr>' +
    //   '<tr><td>so2</td><td>{so2}</td></tr>' +
    //   '<tr><td>站名</td><td>{stationName}</td></tr>' +
    //   '<tr><td>AQI</td><td>{aqi}</td></tr>' +
    //   '<tr><td>so2</td><td>{so2}</td></tr>' +
    //   '</table>',
    content: '<iframe width="600" height="500" src="https://blog.csdn.net/weixin_42496466?type=blog"></iframe>',
    width: 800,
    height: 700,
    offsetX: 8,
    offsetY: -16
  },
  title: '点位',
  location: {longitude: 115.8176488199009, latitude: 35.13617089683784, level: 7.996824109663511},
  visible: false,
  serviceType: 'GraphicsLayer'
}

floatLabelInfo：配置浮动框展示字段及位置便宜

CustomPopupTemplate：配置弹框标题、弹框内容及弹框长宽大小（内容{}实现模板）

风场配置

{
  layerCode: 'windy',
  isRLayerPanel: true,
  title: '风场',
  url: '/static/json/2022011300.json',
  opacity: 1,
  location: {longitude: 116.11704458402367, latitude: 34.25804927841997, level: 9.808516864898834},
  visible: true,
  serviceType: 'windy'
}

风场解析

arcgis2d.prototype.addWindyLayer = function (layerinfo) {
  let _this = this
  getMapData(layerinfo.url).then((res) => {
    if (layerinfo.dataPath != undefined && layerinfo.dataPath != "") {
      let dp = layerinfo.dataPath.split('/')
      for (let i = 0; i < dp.length; i++) {
        res = res[dp[i]]
      }
    }
    _this.winDatas[layerinfo.layerCode] = res
    if (layerinfo.visible == true){
      _this.windyUtil.createWindLayer(res)
    }
  });
}
arcgis2d.prototype.setWindyVisible = function (layerId, visible) {
  if (visible) {
    this.windyUtil.createWindLayer(this.winDatas[layerId])
  } else {
    this.windyUtil.clearWindy()
  }
}

二、浮动气泡及弹框微件设计

三、效果展示

 

三维cesium风场实现请参照：

vue+cesium实现风场_兴诚的博客-CSDN博客_cesiumcesium实现风场https://blog.csdn.net/weixin_42496466/article/details/123501757

  感谢支持技术分享，请扫码点赞支持：

技术合作交流qq:2401315930