ArcGis Esri自定义弹出窗口

问题描述

我正在将Vue.js用于我的Web应用程序。我创建了一个自定义html popup元素，并尝试将其添加到UI（在示例中可以看到的房子图标顶部），但是我无法使其显示在单击的坐标上。我知道可以通过添加到视图UI并将位置设置为“手动”来做到这一点，但是找不到任何设置特定坐标的示例。预先感谢您的帮助。

  this.viewt.ui.add(document.getElementsByClassName("popup")[0],{position: "manual"});

example

模板代码

<template>
<div class="popup" v-if="openPopUp" ref="popupwindow">
        <article class="house-card" id="popup-test">
          <div class="img-wrapper">
            <img class="post-image"
                 src="https://www.comitatoaurora.com/wp-content/uploads/2019/11/contemporary-exterior.jpg"/>
            <div class="middle">
              €{{ Math.round(this.object.Price) }}
            </div>
          </div>
          <div class="article-details" :key="this.object.Address" @mouSEOver="hover = true"
               @mouseleave="hover = false">

            <div class="post-category">
              <div>
                {{
                  this.object.Address.replace(this.object.Address.substring(this.object.Address.indexOf(','),this.object.Address.indexOf(',') + 9),',')
                }}<span
                  style="margin: 0.3vw"></span>

              </div>
            </div>
            <div class="percentage-circle">
              <div class="progress-single">
                <v-progress-circular
                    color="rgba(81,87,102,0.99)"
                    :size="30"
                    :width="2"
                    :value="this.object.Risk"
                >{{ this.object.Risk }}
                </v-progress-circular>
                <div class="progress-text">
                  <p>Risk</p>
                  <p>score</p>
                </div>
              </div>
              <div class="progress-single">
                <v-progress-circular
                    color="rgba(81,0.99)"
                    :size="30"
                    :width="2"
                    :value="this.object.Gross_rental_yield*10"
                >{{
                    Math.round((this.object.Gross_rental_yield +
                        Number.EPSILON) * 10) / 10
                  }}
                </v-progress-circular>
                <div class="progress-text">
                  <p>Gross</p>
                  <p>Yield</p>
                </div>
              </div>


              <div class="progress-single">
                <v-progress-circular
                    color="rgba(81,0.99)"
                    :size="30"
                    :width="2"
                    :value="this.object.Net_yield*100/5"
                >{{ Math.round((this.object.Net_yield + Number.EPSILON) * 10) / 10 }}
                </v-progress-circular>
                <div class="progress-text">
                  <p>Net</p>
                  <p>Yield</p>
                </div>
              </div>
            </div>
            <div class="percentage-circle metrics-level">
              <div class="bottom-metric"><img height="12vh"
                                              src="../../public/img/year.svg"
                                              alt="year"/><b>{{
                  this.object.ConstructionYear
                }} </b></div>
              <div class="headerDivider"></div>

              <div class="bottom-metric"><img height="12vh"
                                              src="../../public/img/rent.svg"
                                              alt="rent"/><b>{{ this.object.Estimated_Rent }}€/mo</b>
              </div>
              <div class="headerDivider"></div>
              <div class="bottom-metric" style="margin-left: 0.15vw !important;"><img height="12vh"
                                                                                      src="../../public/img/square.svg"
                                                                                      alt="square"/>
                <b>{{ this.object.Sqm }}m<sup>2</sup></b></div>
            </div>
            <transition name="fadeo">
              <div v-if="hover" class="overlay">
                <router-link :to="{name:'card',params: { id: this.id }}">
                  <div class="overlay-text"> View Asset</div>
                </router-link>
              </div>
            </transition>
          </div>
        </article>
      </div>
      </template>

解决方法

弹出窗口有两种方法可以打开所选功能，

1. 例如选择一项功能时自动
2. 手动使用弹出式open方法。

如果选择1），则必须为图层或图形设置PopupTemplate。您可以通过两种方式为PopupTemplate定义自定义内容，例如使用功能或承诺。

ArcGIS API - PopupTemplate content

如果您选择2），则需要

1. 如果视图（自动打开为false），则禁用默认行为，
2. 收听点击事件，
3. 在每个点击事件上，以点击事件的地图点作为位置，手动打开弹出窗口（如果已选择功能）

view.popup.autoOpenEnabled = false; // <- disable view popup auto open
view.on("click",function (event) { // <- listen to view click event
  if (event.button === 0) { // <- check that was left button or touch
    view.popup.open({ // <- open popup
      location: event.mapPoint,// <- use map point of the click event
      fetchFeatures: true // <- fetch the selected features (if any)
    });

  }
});