src/components/map/SceneMap.vue
@@ -9,11 +9,30 @@
    ></FYOptionScene>
    <slot name="left-top"></slot>
  </el-row>
  <!-- <el-row class="right-wrap">
    <el-col :span="4">
      <el-button>close</el-button>
    </el-col>
    <el-col :span="20">
    </el-col>
  </el-row> -->
  <el-scrollbar class="right-wrap">
    <div v-for="s in selectedSceneList" :key="s.guid">
      <el-checkbox
        v-model="s._checked"
        :label="s.name"
        @change="handleChange(s)"
      />
      <!-- <el-text>{{ s.name }}</el-text> -->
    </div>
  </el-scrollbar>
</template>
<script setup>
import { ref, watch } from 'vue';
import { ref, watch, computed } from 'vue';
import { map, onMapMounted } from '@/utils/map/index';
import marks from '@/utils/map/marks';
import mapUtil from '@/utils/map/util';
import { sceneIcon } from '@/assets/scene-icon';
const props = defineProps({
  // 场景点位信息
@@ -25,13 +44,24 @@
const scenetype = ref();
const selectedSceneList = computed(() => {
  return props.data.filter((v) => {
    v._checked = true;
    return (
      scenetype.value == undefined ||
      scenetype.value.value == null ||
      v.typeid + '' == scenetype.value.value
    );
  });
});
watch(
  () => props.data,
  (nV, oV) => {
    if (nV != oV) {
      clearSceneMarks();
      createSceneMarks();
      filterMarkViews();
      filterMarkViews(true);
    }
  },
  { immediate: true }
@@ -40,9 +70,21 @@
watch(scenetype, (nV, oV) => {
  if (nV != oV) {
    clearSceneMarks();
    filterMarkViews();
    filterMarkViews(true);
  }
});
function handleChange(scene) {
  const mv = markViewList.find((v) => {
    return scene.guid == v.getExtData().guid;
  });
  if (scene._checked) {
    map.add(mv);
  } else {
    map.remove(mv);
  }
  // filterMarkViews();
}
function createSceneMarks() {
  onMapMounted(() => {
@@ -64,15 +106,15 @@
            content: ''
            // direction: 'bottom'
          });
          _extData._show = false
          ev.target.setExtData(_extData)
          _extData._show = false;
          ev.target.setExtData(_extData);
        } else {
          ev.target.setLabel({
            content: _extData.name
            // direction: 'bottom'
          });
          _extData._show = true
          ev.target.setExtData(_extData)
          _extData._show = true;
          ev.target.setExtData(_extData);
        }
      });
      allMarkViews.push(mark);
@@ -83,8 +125,11 @@
/**
 * 筛选所选类型的场景
 */
function filterMarkViews() {
function filterMarkViews(setFitView) {
  onMapMounted(() => {
    if (markViewList.length > 0) {
      map.remove(markViewList);
    }
    if (scenetype.value == undefined) {
      markViewList = allMarkViews;
    } else {
@@ -95,10 +140,23 @@
        );
      });
    }
    markViewList = markViewList.filter((v) => {
      const _index = selectedSceneList.value.findIndex((s) => {
        return s.guid == v.getExtData().guid && s._checked;
      });
      return _index != -1;
    });
    map.add(markViewList);
    setTimeout(() => {
      map.setFitView(markViewList);
    }, 1000);
    if (setFitView) {
      setTimeout(() => {
        map.setFitView(markViewList);
        // const list = markViewList.map((v) => {
        //   const _extData = v.getExtData();
        //   return [_extData.longitude, _extData.latitude];
        // });
        // mapUtil.setBound(list);
      }, 1000);
    }
  });
}
@@ -116,4 +174,15 @@
  left: 0;
  top: 0;
}
.right-wrap {
  position: absolute;
  right: 0px;
  bottom: 0;
  height: 50%;
  background-color: white;
  border-radius: 4px;
  padding: 2px 8px;
  max-width: 300px;
  box-shadow: var(--el-box-shadow);
}
</style>