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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

兴诚

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值