suzhou-jichuang-lanhai
/
NanTong-police
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

处理标题，以及弹窗回顶问题

Browse Source
main
许宏杰 3 weeks ago
parent b5c9467802
commit 77ee40e2d1
4 changed files with 291 additions and 234 deletions
Show Stats Download Patch File Download Diff File

103
index.html
Unescape View File

@ -1,25 +1,66 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="/favicon.ico">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<link rel="icon" href="/favicon.ico" />
<title>若依管理系统</title>
<link href="https://zwyth.ntgaj.cn:8008/map3d/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
<script src="https://zwyth.ntgaj.cn:8008/map3d/Cesium/Cesium.js" type="text/javascript"></script>
<!--引入mars3d库lib-->
<script src="https://zwyth.ntgaj.cn:8008/map3d/turf.min.js" type="text/javascript"></script>
<link href="https://zwyth.ntgaj.cn:8008/map3d/mars3d/mars3d.css" rel="stylesheet" type="text/css" />
<script src="https://zwyth.ntgaj.cn:8008/map3d/mars3d/mars3d.js" type="text/javascript"></script>
<!--引入mars3d库lib 莱斯服务器-->
<!-- <link
href="https://zwyth.ntgaj.cn:8008/map3d/Cesium/Widgets/widgets.css"
rel="stylesheet"
type="text/css"
/>
<link
href="https://zwyth.ntgaj.cn:8008/map3d/mars3d/mars3d.css"
rel="stylesheet"
type="text/css"
/>
<script
src="https://zwyth.ntgaj.cn:8008/map3d/Cesium/Cesium.js"
type="text/javascript"
></script>
<script
src="https://zwyth.ntgaj.cn:8008/map3d/turf.min.js"
type="text/javascript"
></script>
<script
src="https://zwyth.ntgaj.cn:8008/map3d/mars3d/mars3d.js"
type="text/javascript"
></script> -->
<!--引入mars3d库lib 官方服务-->
<link
href="https://registry.npmmirror.com/mars3d-cesium/latest/files/Build/Cesium/Widgets/widgets.css"
rel="stylesheet"
type="text/css"
/>
<script
src="https://registry.npmmirror.com/mars3d-cesium/latest/files/Build/Cesium/Cesium.js"
type="text/javascript"
></script>
<link
href="https://registry.npmmirror.com/mars3d/latest/files/mars3d.css"
rel="stylesheet"
type="text/css"
/>
<script
src="https://registry.npmmirror.com/mars3d/latest/files/mars3d.js"
type="text/javascript"
></script>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<!--[if lt IE 11
]><script>
window.location.href = "/html/ie.html";
</script><!
[endif]-->
<style>
html,
body,
@ -55,7 +96,7 @@
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
border-top-color: #fff;
-webkit-animation: spin 2s linear infinite;
-ms-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
@ -73,7 +114,7 @@
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
border-top-color: #fff;
-webkit-animation: spin 3s linear infinite;
-moz-animation: spin 3s linear infinite;
-o-animation: spin 3s linear infinite;
@ -90,7 +131,7 @@
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
border-top-color: #fff;
-moz-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite;
-ms-animation: spin 1.5s linear infinite;
@ -98,7 +139,6 @@
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
@ -127,13 +167,12 @@
}
}
#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: #7171C6;
background: #7171c6;
z-index: 1000;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
@ -148,21 +187,20 @@
right: 0;
}
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.loaded #loader {
@ -189,8 +227,8 @@
}
#loader-wrapper .load_title {
font-family: 'Open Sans';
color: #FFF;
font-family: "Open Sans";
color: #fff;
font-size: 19px;
width: 100%;
text-align: center;
@ -205,13 +243,13 @@
font-weight: normal;
font-style: italic;
font-size: 13px;
color: #FFF;
color: #fff;
opacity: 0.5;
}
</style>
</head>
</head>
<body>
<body>
<div id="app">
<div id="loader-wrapper">
<div id="loader"></div>
@ -221,6 +259,5 @@
</div>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</body>
</html>

2
src/components/NavigationBar/index.vue
Unescape View File

@ -8,7 +8,7 @@
const props = defineProps({
title: {
type: String,
default: "南通市公安局政务服务实景三维地图",
default: "政务服务实景三维地图",
},
});

2
src/router/index.js
Unescape View File

@ -166,7 +166,7 @@ export const dynamicRoutes = [
]
const router = createRouter({
history: createWebHistory(),
history: createWebHistory(process.env.NODE_ENV === 'production' ? '/nantong-police/' : '/'),
routes: constantRoutes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {

40
src/views/map.vue
Unescape View File

@ -90,7 +90,7 @@
width="30%"
class="info-dialog"
>
<div class="info-box">
<div class="info-box" ref="infoDialog">
<div class="info-title">基本信息</div>
<div class="info-row">
<div class="row-lable">地址：</div>
@ -157,7 +157,7 @@
v-model="innerVisible"
class="info-dialog"
>
<div class="info-box">
<div class="info-box" ref="businessDialog">
<div class="info-row">
<div class="row-lable">业务名称：</div>
<div class="row-value">{{ businessInfo.businessName }}</div>
@ -221,7 +221,8 @@ import {
getbusinessById,
getEnterpriseTree,
} from "@/api/mapApi";
import { ref, reactive, onMounted, onUnmounted } from "vue";
import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
const baseUrl = import.meta.env.VITE_APP_BASE_API;
let options = reactive({
scene: {
@ -253,10 +254,10 @@ let options = reactive({
enableCollisionDetection: false, // 允许进入地下
},
},
control:{
toolbar:false,
homeButton:false,
zoom:false
control: {
toolbar: false,
homeButton: false,
zoom: false,
},
terrain: {
show: false,
@ -281,6 +282,8 @@ let options = reactive({
},
],
});
const infoDialog = ref(null);
const businessDialog = ref(null);
//地图图层
const mapModel = reactive(["二维地图", "三维地图"]);
//图标类型图层
@ -360,6 +363,10 @@ const handleInfoByyewu = async (id) => {
businessInfo = res.data;
innerVisible.value = true;
nextTick(() => {
scrollToTop(businessDialog.value);
});
};
/**
@ -478,6 +485,10 @@ const initMarker = (item, flyTo = false, markerLength = 0) => {
info = await getInfo(infoItem.id, infoItem.lonLat);
queryParams.name = info.pointName;
dialogVisible.value = true;
nextTick(() => {
scrollToTop(infoDialog.value);
});
});
if (markerLength > 0) {
@ -625,14 +636,11 @@ const changeModel = (index) => {
}
};
/**
* 地图初始化完毕
* @param mapInstance
*/
const mapLoad = (mapInstance) => {
map = mapInstance;
//创建marker图层
mapLayer.markerLayer = new mars3d.layer.GraphicLayer({
@ -661,6 +669,18 @@ const getdictList = async () => {
let res = await getdicts();
dictList = res.result;
};
/**
* 平滑滚动顶部
*/
const scrollToTop = (elementItem) => {
if (elementItem) {
elementItem.scrollTo({
top: 0,
behavior: "smooth",
});
}
};
</script>
<style scoped lang="scss">
.map-container {

Write Preview
Loading…
Cancel
Save