| | |
| | | <template> |
| | | <div class="body_box"> |
| | | <div |
| | | id="cesiumContainer" |
| | | style="width: 100%; height: 100%; position: absolute;" |
| | | ></div> |
| | | <div class="body_box" v-loading="store.state.loading" element-loading-background="rgba(0, 0, 0, 0.8)"> |
| | | <export-map v-if="layerExportshow" @SETexportMap="SETexportMap"></export-map> |
| | | <export-list v-if="store.state.setExportList"></export-list> |
| | | <menus></menus> |
| | | <bottom-btn></bottom-btn> |
| | | <top-btn></top-btn> |
| | | <layer-manage> |
| | | |
| | | </layer-manage> |
| | | <bottom-btn v-if="store.state.isShowMap"></bottom-btn> |
| | | <mouse-move v-if="store.state.isShowMap"></mouse-move> |
| | | <spatial-box v-if="layerSpatialshow" @SETspatialClose="SETspatialClose"></spatial-box> |
| | | <coord-location v-if="layerLocationshow" @SETcoordClose="setCoordLocation"> |
| | | </coord-location> |
| | | <details-query v-if="store.state.details.showDetails"> </details-query> |
| | | <div v-if="store.state.isShowMap"> |
| | | <map-view></map-view> |
| | | </div> |
| | | <div v-if="!store.state.isShowMap"> |
| | | <ol-map></ol-map> |
| | | </div> |
| | | <plotting-inquire></plotting-inquire> |
| | | <attribute-info v-if="store.state.setEditTemporaryShow"></attribute-info> |
| | | <slopeQuery v-if="store.state.showSlopeQuey"></slopeQuery> |
| | | <legend-layer v-if="store.state.showlegendLayer"></legend-layer> |
| | | <legend-analysis v-if="store.state.showlegendLayer"></legend-analysis> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | defineProps, |
| | | defineEmits, |
| | | } from "vue"; |
| | | import { removeToken, getToken } from "@/utils/auth"; |
| | | //左侧菜单 |
| | | import menus from "@/components/menus.vue"; |
| | | import menus from "@/views/menus.vue"; |
| | | //底部菜单 |
| | | import bottomBtn from "@/components/bottomBtn.vue"; |
| | | //顶部菜单 |
| | | import topBtn from "@/components/topBtn.vue"; |
| | | //图层管理页面 |
| | | import layerManage from "@/views/layer/layerManage.vue"; |
| | | import exportMap from "./export/exportMap.vue"; |
| | | import mapView from "@/views/Map/mapView.vue"; |
| | | import olMap from "@/views/Map/olMap.vue"; |
| | | //经纬度显示 |
| | | import mouseMove from "@/components/mouseMove.vue"; |
| | | //空间查询 |
| | | import spatialBox from "@/views/query/SpatialQuery.vue"; |
| | | //坐标定位 |
| | | import CoordLocation from "@/views/query/CoordLocation.vue"; |
| | | //阴影分析 |
| | | import mapclock from "@/views/mapClock/index.vue"; |
| | | //矢量数据信息弹窗 |
| | | import detailsQuery from "@/views/query/detailsQuery.vue"; |
| | | //出图列表 |
| | | import exportList from "./export/exportList.vue"; |
| | | //标绘查询 |
| | | import plottingInquire from "./plotting/plottingInquire.vue"; |
| | | //属性编辑 |
| | | import attributeInfo from "./plotting/attributeInfo.vue"; |
| | | // 坡度值 |
| | | import slopeQuery from "./query/slopeQuery.vue"; |
| | | //图列 |
| | | import legendLayer from '@/views/Map/legendLayer'; |
| | | import legendAnalysis from "./Map/legendAnalysis.vue"; |
| | | import router from "@/router"; |
| | | import { useStore } from "vuex"; // 引入useStore 方法 |
| | | |
| | | import InitMap from "@/assets/js/Map/index.js"; |
| | | const store = useStore(); // 该方法用于返回store 实例 |
| | | const layerExportshow = ref(false); |
| | | const layerSpatialshow = ref(false); |
| | | const layerLocationshow = ref(false); |
| | | |
| | | let map; |
| | | var viewer; |
| | | const init = () => { |
| | | viewer = InitMap.Viewer; |
| | | map = InitMap.sgworld; |
| | | //关闭状态 |
| | | const SETexportMap = (res) => { |
| | | layerExportshow.value = res; |
| | | }; |
| | | const functionForJs = (res) => { |
| | | switch (res.type) { |
| | | case "exportMap": |
| | | store.state.exportImgUrl = res.url; |
| | | layerExportshow.value = res.value; |
| | | |
| | | break; |
| | | case "spatialQuery": |
| | | setSpatialQuery(res); |
| | | break; |
| | | case "closeNavigatBar": |
| | | setCloseNavigatBar(); |
| | | break; |
| | | case "coordLocation": |
| | | setCoordLocation(res); |
| | | break; |
| | | } |
| | | }; |
| | | const setCoordLocation = (res) => { |
| | | layerLocationshow.value = res; |
| | | }; |
| | | const setCloseNavigatBar = () => { |
| | | const infobar = document.getElementsByClassName("map-info-bar")[0]; |
| | | infobar.style.display = "none"; |
| | | const navigation = document.getElementsByClassName("navigation-controls")[0]; |
| | | navigation.style.top = "calc(100% - 182px)"; |
| | | navigation.style.right = "70px"; |
| | | const compass = document.getElementsByClassName("compass")[0]; |
| | | compass.style.top = "calc(100% - 280px)"; |
| | | compass.style.right = "38px"; |
| | | }; |
| | | const setSpatialQuery = async (res) => { |
| | | store.state.spatialQueryData.wkt = res.value; |
| | | layerSpatialshow.value = true; |
| | | }; |
| | | const SETspatialClose = (res) => { |
| | | layerSpatialshow.value = res; |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | InitMap.init3DMap(); |
| | | init(); |
| | | var token = getToken(); |
| | | if (!token) { |
| | | router.push("/Login"); |
| | | } |
| | | |
| | | // setCloseNavigatBar(); |
| | | window.functionForJs = functionForJs; |
| | | store.state.isShowMap = true; |
| | | }); |
| | | </script> |
| | | <style lang="less" scoped> |