| | |
|---|
| | | <template> |
|---|
| | | <div style="width: 70vw; height: 500px; background-color: aliceblue"> |
|---|
| | | <BaseMap></BaseMap> |
|---|
| | | </div> |
|---|
| | | <BaseMap></BaseMap> |
|---|
| | | </template> |
|---|
| | | <script setup> |
|---|
| | | import { watch } from 'vue'; |
|---|
| | | import { map, onMapMounted } from '@/utils/map/index'; |
|---|
| | | import marks from '@/utils/map/marks'; |
|---|
| | | import { sceneIcon } from '@/assets/scene-icon'; |
|---|
| | | const props = defineProps({ |
|---|
| | | // 场景点位信息 |
|---|
| | | data: Array |
|---|
| | | }); |
|---|
| | | |
|---|
| | | var markViewList = []; |
|---|
| | | |
|---|
| | | watch( |
|---|
| | | () => props.data, |
|---|
| | | (nV, oV) => { |
|---|
| | | if (nV != oV) { |
|---|
| | | drawSceneMarks(); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | { immediate: true } |
|---|
| | | ); |
|---|
| | | |
|---|
| | | function drawSceneMarks() { |
|---|
| | | onMapMounted(() => { |
|---|
| | | markViewList = []; |
|---|
| | | props.data.forEach((d) => { |
|---|
| | | const mark = marks.createMarker({ |
|---|
| | | position: [d.longitude, d.latitude], |
|---|
| | | icon: sceneIcon(d.typeid), |
|---|
| | | label: d.name, |
|---|
| | | extData: d.guid |
|---|
| | | }); |
|---|
| | | markViewList.push(mark); |
|---|
| | | }); |
|---|
| | | map.setFitView(markViewList); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | <style scoped></style> |
|---|
