更换openlayer
This commit is contained in:
zengmingjie
parent
1ee3fe56e2
commit
938fca0e2c
|
|
@ -19,6 +19,7 @@
|
|||
"element-ui": "^2.15.10",
|
||||
"file-saver": "^2.0.5",
|
||||
"moment": "^2.30.1",
|
||||
"ol": "^10.5.0",
|
||||
"vue": "^2.7.16",
|
||||
"vue-router": "^3.5.1",
|
||||
"vueshowpdf": "^1.1.2",
|
||||
|
|
@ -2807,6 +2808,11 @@
|
|||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/@petamoriken/float16": {
|
||||
"version": "3.9.2",
|
||||
"resolved": "https://registry.npmmirror.com/@petamoriken/float16/-/float16-3.9.2.tgz",
|
||||
"integrity": "sha512-VgffxawQde93xKxT3qap3OH+meZf7VaSB5Sqd4Rqc+FP5alWbpOyan/7tRbOAvynjpG3GpdtAuGU/NdhQpmrog=="
|
||||
},
|
||||
"node_modules/@polka/url": {
|
||||
"version": "1.0.0-next.21",
|
||||
"resolved": "https://registry.npmmirror.com/@polka/url/-/url-1.0.0-next.21.tgz",
|
||||
|
|
@ -3305,6 +3311,11 @@
|
|||
"integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/rbush": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/@types/rbush/-/rbush-4.0.0.tgz",
|
||||
"integrity": "sha512-+N+2H39P8X+Hy1I5mC6awlTX54k3FhiUmvt7HWzGJZvF+syUAAxP/stwppS8JE84YHqFgRMv6fCy31202CMFxQ=="
|
||||
},
|
||||
"node_modules/@types/retry": {
|
||||
"version": "0.12.0",
|
||||
"resolved": "https://registry.npmmirror.com/@types/retry/-/retry-0.12.0.tgz",
|
||||
|
|
@ -8155,8 +8166,7 @@
|
|||
"node_modules/earcut": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/earcut/-/earcut-3.0.1.tgz",
|
||||
"integrity": "sha512-0l1/0gOjESMeQyYaK5IDiPNvFeu93Z/cO0TjZh9eZ1vyCtZnA7KMZ8rQggpsJHIbGSdrqYq9OhuveadOVHCshw==",
|
||||
"dev": true
|
||||
"integrity": "sha512-0l1/0gOjESMeQyYaK5IDiPNvFeu93Z/cO0TjZh9eZ1vyCtZnA7KMZ8rQggpsJHIbGSdrqYq9OhuveadOVHCshw=="
|
||||
},
|
||||
"node_modules/easy-stack": {
|
||||
"version": "1.0.1",
|
||||
|
|
@ -10232,6 +10242,40 @@
|
|||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/geotiff": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/geotiff/-/geotiff-2.1.3.tgz",
|
||||
"integrity": "sha512-PT6uoF5a1+kbC3tHmZSUsLHBp2QJlHasxxxxPW47QIY1VBKpFB+FcDvX+MxER6UzgLQZ0xDzJ9s48B9JbOCTqA==",
|
||||
"dependencies": {
|
||||
"@petamoriken/float16": "^3.4.7",
|
||||
"lerc": "^3.0.0",
|
||||
"pako": "^2.0.4",
|
||||
"parse-headers": "^2.0.2",
|
||||
"quick-lru": "^6.1.1",
|
||||
"web-worker": "^1.2.0",
|
||||
"xml-utils": "^1.0.2",
|
||||
"zstddec": "^0.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10.19"
|
||||
}
|
||||
},
|
||||
"node_modules/geotiff/node_modules/lerc": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/lerc/-/lerc-3.0.0.tgz",
|
||||
"integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww=="
|
||||
},
|
||||
"node_modules/geotiff/node_modules/quick-lru": {
|
||||
"version": "6.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/quick-lru/-/quick-lru-6.1.2.tgz",
|
||||
"integrity": "sha512-AAFUA5O1d83pIHEhJwWCq/RQcRukCkn/NSm2QsTEMle5f2hP0ChI2+3Xb051PZCkLryI/Ir1MVKviT2FIloaTQ==",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/get-caller-file": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmmirror.com/get-caller-file/-/get-caller-file-2.0.5.tgz",
|
||||
|
|
@ -17655,6 +17699,35 @@
|
|||
"integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/ol": {
|
||||
"version": "10.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/ol/-/ol-10.5.0.tgz",
|
||||
"integrity": "sha512-nHFx8gkGmvYImsa7iKkwUnZidd5gn1XbMZd9GNOorvm9orjW9gQvT3Naw/MjIasVJ3cB9EJUdCGR2EFAulMHsQ==",
|
||||
"dependencies": {
|
||||
"@types/rbush": "4.0.0",
|
||||
"earcut": "^3.0.0",
|
||||
"geotiff": "^2.1.3",
|
||||
"pbf": "4.0.1",
|
||||
"rbush": "^4.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/openlayers"
|
||||
}
|
||||
},
|
||||
"node_modules/ol/node_modules/quickselect": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/quickselect/-/quickselect-3.0.0.tgz",
|
||||
"integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g=="
|
||||
},
|
||||
"node_modules/ol/node_modules/rbush": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/rbush/-/rbush-4.0.1.tgz",
|
||||
"integrity": "sha512-IP0UpfeWQujYC8Jg162rMNc01Rf0gWMMAb2Uxus/Q0qOFw4lCcq6ZnQEZwUoJqWyUGJ9th7JjwI4yIWo+uvoAQ==",
|
||||
"dependencies": {
|
||||
"quickselect": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/on-finished": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmmirror.com/on-finished/-/on-finished-2.4.1.tgz",
|
||||
|
|
@ -18049,8 +18122,7 @@
|
|||
"node_modules/pako": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/pako/-/pako-2.1.0.tgz",
|
||||
"integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
|
||||
"dev": true
|
||||
"integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
|
||||
},
|
||||
"node_modules/param-case": {
|
||||
"version": "3.0.4",
|
||||
|
|
@ -18074,6 +18146,11 @@
|
|||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/parse-headers": {
|
||||
"version": "2.0.6",
|
||||
"resolved": "https://registry.npmmirror.com/parse-headers/-/parse-headers-2.0.6.tgz",
|
||||
"integrity": "sha512-Tz11t3uKztEW5FEVZnj1ox8GKblWn+PvHY9TmJV5Mll2uHEwRdR/5Li1OlXoECjLYkApdhWy44ocONwXLiKO5A=="
|
||||
},
|
||||
"node_modules/parse-json": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/parse-json/-/parse-json-5.2.0.tgz",
|
||||
|
|
@ -18189,6 +18266,17 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/pbf": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/pbf/-/pbf-4.0.1.tgz",
|
||||
"integrity": "sha512-SuLdBvS42z33m8ejRbInMapQe8n0D3vN/Xd5fmWM3tufNgRQFBpaW2YVJxQZV4iPNqb0vEFvssMEo5w9c6BTIA==",
|
||||
"dependencies": {
|
||||
"resolve-protobuf-schema": "^2.1.0"
|
||||
},
|
||||
"bin": {
|
||||
"pbf": "bin/pbf"
|
||||
}
|
||||
},
|
||||
"node_modules/pend": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/pend/-/pend-1.2.0.tgz",
|
||||
|
|
@ -19425,6 +19513,11 @@
|
|||
"node": ">=12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/protocol-buffers-schema": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmmirror.com/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
|
||||
"integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
|
||||
},
|
||||
"node_modules/proxy-addr": {
|
||||
"version": "2.0.7",
|
||||
"resolved": "https://registry.npmmirror.com/proxy-addr/-/proxy-addr-2.0.7.tgz",
|
||||
|
|
@ -19979,6 +20072,14 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/resolve-protobuf-schema": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
|
||||
"integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
|
||||
"dependencies": {
|
||||
"protocol-buffers-schema": "^3.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/resolve-url": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmmirror.com/resolve-url/-/resolve-url-0.2.1.tgz",
|
||||
|
|
@ -23427,6 +23528,11 @@
|
|||
"defaults": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/web-worker": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/web-worker/-/web-worker-1.5.0.tgz",
|
||||
"integrity": "sha512-RiMReJrTAiA+mBjGONMnjVDP2u3p9R1vkcGz6gDIrOMT3oGuYwX2WRMYI9ipkphSuE5XKEhydbhNEJh4NY9mlw=="
|
||||
},
|
||||
"node_modules/webidl-conversions": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
|
||||
|
|
@ -24079,6 +24185,11 @@
|
|||
"integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/xml-utils": {
|
||||
"version": "1.10.2",
|
||||
"resolved": "https://registry.npmmirror.com/xml-utils/-/xml-utils-1.10.2.tgz",
|
||||
"integrity": "sha512-RqM+2o1RYs6T8+3DzDSoTRAUfrvaejbVHcp3+thnAtDKo8LskR+HomLajEy5UjTz24rpka7AxVBRR3g2wTUkJA=="
|
||||
},
|
||||
"node_modules/xmlchars": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/xmlchars/-/xmlchars-2.2.0.tgz",
|
||||
|
|
@ -24246,6 +24357,11 @@
|
|||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
|
||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
|
||||
},
|
||||
"node_modules/zstddec": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/zstddec/-/zstddec-0.1.0.tgz",
|
||||
"integrity": "sha512-w2NTI8+3l3eeltKAdK8QpiLo/flRAr2p8AGeakfMZOXBxOg9HIu4LVDxBi81sYgVhFhdJjv1OrB5ssI8uFPoLg=="
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
"element-ui": "^2.15.10",
|
||||
"file-saver": "^2.0.5",
|
||||
"moment": "^2.30.1",
|
||||
"ol": "^10.5.0",
|
||||
"vue": "^2.7.16",
|
||||
"vue-router": "^3.5.1",
|
||||
"vueshowpdf": "^1.1.2",
|
||||
|
|
@ -71,4 +72,4 @@
|
|||
"gitHooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -14,12 +14,12 @@
|
|||
|
||||
<!-- <link rel="stylesheet" href="/dep/mars3d/mars3d/divGraphic.css" /> -->
|
||||
<!-- ***_*** -->
|
||||
<link href="/dep/mars3d/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
|
||||
<!-- <link href="/dep/mars3d/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
|
||||
<script src="/dep/mars3d/Cesium/Cesium.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="/dep/mars3d/mars3d/mars3d.css" />
|
||||
<script type="text/javascript" src="/dep/mars3d/mars3d/mars3d.js"></script>
|
||||
<script type="text/javascript" src="/dep/mars3d/turf/turf.min.js"></script>
|
||||
<script type="text/javascript" src="/dep/localforage.min.js"></script>
|
||||
<script type="text/javascript" src="/dep/localforage.min.js"></script> -->
|
||||
|
||||
|
||||
<!-- 线上Mars3d -->
|
||||
|
|
|
|||
|
|
@ -9,22 +9,23 @@ const routes = [
|
|||
name: "home",
|
||||
component: index,
|
||||
beforeEnter: (to, from, next) => {
|
||||
const expires = localStorage.getItem("expires");
|
||||
const expiresTimestamp = new Date(expires).getTime();
|
||||
const now = new Date().getTime();
|
||||
if (expiresTimestamp && now > expiresTimestamp) {
|
||||
// 登录已过期，执行自动退出操作
|
||||
localStorage.removeItem("setToken");
|
||||
localStorage.removeItem("expires");
|
||||
next("/login");
|
||||
}
|
||||
const token = localStorage.getItem("setToken");
|
||||
// 在导航到/dashboard路由之前执行的操作
|
||||
if (!token) {
|
||||
next("/login"); // 如果非管理员用户访问/dashboard，则重定向到登录页面
|
||||
} else {
|
||||
next(); // 继续导航到/dashboard
|
||||
}
|
||||
next(); // 继续导航到/dashboard
|
||||
// const expires = localStorage.getItem("expires");
|
||||
// const expiresTimestamp = new Date(expires).getTime();
|
||||
// const now = new Date().getTime();
|
||||
// if (expiresTimestamp && now > expiresTimestamp) {
|
||||
// // 登录已过期，执行自动退出操作
|
||||
// localStorage.removeItem("setToken");
|
||||
// localStorage.removeItem("expires");
|
||||
// next("/login");
|
||||
// }
|
||||
// const token = localStorage.getItem("setToken");
|
||||
// // 在导航到/dashboard路由之前执行的操作
|
||||
// if (!token) {
|
||||
// next("/login"); // 如果非管理员用户访问/dashboard，则重定向到登录页面
|
||||
// } else {
|
||||
// next(); // 继续导航到/dashboard
|
||||
// }
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -71,30 +71,31 @@ export default {
|
|||
}
|
||||
},
|
||||
loginClick() {
|
||||
let params = {};
|
||||
params.username = this.state.username;
|
||||
localStorage.setItem("userName", params.username);
|
||||
params.password = this.state.password;
|
||||
this.$router.push("/"); // Vue 2 中使用 this.$router
|
||||
// let params = {};
|
||||
// params.username = this.state.username;
|
||||
// localStorage.setItem("userName", params.username);
|
||||
// params.password = this.state.password;
|
||||
|
||||
if (!this.state.username || !this.state.password) {
|
||||
return;
|
||||
} else {
|
||||
login(params).then((res) => {
|
||||
if (res.code === 1 && res.data) {
|
||||
localStorage.setItem("setToken", res.data.token);
|
||||
localStorage.setItem("expires", res.data.expires); // 登录到期时间
|
||||
localStorage.setItem("userId", res.data.userid); // 登录id
|
||||
localStorage.setItem("isAdmin", res.data.isAdmin); // 权限
|
||||
// if (!this.state.username || !this.state.password) {
|
||||
// return;
|
||||
// } else {
|
||||
// login(params).then((res) => {
|
||||
// if (res.code === 1 && res.data) {
|
||||
// localStorage.setItem("setToken", res.data.token);
|
||||
// localStorage.setItem("expires", res.data.expires); // 登录到期时间
|
||||
// localStorage.setItem("userId", res.data.userid); // 登录id
|
||||
// localStorage.setItem("isAdmin", res.data.isAdmin); // 权限
|
||||
|
||||
// 注意：Vue 2 中 Pinia 的用法需要调整
|
||||
// // 注意：Vue 2 中 Pinia 的用法需要调整
|
||||
|
||||
this.$router.push("/"); // Vue 2 中使用 this.$router
|
||||
} else {
|
||||
this.state.password = this.state.password;
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
});
|
||||
}
|
||||
// this.$router.push("/"); // Vue 2 中使用 this.$router
|
||||
// } else {
|
||||
// this.state.password = this.state.password;
|
||||
// this.$message.error(res.msg);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,143 +1,144 @@
|
|||
<template>
|
||||
<div class="HomeMpa">
|
||||
<div class="HomeMap">
|
||||
<div class="zoom-level">当前缩放等级: {{ zoomLevel }}</div>
|
||||
<div id="mars3dContainer" ref="MarsMap" class="mars3d-container"></div>
|
||||
<div id="map" ref="olMap" class="map-container"></div>
|
||||
<div class="pointingNorth" @click="mapNorth">
|
||||
<img src="@/assets/img/menu/zhibeizhen.png" alt="" />
|
||||
<img src="@/assets/img/menu/zhibeizhen.png" alt="指北" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
"use script";
|
||||
import { mapGetters } from "vuex";
|
||||
import Map from "ol/Map";
|
||||
import View from "ol/View";
|
||||
import TileLayer from "ol/layer/Tile";
|
||||
import { fromLonLat } from "ol/proj";
|
||||
import XYZ from "ol/source/XYZ";
|
||||
|
||||
export default {
|
||||
name: "HomeMap",
|
||||
data() {
|
||||
return {
|
||||
player: null,
|
||||
map: null,
|
||||
zoomLevel: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// 清空控制台（可选）
|
||||
// console.clear();
|
||||
},
|
||||
mounted() {
|
||||
this.getMapJson();
|
||||
this.initMap();
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["statePage", "cityCode"])
|
||||
},
|
||||
methods: {
|
||||
getMapJson() {
|
||||
// eslint-disable-next-line no-undef
|
||||
mars3d.Util.fetchJson({
|
||||
// ***_***
|
||||
url: "/configJson/map.json"
|
||||
}).then((res) => {
|
||||
this.initMarsMap({
|
||||
// 合并配置项
|
||||
...res.map3d
|
||||
});
|
||||
initMap() {
|
||||
// 初始化 OpenLayers 地图
|
||||
|
||||
this.map = new Map({
|
||||
target: this.$refs.olMap,
|
||||
layers: [
|
||||
new TileLayer({
|
||||
visible: true,
|
||||
source: new XYZ({
|
||||
visible: true,
|
||||
url: "http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scale=1&style=8"
|
||||
})
|
||||
})
|
||||
],
|
||||
view: new View({
|
||||
projection: "EPSG:4326",
|
||||
center: [116.4, 39.9], // 经纬度转投影坐标
|
||||
zoom: 10,
|
||||
minZoom: 3,
|
||||
maxZoom: 18,
|
||||
constrainRotation: false // 允许旋转
|
||||
})
|
||||
});
|
||||
|
||||
// 保存地图实例到全局（与 Mars3D 的 window.marsMap 类似）
|
||||
window.olMap = this.map;
|
||||
|
||||
// 处理地图加载完成后的逻辑
|
||||
this.onMapLoad(this.map);
|
||||
|
||||
// 绑定点击事件
|
||||
this.map.on("click", this.mapClickHandler);
|
||||
|
||||
// 绑定缩放/移动结束事件
|
||||
this.map.getView().on("change:resolution", this.mapZoomHandler);
|
||||
this.map.getView().on("change:center", this.mapZoomHandler);
|
||||
},
|
||||
initMarsMap(options) {
|
||||
let map;
|
||||
// eslint-disable-next-line no-undef
|
||||
map = new mars3d.Map(this.$refs.MarsMap, options);
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
window.marsMap = map;
|
||||
// 禁止右键菜单
|
||||
// map.unbindContextMenu();
|
||||
//禁用切换动画效果
|
||||
if (map.viewer.sceneModePicker) {
|
||||
map.viewer.sceneModePicker.viewModel.duration = 0.0;
|
||||
}
|
||||
// map构造完成后的一些处理
|
||||
this.onMapLoad(map);
|
||||
// eslint-disable-next-line no-undef
|
||||
map.on(mars3d.EventType.click, this.map_clickHandler, map);
|
||||
map.on(mars3d.EventType.cameraMoveEnd, this.map_zoomHandler, map);
|
||||
// map.scene.screenSpaceCameraController.enableTranslate = false;
|
||||
// map.scene.screenSpaceCameraController.enableRotate = false; // 禁用旋转
|
||||
// map.scene.screenSpaceCameraController.enableTilt = false; // 禁用倾斜
|
||||
// map.scene.screenSpaceCameraController.enableZoom = false; // 禁用缩放
|
||||
mapClickHandler(event) {
|
||||
// 处理地图点击事件
|
||||
console.log("地图点击:", event);
|
||||
},
|
||||
map_clickHandler(event) {
|
||||
console.log(event);
|
||||
},
|
||||
map_zoomHandler(event) {
|
||||
let { alt } = window.marsMap.getCameraView();
|
||||
this.zoomLevel = this.estimateZoomLevel(alt);
|
||||
console.log(this.zoomLevel);
|
||||
},
|
||||
estimateZoomLevel(height) {
|
||||
const maxZoom = 18;
|
||||
const baseHeight = 1000;
|
||||
const zoom = maxZoom - Math.log2(height / baseHeight);
|
||||
return Math.round(zoom);
|
||||
mapZoomHandler() {
|
||||
// 获取当前缩放等级
|
||||
this.zoomLevel = Math.round(this.map.getView().getZoom());
|
||||
},
|
||||
onMapLoad(map) {
|
||||
map.changeMouseModel(true);
|
||||
// 在地图初始化后禁用平移
|
||||
let camera = window.mapConfig;
|
||||
console.log(camera, "camera");
|
||||
// 地图加载完成后的处理
|
||||
const camera = window.mapConfig || {};
|
||||
if (camera.isCamera) {
|
||||
let cameraHistory = new mars3d.thing.CameraHistory({
|
||||
limit: {
|
||||
// 限定视角范围
|
||||
position: Cesium.Cartesian3.fromDegrees(
|
||||
camera.cameraLon,
|
||||
camera.cameraLat,
|
||||
0
|
||||
),
|
||||
radius: camera.cameraRadius,
|
||||
debugExtent: false
|
||||
}
|
||||
});
|
||||
map.addThing(cameraHistory);
|
||||
map.scene.screenSpaceCameraController.minimumZoomDistance = 1000; //相机的高度的最小值
|
||||
map.scene.screenSpaceCameraController.maximumZoomDistance = 500000; //相机高度的最大值
|
||||
// 设置视角约束
|
||||
map
|
||||
.getView()
|
||||
.setCenter(
|
||||
fromLonLat([camera.cameraLon || 0, camera.cameraLat || 0])
|
||||
);
|
||||
map.getView().setMinZoom(3); // 最小缩放等级
|
||||
map.getView().setMaxZoom(18); // 最大缩放等级
|
||||
}
|
||||
},
|
||||
mapNorth() {
|
||||
// 1. 获取当前视角
|
||||
const currentView = window.marsMap.getCameraView();
|
||||
|
||||
// 2. 修改视角的heading为0（正北），保留其他参数
|
||||
window.marsMap.setCameraView({
|
||||
lat: currentView.lat,
|
||||
lng: currentView.lng,
|
||||
alt: currentView.alt <= 100 ? 8000 : currentView.alt,
|
||||
heading: 0, // 指北
|
||||
pitch: -90,
|
||||
roll: currentView.roll
|
||||
// 指北：将地图旋转角度重置为 0
|
||||
const view = this.map.getView();
|
||||
const currentCenter = view.getCenter();
|
||||
const currentZoom = view.getZoom();
|
||||
view.animate({
|
||||
center: currentCenter,
|
||||
zoom: currentZoom < 3 ? 10 : currentZoom, // 确保最小缩放等级
|
||||
rotation: 0, // 指北
|
||||
duration: 500 // 动画持续时间
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.HomeMpa {
|
||||
.HomeMap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.zoom-level {
|
||||
position: absolute;
|
||||
bottom: 0.8%;
|
||||
left: 1%;
|
||||
z-index: 5;
|
||||
z-index: 1000;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#mars3dContainer {
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pointingNorth {
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
right: 25%;
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
|
||||
img {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue