高德图源的vue-cesium项目

src/components/HotLandmark.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+  <div v-show="!showit" class="switch" style="position:absolute;top:-40px;right:0;z-index:99;" @click="showLandmark">
+    <img class="icon" src="../assets/up.png">
+  </div>
+  <div v-show="showit" class="switch" style="position:absolute;top:-50px;right:0;z-index:99;" @click="showLandmark">
+    <img class="icon" src="../assets/down.png">
+  </div>
+  <div class="landmark">
+    <table v-if="showit">
+      <thead>
+        <tr>
+          <th>景点名称</th>
+          <th>经度</th>
+          <th>纬度</th>
+          <th>访问景点</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(item, index) in landmarkArr" :key="index">
+          <td>{{ item ? item.landmark : index+1 }}</td>
+          <td>{{ item ? item.lng : "" }}</td>
+          <td>{{ item ? item.lat : "" }}</td>
+          <td><button @click="write(item.lng,item.lat)">访问</button></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { usePositionStore } from '/@/stores/position'
+
+const landmarkArr = [
+    {
+        landmark:'北京天安门',
+        lng:116.391243,
+        lat:39.907202
+    },
+    {
+        landmark:'北京鸟巢',
+        lng:116.390502,
+        lat:39.991396
+    },
+    {
+        landmark:'上海东方明珠',
+        lng:121.495263,
+        lat:31.241829
+    },
+    {
+        landmark:'香港迪斯尼',
+        lng:114.042287,
+        lat:22.313002
+    },
+    {
+        landmark:'布达拉宫',
+        lng:91.117684,
+        lat:29.656959
+    }
+]
+
+let showit = ref(false);
+
+const showLandmark = () => {
+    showit.value = !showit.value;
+}
+
+const position = usePositionStore()
+
+const write = (lng,lat) => {
+  position.set({ lng: lng, lat: lat })
+}
+</script>
+
+<style scoped>
+.landmark {
+  max-height: 360px;
+  overflow-y:scroll;
+}
+
+.switch {
+  width:42px;
+  height:42px;
+  border-radius: 50%;
+  background-color:#fff;
+  padding-top:9px;
+  padding-left:3px;
+}
+
+.icon {
+    width:36px;
+}
+
+table {
+  color: #FFFFFF;
+  background-color: #242424;
+  padding: 10px;
+  border-radius: 7px;
+  border-collapse: separate;
+  border-spacing: 2px;
+  text-align:center;
+}
+
+table th:first-child {
+  width: 120px;
+}
+
+table th:not(:first-child) {
+  width: 100px;
+}
+
+table thead tr {
+  background-color: rgba(84, 84, 84, 0.8);
+}
+
+table tbody tr:nth-child(even) {
+  background-color: rgba(84, 84, 84, 0.8);
+}
+
+table tbody tr:nth-child(odd) {
+  background-color: rgba(84, 84, 84, 0.25);
+}
+
+table th, table td {
+  padding: 3px 5px;
+}
+</style>