AntVl7使用之自定义信息窗体

---

---

前言

本篇记录在vue中使用和学习AntVL7过程中、困扰了我许久的在信息框中引用自己定义的组件的实现

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、关于信息框Popup

不得不说其实L7的文档已经非常详细了、小的细节我就不再赘述，主要记录一下setDOMContent方法。
AntVL7文档：https://l7.antv.vision/zh/docs/api/l7

二、关于setDOMContent方法

1.认识

官网上的解释只有一行：
参数 htmlNode dom 对象 区别于 setHtml 对象只能传字符串
说实话对于小白来讲不是很好理解，首先htmlNode dom 对象是什么？实际上说白了就是接收一个dom结点，那么他需要一个dom节点我们要先创造一个虚拟节点再将需要的元素加入么？但是这么做和直接用setHTML方法又没有区别了甚至更复杂。这里我们可以想到在vue.js 的API中有个el选项，可以获取到vue的dom。那么问题就简单起来了。

2.实现

代码如下（示例）：

<template>
<div>
  <div id="map">
  </div>
  <div class="demo">
  //直接引入组件用v-show隐藏
  //此处不可以用v-if、v-if无法在页面加载时el获取到dom
    <test-demo v-show="flag" ref="test" style="z-index: 100;position: absolute"></test-demo>
  </div>

</div>
</template>

<script>
import { Scene,PointLayer,Popup } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
import TestDemo from "@/components/TestDemo";
export default {
  name: "BascisMap",
  data(){
    return{
      flag:false,
      data:[
        {
          x:121.456665,
          y:31.256805
        }
      ]
    }
  },
  components:{
    TestDemo
  },
  methods:{
    mapdraw() {
      const scene = new Scene({
        id: 'map',
        map: new GaodeMap({
          pitch: 0,
          style: 'light',
          center: [121.469889, 31.239022],
          zoom: 13,
        }),
      });
      const pointLayer = new PointLayer({})
          .source(this.data, {
            parser: {
              type: 'json',
              x: 'x',
              y: 'y'
            }
          })
          .shape('circle')
          .size(10)
          .active(true)
          .color('#5CCEA1')
          .style({
            opacity: 0.9,
            strokeWidth: 2
          });
          //添加点击事件
      pointLayer.on('click', e => {
      //将组件显示
        this.flag = true;
        const popup = new Popup({
          offsets: [0, 0],
          closeButton: false
        }).setLnglat(e.lngLat)
            .setDOMContent(this.$refs.test.$el)//将el获取到的dom传入setDOMContent方法
        scene.addPopup(popup)

      })
      scene.addLayer(pointLayer);
    }
    },
  mounted() {
    this.mapdraw()
  }
}
</script>

# 总结

本篇文章记录在学习中遇到的小问题、希望可以给学习中的大家一点小帮助。