arcgis for js vue组件挂载之升级

1.解决弹窗中有异步请求，得到数据后显示弹窗
2.解决地图弹窗自动弹窗禁止后，不影响其他简单的地图弹窗自动打开（点击落点就打开内部设置好的templatePopup模板内容）
3.兼容设置多个类型的弹窗

封装的popup.js

export function setPopup(that) {
  const { mapView } = window
  viewOnClickEventLoad(mapView, that, ({ event, graphic, type }) => {
    clearComponent(that)
    // 高亮点击的要素
    mapView.whenLayerView(graphic.layer).then(function (lyrView) {
      window.highlight = lyrView.highlight(graphic)
    })
    mapView.goTo(graphic.geometry)
    openPopup(event.mapPoint, graphic, that, type)
  })
}

function viewOnClickEventLoad(view, that, callbackfun) {
  view.popup.autoOpenEnabled = false // 禁止自动弹窗
  view.on('click', (event) => {
    view.hitTest(event).then(function (response) {
      const { results } = response
      console.log({ results })
      if (results.length) {
        const aboutVideoIds = ['video', 'layer_keyinformation_realtimevideo_gonganshipin']

        const videoFeature = results.find((result) => {
            const id = result.graphic.layer.id
            return aboutVideoIds.some(item => id.includes(item))
        })
        const eventFeature = results.find((result) => {
            const id = result.graphic.layer.id
            return id.includes('_eventPoint')
        })
        const iotFeature = results.find((result) => {
            const id = result.graphic.layer.id
            return id.includes('iot-equipment')
        })

        const commonFeature = results.find((result) => { return result.graphic.layer.id.includes('_circleQueryResultGraphicsLayer') })

        if (videoFeature && videoFeature.graphic) { // 点击的是视频落点
          callbackfun({ event, graphic: videoFeature.graphic, type: 'video' })
        } else if (eventFeature && eventFeature.graphic) { // 点击的是事件落点
          callbackfun({ event, graphic: eventFeature.graphic, type: 'event' })
        } else if (iotFeature && iotFeature.graphic) { // 点击的是物联设备落点
          callbackfun({ event, graphic: iotFeature.graphic, type: 'iot' })
        } else if (commonFeature && commonFeature.graphic) { // 点击的是常规落点
          const { graphic } = commonFeature
          clearComponent(that)
          view.popup.open({
            location: graphic.geometry.centroid,
            features: [graphic]
          })
        }
      } else {
        view.popup.close()
        clearComponent(that)
      }
    })
  })
}

// 卸载组件 及清空高亮
function clearComponent(that) {
  // 卸载视频挂载
  that.$livePlay.unInstall()
  // 卸载事件挂载
 that.$eventDialog.unInstall()
  // 卸载设备挂载
  that.$iotDialog.unInstall()
  // 置空之前的高亮
  window.highlight = removeHighlight(window.highlight)
}

export function removeHighlight(highlight) {
  if (highlight) {
    highlight.remove()
  }
  return null
}

function openPopup(point, graphic, that, type) {
  // 要素中的属性对象 graphic.attributes
  const data = graphic.attributes
  const { LV_2_NAME, NAME } = data
  const mapOption = {
    video: { title: NAME, compoName: '$livePlay' },
    event: { title: LV_2_NAME, compoName: '$eventDialog' },
    iot: { title: '设备详情', compoName: '$iotDialog' }
  }
  // 手动open弹窗
  window.mapView.popup.open({
    title: mapOption[type].title,
    location: point,
    content: '加载中...'
  })
  // 挂在弹窗组件
  that[mapOption[type].compoName].install(data, that)
}

在地图初始化的时候调用popup.js中 setPopup方法

initMap() {
        const basemapConfig = getBasemapConfig('moumou区', 'dark')
        console.log({ basemapConfig })
        const basemap = createBasemap(basemapConfig)
        const view = createMapView('map-box', basemap)
        window.mapView = view
        // mapView加载完成后的代码可以写这里 //
        view.when(
          () => {
            // This function will execute once the promise is resolved
            view.zoom = 14
            // 隐藏左上角放大缩小插件
            view.ui.components = []

           
            this.initTheme()
            this.mapReady = true
            this.$store.commit('SET_MAPREADY', true)
            setPopup(this) //
          },
          error => {
            // This function will execute if the promise is rejected due to an error
            console.error(new Error(error))
          }
        )
        // 隐藏停靠按钮
        view.popup.dockOptions.buttonEnabled = false
        // 隐藏放大缩小
        view.popup.viewModel.includeDefaultActions = false
      },