arcgis for js Popup弹窗挂载vue组件

1.解决问题

点击图层里的要素时弹出popup，并在内容中content挂载业务组件，子组件中正常使用vue的生命周期与钩子函数。

2.实现方法

2.1.子组件Popup.vue

(这里只做简单的示例,可根据自己的业务需求设计组件)

<template>
  <div>
    {{obj}}
  </div>
</template>
<script>
  export default {
    components: {},
    props: ['obj'],
  }

2.2.父组件 MapView.vue（包含视图点击事件、popup打开与子组件挂载到popup）

• 引入所需的

import TwoMap from '@/components/2D-map'
import Popup from './Popup'
import Vue from 'vue'

• 视图点击事件声明

export function viewOnClickEventLOad(view, callback) {
  view.popup.autoOpenEnabled = false
  view.on('click', (event) => {
    view.hitTest(event).then(function(response) {
      if (response.results[0]) {
        callback({
          event,
          response,
        })
      }
    })
  })
}

• 置空之前点击的高亮

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

• 视图点击以后的回调

viewOnClickEventLOad(self.view, ({event, response}) => {
  let graphic = response.results[0].graphic
  // 置空之前的高亮
  self.highlight = removeHighlight(self.highlight)
  // 高亮点击的要素
  self.view.whenLayerView(graphic.layer).then(function(lyrView) {
   self.highlight = lyrView.highlight(graphic)
  })
  self.view.goTo(graphic.geometry)
  self.openPopup(event.mapPoint, graphic)
});

• 打开popup

openPopup(point, graphic) {
    let self = this;
    // 要素中的属性对象 graphic.attributes
    let name = graphic.attributes.name
    self.view.popup.open({
      title: name,
      location: point,
      content:'加载中...'
    })
    const p = Vue.extend(Popup)
    let vm = new p({
      propsData: {
        obj: '传参'
      }
    })
    vm.$mount();
    vm.$nextTick(()=>{
      self.view.popup.content = vm.$el
    })
  }