ArcGis Esri 自定义弹出窗口

Posted 2023-02-21

【中文标题】ArcGis Esri 自定义弹出窗口

【英文标题】：ArcGis Esri Custom Popup

【发布时间】：2021-02-24 14:28:45

【问题描述】：

我将 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"
                    :
                    :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"
                    :
                    :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"
                    :
                    :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 
                                              src="../../public/img/year.svg"
                                              /><b>
                  this.object.ConstructionYear
                 </b></div>
              <div class="headerDivider"></div>

              <div class="bottom-metric"><img 
                                              src="../../public/img/rent.svg"
                                              /><b> this.object.Estimated_Rent €/mo</b>
              </div>
              <div class="headerDivider"></div>
              <div class="bottom-metric" style="margin-left: 0.15vw !important;"><img 
                                                                                      src="../../public/img/square.svg"
                                                                                      />
                <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>

【问题讨论】：

这很奇怪，能不能把弹窗模板代码加进去，你是怎么加到图层里的？

是的，我在最初的问题中添加了模板代码

我正在创建 MapView 并尝试向其 UI 添加一个元素，因为它是完全自定义的

【参考方案1】：

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

自动，例如在选择功能时， 手动，使用弹出open 方法。

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

ArcGIS API - PopupTemplate content

如果您选择了 2)，那么您需要，

如果视图禁用默认行为（自动打开为 false）， 监听点击事件， 在每个点击事件上手动打开弹出窗口（如果选择了一个功能），点击事件的地图点作为位置

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

  
);

【讨论】：

问题是，我的弹出窗口是作为常规 html 元素添加的，而不是 popUpTemplate，因为仅使用“内容”字段创建它提供的样式选项太有限。所以使用 'view.popup.open' 在这里不起作用。我正在寻找基本相同的功能，但要添加 HTMLElement

抱歉耽搁了......单击并浮动您的自定义弹出窗口以相应地显示，iii）在地图上标记所选功能并将您的内容显示在固定位置..我认为 i）和 iii）是很好的可能性并且易于实施，ii）取决于您的你的弹出组件有多通用

谢谢，我认为屏幕位置的想法对我有用！

添加这一行解决了我的问题（view.popup.open 没有创建弹出窗口） - 非常感谢 cabesuon: view.popup.autoOpenEnabled = false;