#vue.js #arcgis #esri #arcgis-js-api
#vue.js #arcgis #esri #arcgis-js-api
Вопрос:
Я использую Vue.js для моего веб-приложения. Я создал пользовательский всплывающий элемент html и попытался добавить его в пользовательский интерфейс (поверх значка дома, который вы можете видеть в примере), но я не могу сделать так, чтобы он отображался в координатах, на которые нажимается. Я знаю, что могу сделать это, добавив в пользовательский интерфейс view и установив положение «вручную», но я не смог найти ни одного примера установки конкретных координат. Заранее благодарю вас за помощь.
this.viewt.ui.add(document.getElementsByClassName("popup")[0], {position: "manual"}); Код шаблона
<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> Комментарии:
1. Это странно, вы можете добавить код шаблона всплывающего окна ?, и как вы добавляете его в слой ?.
2. да, я добавил код шаблона к первоначальному вопросу
3. Я создаю MapView и пытаюсь добавить элемент в его пользовательский интерфейс, поскольку он полностью настраиваемый
Ответ №1:
Существует два способа открытия всплывающего окна над выбранным объектом,
- автоматически, например, при выборе объекта,
- вручную, используя
openметод всплывающего окна.
Если вы выбрали 1), вам необходимо установить PopupTemplate для слоя или графики. У вас есть несколько способов определить пользовательский контент для PopupTemplate , например, с помощью функции или обещания.
ArcGIS API — содержимое PopupTemplate
Если вы выбрали 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)
});
}
});
Комментарии:
1. дело в том, что мое всплывающее окно добавляется как обычный html-элемент, а не popUpTemplate, поскольку его создание только с использованием поля «содержимое» предлагает слишком ограниченные возможности оформления. Поэтому использование ‘view.popup.open’ здесь не сработает. я ищу в основном ту же функцию, но для добавления htmlэлемента
2. Извините за задержку.. Я вижу .. Итак, я думаю, что у вас есть несколько вариантов, i) вы можете сохранить всплывающее окно esri и использовать свой контент, ii) вы можете выбрать положение экрана по щелчку и переместить свое пользовательское всплывающее окно для соответствующего отображения, iii) отметьте выбранный объект на карте и отобразите свой контент висправлена позиция .. Я думаю, что i) и iii) являются хорошими возможностями и просты в реализации, ii) будет зависеть от того, насколько универсален ваш всплывающий компонент
3. Спасибо, я думаю, что идея с положением экрана подойдет мне!
4. Добавление этой строки решило мою проблему (view.popup.open не создавал всплывающее окно) — большое спасибо cabesuon: view.popup.autoOpenEnabled = false;