Merge branch 'main' of http://123.132.248.154:10000/gitY/DiKongGanZhiPingTai
commit
9bb53295d4
@ -1,321 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div ref="vChartRef" id="mars3d-container" class="mars3d-container">
|
|
||||||
<div class="mapInfo">
|
|
||||||
<span> {{ props.nowPreviewRecord.lat }}°N</span>
|
|
||||||
<span> {{ props.nowPreviewRecord.lng }}°E</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref, onMounted, defineEmits } from 'vue';
|
|
||||||
|
|
||||||
import * as mars3d from 'mars3d';
|
|
||||||
import * as Cesium from 'mars3d-cesium';
|
|
||||||
|
|
||||||
const props = defineProps(['nowPreviewRecord', 'previewRecordList', 'hideOrShowTextboxFlag']);
|
|
||||||
const emits = defineEmits(['chooseNowPreviewRecord', 'reloadTable', 'mapOnLoad']);
|
|
||||||
|
|
||||||
let map: mars3d.Map; // 地图对象
|
|
||||||
let graphicData: any = [];
|
|
||||||
let graphicLayers = new mars3d.layer.GraphicLayer();
|
|
||||||
|
|
||||||
const vChartRef: any = ref<HTMLElement>();
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
initMap();
|
|
||||||
addImage();
|
|
||||||
});
|
|
||||||
|
|
||||||
const initMap = () => {
|
|
||||||
map = new mars3d.Map(vChartRef.value, {
|
|
||||||
scene: {
|
|
||||||
center: {
|
|
||||||
lat: parseFloat(props.nowPreviewRecord.lat),
|
|
||||||
lng: parseFloat(props.nowPreviewRecord.lng),
|
|
||||||
alt: 8306.3,
|
|
||||||
heading: 360,
|
|
||||||
pitch: -45,
|
|
||||||
},
|
|
||||||
scene3DOnly: false,
|
|
||||||
shadows: false,
|
|
||||||
removeDblClick: true,
|
|
||||||
sceneMode: 3,
|
|
||||||
showSun: true,
|
|
||||||
showMoon: true,
|
|
||||||
showSkyBox: true,
|
|
||||||
showSkyAtmosphere: true,
|
|
||||||
fog: true,
|
|
||||||
fxaa: true,
|
|
||||||
requestRenderMode: true,
|
|
||||||
contextOptions: {
|
|
||||||
requestWebgl1: false,
|
|
||||||
webgl: {
|
|
||||||
preserveDrawingBuffer: true,
|
|
||||||
alpha: false,
|
|
||||||
stencil: true,
|
|
||||||
powerPreference: 'high-performance',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
globe: {
|
|
||||||
depthTestAgainstTerrain: false,
|
|
||||||
baseColor: '#546a53',
|
|
||||||
showGroundAtmosphere: true,
|
|
||||||
enableLighting: false,
|
|
||||||
},
|
|
||||||
cameraController: {
|
|
||||||
zoomFactor: 3,
|
|
||||||
minimumZoomDistance: 1,
|
|
||||||
maximumZoomDistance: 50000000,
|
|
||||||
enableRotate: true,
|
|
||||||
enableTranslate: true,
|
|
||||||
enableTilt: true,
|
|
||||||
enableZoom: true,
|
|
||||||
enableCollisionDetection: true,
|
|
||||||
minimumCollisionTerrainHeight: 15000,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
control: {
|
|
||||||
homeButton: true,
|
|
||||||
baseLayerPicker: false,
|
|
||||||
sceneModePicker: false,
|
|
||||||
vrButton: false,
|
|
||||||
fullscreenButton: false,
|
|
||||||
navigationHelpButton: false,
|
|
||||||
animation: false,
|
|
||||||
timeline: false,
|
|
||||||
infoBox: false,
|
|
||||||
geocoder: false,
|
|
||||||
selectionIndicator: false,
|
|
||||||
showRenderLoopErrors: false,
|
|
||||||
contextmenu: {
|
|
||||||
hasDefault: false,
|
|
||||||
},
|
|
||||||
mouseDownView: false,
|
|
||||||
zoom: false,
|
|
||||||
compass: false,
|
|
||||||
distanceLegend: false,
|
|
||||||
},
|
|
||||||
method: {
|
|
||||||
templateValues: {
|
|
||||||
dataServer: '//data.mars3d.cn',
|
|
||||||
gltfServerUrl: '//data.mars3d.cn/gltf',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
terrain: {
|
|
||||||
url: '//data.mars3d.cn/terrain',
|
|
||||||
show: true,
|
|
||||||
clip: true,
|
|
||||||
},
|
|
||||||
basemaps: [
|
|
||||||
{
|
|
||||||
id: 10,
|
|
||||||
name: '地图底图',
|
|
||||||
type: 'group',
|
|
||||||
opacity: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2021,
|
|
||||||
pid: 10,
|
|
||||||
name: '天地图影像',
|
|
||||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
|
||||||
type: 'group',
|
|
||||||
layers: [
|
|
||||||
{
|
|
||||||
name: '底图',
|
|
||||||
type: 'tdt',
|
|
||||||
layer: 'img_d',
|
|
||||||
eventParent: {
|
|
||||||
id: 2021,
|
|
||||||
pid: 10,
|
|
||||||
name: '天地图影像',
|
|
||||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
|
||||||
type: 'group',
|
|
||||||
layers: [
|
|
||||||
{
|
|
||||||
name: '底图',
|
|
||||||
type: 'tdt',
|
|
||||||
layer: 'img_d',
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '注记',
|
|
||||||
type: 'tdt',
|
|
||||||
layer: 'img_z',
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
private: false,
|
|
||||||
id: 'm-770c35e7-9054-4259-b5ee-c15f108becd0',
|
|
||||||
opacity: 1,
|
|
||||||
pid: 2021,
|
|
||||||
parent: {
|
|
||||||
id: 2021,
|
|
||||||
pid: 10,
|
|
||||||
name: '天地图影像',
|
|
||||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
|
||||||
type: 'group',
|
|
||||||
layers: [
|
|
||||||
{
|
|
||||||
name: '底图',
|
|
||||||
type: 'tdt',
|
|
||||||
layer: 'img_d',
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '注记',
|
|
||||||
type: 'tdt',
|
|
||||||
layer: 'img_z',
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
zIndex: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '注记',
|
|
||||||
type: 'tdt',
|
|
||||||
layer: 'img_z',
|
|
||||||
eventParent: {
|
|
||||||
id: 2021,
|
|
||||||
pid: 10,
|
|
||||||
name: '天地图影像',
|
|
||||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
|
||||||
type: 'group',
|
|
||||||
layers: [
|
|
||||||
{
|
|
||||||
name: '底图',
|
|
||||||
type: 'tdt',
|
|
||||||
layer: 'img_d',
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '注记',
|
|
||||||
type: 'tdt',
|
|
||||||
layer: 'img_z',
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
private: false,
|
|
||||||
id: 'm-3b881368-574b-48a5-88b2-8b3c2c48fd62',
|
|
||||||
opacity: 1,
|
|
||||||
pid: 2021,
|
|
||||||
parent: {
|
|
||||||
id: 2021,
|
|
||||||
pid: 10,
|
|
||||||
name: '天地图影像',
|
|
||||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
|
||||||
type: 'group',
|
|
||||||
layers: [
|
|
||||||
{
|
|
||||||
name: '底图',
|
|
||||||
type: 'tdt',
|
|
||||||
layer: 'img_d',
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '注记',
|
|
||||||
type: 'tdt',
|
|
||||||
layer: 'img_z',
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
show: true,
|
|
||||||
},
|
|
||||||
zIndex: 2,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
show: true,
|
|
||||||
opacity: 1,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
layers: [],
|
|
||||||
});
|
|
||||||
emits('mapOnLoad', map);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addImage = () => {
|
|
||||||
// 删除旧数据
|
|
||||||
graphicData?.forEach((graphicLayer) => {
|
|
||||||
graphicLayers.removeGraphic(graphicLayer);
|
|
||||||
});
|
|
||||||
// 图层
|
|
||||||
map.addLayer(graphicLayers);
|
|
||||||
// 图层数据
|
|
||||||
graphicData = [];
|
|
||||||
props.previewRecordList.forEach((item) => {
|
|
||||||
let graphic = new mars3d.graphic.BillboardEntity({
|
|
||||||
id: item.id,
|
|
||||||
position: [parseFloat(item.lng), parseFloat(item.lat)],
|
|
||||||
style: {
|
|
||||||
// image: '@/assets/images/point.png',
|
|
||||||
image: '../point.png',
|
|
||||||
clampToGround: true,
|
|
||||||
scale: 1,
|
|
||||||
label: {
|
|
||||||
text: item.name,
|
|
||||||
font_size: 12,
|
|
||||||
color: '#ffffff',
|
|
||||||
pixelOffsetY: -30,
|
|
||||||
pixelOffsetX: 0,
|
|
||||||
distanceDisplayCondition: true,
|
|
||||||
distanceDisplayCondition_far: 6000,
|
|
||||||
distanceDisplayCondition_near: 0,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
popup: `<div class="marsTiltPanel marsTiltPanel-theme-green">
|
|
||||||
<div style="postion: relative; padding: 60px; max-width: 500px; overflow: hidden;">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div style="position: absolute; bottom: 0; left: 0; width: 85px; height: 2px; transform: rotate(-45deg) translate(15px, -25px); background-color: #15babc;" ></div>
|
|
||||||
</div>`,
|
|
||||||
popupOptions: {
|
|
||||||
offsetY: 0,
|
|
||||||
offsetX: 0,
|
|
||||||
template: '{content}',
|
|
||||||
horizontalOrigin: 'Cesium.HorizontalOrigin.LEFT',
|
|
||||||
verticalOrigin: 'Cesium.VerticalOrigin.CENTER',
|
|
||||||
},
|
|
||||||
pointerEvents: true,
|
|
||||||
});
|
|
||||||
// 将新图形添加到图层中
|
|
||||||
graphicLayers.addGraphic(graphic);
|
|
||||||
graphicData.push(graphic);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.mars3d-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mapInfo {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 30px;
|
|
||||||
bottom: 0px;
|
|
||||||
left: 0px;
|
|
||||||
background: #3d3f3aaa;
|
|
||||||
z-index: 1000;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
span {
|
|
||||||
height: 100%;
|
|
||||||
width: 30%;
|
|
||||||
color: #ffffff;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
|
|
||||||
font-size: 15px;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue