|
|
|
|
|
<template>
|
|
|
|
|
|
<div class="map-container">
|
|
|
|
|
|
<mars-map :options="options" @onload="onload"></mars-map>
|
|
|
|
|
|
|
|
|
|
|
|
<button @click="laoding3d">加载</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup name="Map">
|
|
|
|
|
|
import marsMap from "@/components/marsMap";
|
|
|
|
|
|
import { ref, reactive, onMounted } from "vue";
|
|
|
|
|
|
let options = reactive({
|
|
|
|
|
|
scene: {
|
|
|
|
|
|
center: {
|
|
|
|
|
|
lat: 32.006053,
|
|
|
|
|
|
lng: 120.899041,
|
|
|
|
|
|
alt: 45187,
|
|
|
|
|
|
heading: 0,
|
|
|
|
|
|
pitch: -45,
|
|
|
|
|
|
},
|
|
|
|
|
|
showSun: false,
|
|
|
|
|
|
showMoon: false,
|
|
|
|
|
|
showSkyBox: false,
|
|
|
|
|
|
showSkyAtmosphere: false,
|
|
|
|
|
|
fog: false,
|
|
|
|
|
|
backgroundColor: "#363635", // 天空背景色
|
|
|
|
|
|
globe: {
|
|
|
|
|
|
baseColor: "#363635", // 地球地面背景色
|
|
|
|
|
|
showGroundAtmosphere: false,
|
|
|
|
|
|
enableLighting: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
clock: {
|
|
|
|
|
|
currentTime: "2023-11-01 12:00:00", // 固定光照时间
|
|
|
|
|
|
},
|
|
|
|
|
|
cameraController: {
|
|
|
|
|
|
zoomFactor: 1.5,
|
|
|
|
|
|
minimumZoomDistance: 0.1,
|
|
|
|
|
|
maximumZoomDistance: 200000,
|
|
|
|
|
|
enableCollisionDetection: false, // 允许进入地下
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
terrain: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
basemaps: [
|
|
|
|
|
|
// { name: "天地图", type: "tdt", layer: "img_d", show: true },
|
|
|
|
|
|
{
|
|
|
|
|
|
id: 2017,
|
|
|
|
|
|
pid: 10,
|
|
|
|
|
|
name: "蓝色底图",
|
|
|
|
|
|
icon: "https://data.mars3d.cn/img/thumbnail/basemap/my_blue.png",
|
|
|
|
|
|
type: "gaode",
|
|
|
|
|
|
layer: "vec",
|
|
|
|
|
|
chinaCRS: "GCJ02",
|
|
|
|
|
|
invertColor: true,
|
|
|
|
|
|
filterColor: "#015CB3",
|
|
|
|
|
|
brightness: 0.6,
|
|
|
|
|
|
contrast: 1.8,
|
|
|
|
|
|
gamma: 0.3,
|
|
|
|
|
|
hue: 1,
|
|
|
|
|
|
saturation: 0,
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
let map = null
|
|
|
|
|
|
|
|
|
|
|
|
const onload = (mapInstance) => {
|
|
|
|
|
|
map = mapInstance;
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const laoding3d = () => {
|
|
|
|
|
|
const tiles3dLayer = new mars3d.layer.TilesetLayer({
|
|
|
|
|
|
name: "模型名称",
|
|
|
|
|
|
url: "http://192.168.0.108:9090/B3dmqlh06/tileset.json",
|
|
|
|
|
|
maximumScreenSpaceError: 16,
|
|
|
|
|
|
maxMemory: 1024, // 最大缓存内存大小(MB)
|
|
|
|
|
|
matrixMove: {
|
|
|
|
|
|
hasMiddle: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
flyTo: true,
|
|
|
|
|
|
|
|
|
|
|
|
// maximumScreenSpaceError: 16, // 【重要】数值加大，能让最终成像变模糊
|
|
|
|
|
|
// cacheBytes: 1073741824, // 1024MB = 1024*1024*1024 【重要】额定显存大小(以字节为单位)，允许在这个值上下波动。
|
|
|
|
|
|
// maximumCacheOverflowBytes: 2147483648, // 2048MB = 2048*1024*1024 【重要】最大显存大小(以字节为单位)。
|
|
|
|
|
|
// maximumMemoryUsage: 512, //【cesium 1.107+弃用】内存建议显存大小的50%左右，内存分配变小有利于倾斜摄影数据回收，提升性能体验
|
|
|
|
|
|
|
|
|
|
|
|
// skipLevelOfDetail: true, //是Cesium在1.5x 引入的一个优化参数，这个参数在金字塔数据加载中，可以跳过一些级别，这样整体的效率会高一些，数据占用也会小一些。但是带来的异常是：1） 加载过程中闪烁，看起来像是透过去了，数据载入完成后正常。2，有些异常的面片，这个还是因为两级LOD之间数据差异较大，导致的。当这个参数设置false，两级之间的变化更平滑，不会跳跃穿透，但是清晰的数据需要更长，而且还有个致命问题，一旦某一个tile数据无法请求到或者失败，导致一直不清晰。所以我们建议：对于网络条件好，并且数据总量较小的情况下，可以设置false，提升数据显示质量。
|
|
|
|
|
|
// loadSiblings: true, // 如果为true则不会在已加载完模型后，自动从中心开始超清化模型
|
|
|
|
|
|
// cullRequestsWhileMoving: true,
|
|
|
|
|
|
// cullRequestsWhileMovingMultiplier: 10, //【重要】 值越小能够更快的剔除
|
|
|
|
|
|
// preferLeaves: true, //【重要】这个参数默认是false，同等条件下，叶子节点会优先加载。但是Cesium的tile加载优先级有很多考虑条件，这个只是其中之一，如果skipLevelOfDetail=false，这个参数几乎无意义。所以要配合skipLevelOfDetail=true来使用，此时设置preferLeaves=true。这样我们就能最快的看见符合当前视觉精度的块，对于提升大数据以及网络环境不好的前提下有一点点改善意义。
|
|
|
|
|
|
// progressiveResolutionHeightFraction: 0.5, //【重要】 数值偏于0能够让初始加载变得模糊
|
|
|
|
|
|
// dynamicScreenSpaceError: true, // true时会在真正的全屏加载完之后才清晰化模型
|
|
|
|
|
|
// preloadWhenHidden: true, //tileset.show是false时，也去预加载数据
|
|
|
|
|
|
});
|
|
|
|
|
|
map.addLayer(tiles3dLayer);
|
|
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
.map-container {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
|
|
|
|
button {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
bottom: 10px;
|
|
|
|
|
|
right: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
