遇到的问题 在自己项目集成Mars3D的时候 使用的官网推荐的插件vite-plugin-mars3d 来集成的时候疯狂报错 项目直接崩了 运行不起来了 所以采用第二种解决方法
1. 下载sdk
官方网址
mars3Dhttp://mars3d.cn/download.html下载这两个包
2. 下载下来的包放入自己项目的public文件
3. 在项目index.html文件导入
这时候mars3d就挂载到window上面了
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link href="./Mars3D/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
<link href="./Mars3D/mars3d/mars3d.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="app"></div>
<script>
// window.CESIUM_BASE_URL = "./Mars3D/Cesium/" //非必须,如jsp、asp.net等非html框架报错时建议取消注释
</script>
<script src="./Mars3D/Cesium/Cesium.js" type="text/javascript"></script>
<script src="./Mars3D/mars3d/mars3d.js" type="text/javascript"></script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
4. 页面使用
<template>
<div id="Container" class="container"></div>
</template>
<script setup lang="ts">
//引入(window as any).Cesium基础库
let map: any;
let tileLayer: any; // 地名
let graphicLayer: any; // 矢量图层对象:any;
let infoMars = () => {
let mapOptions: any = {
scene: {
center: {
lat: 30.30917976,
lng: 111.830266,
alt: 11036414,
heading: 0,
pitch: -90,
},
showSun: true, // 是否显示太阳。
showMoon: true,
showSkyBox: true,
showSkyAtmosphere: false, // 关闭球周边的白色轮廓 map.scene.skyAtmosphere = false
fog: true,
fxaa: true,
globe: {
showGroundAtmosphere: false, // 关闭大气(球表面白蒙蒙的效果)
depthTestAgainstTerrain: false,
// baseColor: "#3da1f9",
},
cameraController: {
zoomFactor: 3.0,
minimumZoomDistance: 1,
maximumZoomDistance: 50000000,
enableRotate: true,
enableZoom: true,
},
mapProjection: (window as any).mars3d.CRS.EPSG3857, // 2D下展示墨卡托投影
mapMode2D: (window as any).Cesium.MapMode2D.INFINITE_SCROLL, // 2D下左右一直可以滚动重复世界地图
},
control: false,
basemaps: [
{
name: "天地图影像(EPSG:3857)",
icon: "img/basemaps/tdt_img.png",
type: "tdt",
layer: "img_d",
key: (window as any).mars3d.Token.tiandituArr,
show: true,
},
{
name: "天地图电子(EPSG:3857)",
icon: "img/basemaps/tdt_vec.png",
type: "group",
layers: [
{
name: "底图",
type: "tdt",
layer: "vec_d",
key: (window as any).mars3d.Token.tiandituArr,
},
{
name: "注记",
type: "tdt",
layer: "vec_z",
key: (window as any).mars3d.Token.tiandituArr,
},
],
},
{
name: "天地图地形(EPSG:3857)",
icon: "img/basemaps/tdt_ter.png",
type: "group",
layers: [
{
name: "底图",
type: "tdt",
layer: "ter_d",
key: (window as any).mars3d.Token.tiandituArr,
},
{
name: "注记",
type: "tdt",
layer: "ter_z",
key: (window as any).mars3d.Token.tiandituArr,
// 表示缩小和放大瓦片数据的过滤方式。默认值为LINEAR线性结构,大部分地图调整为最近方式过滤能够有效提升地图清晰度。
minificationFilter: (window as any).Cesium.TextureMinificationFilter
.NEAREST,
magnificationFilter: (window as any).Cesium
.TextureMinificationFilter.NEAREST,
},
],
},
{
name: "天地图影像(EPSG:4326)",
icon: "img/basemaps/tdt_img.png",
type: "group",
layers: [
{
name: "底图",
type: "tdt",
layer: "img_d",
crs: "EPSG:4326",
key: (window as any).mars3d.Token.tiandituArr,
},
{
name: "注记",
type: "tdt",
layer: "img_z",
crs: "EPSG:4326",
key: (window as any).mars3d.Token.tiandituArr,
},
],
},
{
name: "天地图电子(EPSG:4326)",
icon: "img/basemaps/tdt_vec.png",
type: "group",
layers: [
{
name: "底图",
type: "tdt",
layer: "vec_d",
crs: "EPSG:4326",
key: (window as any).mars3d.Token.tiandituArr,
},
{
name: "注记",
type: "tdt",
layer: "vec_z",
crs: "EPSG:4326",
key: (window as any).mars3d.Token.tiandituArr,
},
],
},
{
name: "天地图地形(EPSG:4326)",
icon: "img/basemaps/tdt_ter.png",
type: "group",
layers: [
{
name: "底图",
type: "tdt",
layer: "ter_d",
crs: "EPSG:4326",
key: (window as any).mars3d.Token.tiandituArr,
},
{
name: "注记",
type: "tdt",
layer: "ter_z",
crs: "EPSG:4326",
key: (window as any).mars3d.Token.tiandituArr,
},
],
},
{
name: "天地图影像(英文)",
icon: "img/basemaps/tdt_img.png",
type: "group",
layers: [
{
name: "底图",
type: "tdt",
layer: "img_d",
key: (window as any).mars3d.Token.tiandituArr,
},
{
name: "底图",
type: "tdt",
layer: "img_e",
key: (window as any).mars3d.Token.tiandituArr,
},
],
},
{
name: "天地图电子(英文)",
icon: "img/basemaps/tdt_vec.png",
type: "group",
layers: [
{
name: "底图",
type: "tdt",
layer: "vec_d",
key: (window as any).mars3d.Token.tiandituArr,
},
{
name: "底图",
type: "tdt",
layer: "vec_e",
key: (window as any).mars3d.Token.tiandituArr,
},
],
},
],
};
map = new (window as any).mars3d.Map("Container", mapOptions);
// 创建DIV数据图层
graphicLayer = new (window as any).mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer);
// 在layer上绑定监听事件
let lastClickTime = 0;
let doubleClickDelay = 300;
graphicLayer.on(
(window as any).mars3d.EventType.click,
function (event: any) {
let currentTime = new Date().getTime();
if (currentTime - lastClickTime < doubleClickDelay) {
// 双击事件的处理逻辑
console.log("双击了矢量对象", event.graphic.attr.remark);
} else {
// 单击事件的处理逻辑,或者不做处理等待可能的第二次点击
console.log("单击了矢量对象", event.graphic.attr.remark);
}
lastClickTime = currentTime;
}
);
addDemoGraphic(graphicLayer);
addDemoGraphic2(graphicLayer);
addTileLayer(map);
};
let addTileLayer = (mars: any) => {
// 方式2:在创建地球后调用addLayer添加图层(直接new对应type类型的图层类)
tileLayer = new (window as any).mars3d.layer.TdtLayer({
name: "天地图影像注记",
layer: "img_z",
key: (window as any).mars3d.Token.tiandituArr,
});
mars.addLayer(tileLayer);
};
let addDemoGraphic = (graphicLayer: any) => {
const graphic = new (window as any).mars3d.graphic.DivGraphic({
position: [111.830266, 30.30917976],
zIndex: 1,
style: {
html: `<div class="marsBlackPanel animation-spaceInDown">
<div class="marsBlackPanel-text">项目2</div>
<div class="marsBlackPanel-link"></div>
</div>`,
horizontalOrigin: (window as any).Cesium.HorizontalOrigin.CENTER,
verticalOrigin: (window as any).Cesium.VerticalOrigin.BOTTOM,
// 高亮时的样式
highlight: {
// type: (window as any).mars3d.EventType.click,
className: "marsBlackPanel-highlight",
},
},
attr: { remark: "示例1" },
});
graphicLayer.addGraphic(graphic);
};
let addDemoGraphic2 = (graphicLayer: any) => {
const graphic = new (window as any).mars3d.graphic.DivGraphic({
position: [84.237605, 35.163252],
zIndex: 1,
style: {
html: `<div class="marsBlackPanel animation-spaceInDown">
<div class="marsBlackPanel-text">项目1</div>
<div class="marsBlackPanel-link"></div>
</div>`,
horizontalOrigin: (window as any).Cesium.HorizontalOrigin.CENTER,
verticalOrigin: (window as any).Cesium.VerticalOrigin.BOTTOM,
// 高亮时的样式
highlight: {
// type: (window as any).mars3d.EventType.click,
className: "marsBlackPanel-highlight",
},
},
attr: { remark: "示例2" },
});
graphicLayer.addGraphic(graphic);
};
onMounted(() => {
infoMars();
});
</script>
<style lang="scss">
.container {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
left: 0;
top: 0;
border: none;
overflow: hidden;
position: relative;
}
.marsBlackPanel {
padding: .2rem .8rem;
background-image: linear-gradient(90deg, #2f55e5, #4cbdec);
color: #FFF;
border-radius: 4px;
position: relative;
}
.marsBlackPanel-text {
color: #FFF !important;
font-size: .9rem;
}
.marsBlackPanel-link {
position: absolute;
height: 10px;
border: 1px solid #2280a8;
left: 50%;
bottom: -10px;
}
.marsBlackPanel-highlight {
border: 1px solid #FFF;
}
</style>
这样就能生成一个地球了