<template>
  <div id="streetscape"></div>
</template>

<script setup name="streetscape">
import { ref, reactive, toRefs, onMounted, nextTick } from 'vue';
import bus from '@/bus';
const { proxy } = getCurrentInstance();
const AllData = reactive({
  panorama: null,
});
// 初始化街景地图
const initePanoramaMap = () => {
  AllData.panorama = BMapGL.Panorama('streetscape');

  AllData.panorama.setPov({
    // 修改全景的视角
    pitch: 10,
    heading: 0,
  });
  AllData.panorama.setOptions({
    linksControl: true, // 隐藏道路指示控件，默认true
    navigationControl: true, // 隐藏导航控件，默认true
  });
};
onMounted(() => {
  initePanoramaMap();
  // AllData.panorama.addEventListener('position_changed', function (pos) {
  //   console.log('pos---', pos);
  //   // AllData.panorama.setPosition(new BMapGL.Point(pos.lng, pos.lat));
  // });
  bus.on('streetPosition', e => {
    console.log('streetPosition---', e);
    let position_Street = turf.point(e);
    gcoord.transform(position_Street, gcoord.WGS84, gcoord.BD09);
    AllData.panorama.setPosition(
      new BMapGL.Point(position_Street.geometry.coordinates[0], position_Street.geometry.coordinates[1])
    );
    gcoord.transform(position_Street, gcoord.BD09, gcoord.WGS84);
  });
});
onBeforeUnmount(() => {
  bus.off('xxinformationList');
});
</script>

<style lang="scss" scoped>
#streetscape {
  width: 100%;
  height: 100%;
}
</style>