为OpenLayers定义自定义控件

Question

我想在Vue SPA中为OpenLayers 6地图创建一些自定义控件。我已经阅读了一堆答案(1,2,3,4和其他)，但它们都与非常简单的JS和HTML设置有关，我在使用Vuetify适应Vue SPA时遇到了麻烦。我希望有人能制作一个简单的CodePen或JSFiddle，展示如何使用Vuetify UI组件创建自定义控件，以及它们如何与Vue SPA的其余部分的上下文(this和store)交互。我知道有很棒的ol-ext，但它是用JQuery构建的，对于我的用例来说，它和从头开始实现解决方案一样困难。我已经构建了与OpenLayers一起工作的Vue组件，但我想把它们作为可折叠的容器作为地图控件。

Answer 1

我最终放弃了我一直在论坛上找到的模板，并试图使用Map对象的addControl函数，并通过element和v-container，我写了一个独特的id，就像你写任何其他组件一样。下面是允许这样做的代码片段:

<template>
<v-container id="expandCustomControl" fluid>
<v-menu
close-on-content-click="false"
bottom
offset-y
nudge-bottom="10"
nudge-left="5"
content-class="testContentClass"
>
<template v-slot:activator="{ on , attrs }">
<v-btn
color="primary"
v-bind="attrs"
v-on="on"
x-small
fab>
<v-icon>
{{ attrs["aria-expanded"] === "true" ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
</v-icon>
</v-btn>
</template>
<v-container id="insideMenuExpansionPanel" @click.stop>
<v-row class="mt-1 ml-1">
<span>Custom Controls</span>
</v-row>
<v-row>
<v-divider class="mx-2"/>
</v-row>
<v-row>
<v-hover v-slot="{ hover }">
<v-autocomplete
dense
rounded
solo
hide-details
:style="{ 'width': hover ? '350px' : '150px' }"
class="mx-2 mt-2"/>
</v-hover>
</v-row>
<v-row justify="start" class="my-0">
<v-col>
<v-switch inset v-model="testSwitchValue" :label="`Switch : ${testSwitchValue}`"/>
</v-col>
</v-row>
</v-container>
</v-menu>
</v-container>
</template>

<script>
...
var myControl = new Control({element: document.getElementById("expandCustomControl")});
...
this.map.addControl(myControl)
...
</script>

<style scoped>
#insideMenuExpansionPanel {
border-radius: 25px;
}
.testContentClass {
border-radius: 25px;
background-color: rgba(240, 248, 255, 0.6);
}
#expandCustomControl {
position: relative; /* important to ensure the custom control is positioned relative to the top left corner of the map div */
top: 65px;
left: 0.1em;
max-width: 60px;
max-height: 400px;
margin: 0px; /* important to ensure the custom control is not centered since the container has margin: auto by default */
}
</style>

编辑:确认容器中的Vuetify UI元素可以访问上下文，并且它们按预期工作，但现在我的努力是看看如何确保容器在悬停

时展开。编辑2:我决定实现它打开点击，但悬停不应该太不同。