媒体库-图片展示和图片历史路径 完整版
parent
027ed36300
commit
01dcf8cdc7
@ -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