1.mars3D获取
最简项目模板:https://gitee.com/marsgis/mars3d-vue-template/tree/master/mars3d-vue2
功能示例:https://gitee.com/marsgis/mars3d-vue-example.git
2.NPM安装
参考链接:https://blog.csdn.net/qq_26018335/article/details/125069868
这个按照步骤还是没有走通,报错如下,提示还是webpack环境没配置好,捣鼓了2天没整明白,暂时放弃了。
3.直接在index.html里引用
<!--引入cesium基础lib-->
<link href="./static/lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
<script>
// window.CESIUM_BASE_URL = "./lib/Cesium/" //非必须,如jsp、asp.net等非html框架报错时建议取消注释
// window.basePathUrl = '<%= BASE_URL %>'; // 标识config、widgets所在的目录
</script>
<script src="./static/lib/Cesium/Cesium.js" type="text/javascript" ></script>
<script src="./static/lib/turf/turf.min.js" type="text/javascript" ></script>
<!--引入mars3d库lib-->
<link href="./static/lib/mars3d/mars3d.css" rel="stylesheet" type="text/css" />
<script src="./static/lib/mars3d/mars3d.js" type="text/javascript" ></script>
4.创建三维球
<template>
<div>
<div id="mars3dContainer" class="mars3d-container"></div>
</div>
</template>
<script>
import Vue from 'vue'
// 为了方便使用,绑定到原型链,在其他vue文件,直接 this.mars3d 来使用
Vue.prototype.mars3d = window.mars3d
Vue.prototype.Cesium = window.Cesium
export default {
// name: 'mars3dViewer',
data(){
return{
}
},
props: {
// 地图唯一性标识
mapKey: {
type: String,
default: ''
},
// 初始化配置config.json的地址
url: String,
// 自定义参数
options: Object
},
mounted() {
var mapOptions = {
basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }],
};
var map = new mars3d.Map("mars3dContainer", mapOptions);
},
methods: {
}
}
</script>
<style >
.mars3d-container {
height: 100%;
overflow: hidden;
}
/* 重写Cesium的css */
/**cesium按钮背景色*/
.cesium-button {
background-color: #3f4854;
color: #e6e6e6;
fill: #e6e6e6;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
line-height: 32px;
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input {
background-color: rgba(63, 72, 84, 0.7);
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
background-color: rgba(63, 72, 84, 0.9);
}
.cesium-viewer-geocoderContainer .search-results {
background-color: #3f4854;
}
.cesium-geocoder-searchButton {
background-color: #3f4854;
}
.cesium-infoBox-title {
background-color: #3f4854;
}
.cesium-infoBox {
background: rgba(63, 72, 84, 0.9);
}
.cesium-toolbar-button img {
height: 100%;
}
.cesium-performanceDisplay-defaultContainer {
top: auto;
bottom: 35px;
right: 50px;
}
.cesium-performanceDisplay-ms,
.cesium-performanceDisplay-fps {
color: #fff;
}
/**cesium工具栏位置*/
.cesium-viewer-toolbar {
top: auto;
left: auto;
right: 12px;
bottom: 35px;
}
.cesium-viewer-toolbar > .cesium-toolbar-button,
.cesium-navigationHelpButton-wrapper,
.cesium-viewer-geocoderContainer {
margin-bottom: 5px;
float: right;
clear: both;
text-align: center;
}
.cesium-baseLayerPicker-dropDown {
bottom: 0;
right: 40px;
max-height: 700px;
margin-bottom: 5px;
}
.cesium-navigation-help {
top: auto;
bottom: 0;
right: 40px;
transform-origin: right bottom;
}
.cesium-sceneModePicker-wrapper {
width: auto;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
float: left;
margin: 0 3px;
}
.cesium-viewer-geocoderContainer .search-results {
left: 0;
right: 40px;
width: auto;
z-index: 9999;
}
.cesium-infoBox-title {
background-color: #3f4854;
}
.cesium-infoBox {
top: 50px;
background: rgba(63, 72, 84, 0.9);
}
/**左下工具栏菜单*/
.toolbar-dropdown-menu-div {
background: rgba(43, 44, 47, 0.8);
border: 1px solid #2b2c2f;
z-index: 991;
position: absolute;
right: 60px;
bottom: 40px;
display: none;
}
.toolbar-dropdown-menu {
min-width: 110px;
padding: 0;
}
.toolbar-dropdown-menu > li {
padding: 0 3px;
margin: 2px 0;
}
.toolbar-dropdown-menu > li > a {
color: #edffff;
display: block;
padding: 4px 10px;
clear: both;
font-weight: normal;
line-height: 1.6;
white-space: nowrap;
text-decoration: none;
}
.toolbar-dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #fff;
background-color: #444d59;
}
.toolbar-dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: #fff;
background-color: #444d59;
}
.toolbar-dropdown-menu i {
padding-right: 5px;
}
</style>
还有根据配置文件加载,可以参考官网示例。