ArcGis Esri 自定义弹出窗口

Question

我将 Vue.js 用于我的 Web 应用程序。我创建了一个自定义 html 弹出元素并尝试将其添加到 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, 87, 102, 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, 87, 102, 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>

Answer 1

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

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)
    });

  }
});