373 lines
9.2 KiB
Vue
373 lines
9.2 KiB
Vue
<template>
|
||
<div
|
||
:id="`mars3d-container${mapKey}`"
|
||
:class="[
|
||
'mars3d-container',
|
||
customClass,
|
||
{ 'mars3d-container-compare-rh': compare },
|
||
]"
|
||
></div>
|
||
</template>
|
||
|
||
<script>
|
||
import Vue from "vue";
|
||
import axios from "axios";
|
||
import AppInfo from "../../../public/config/app.json";
|
||
|
||
// 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用
|
||
Vue.prototype.mars3d = window.mars3d;
|
||
Vue.prototype.Cesium = mars3d.Cesium;
|
||
|
||
export default {
|
||
name: "mars3dViewer",
|
||
|
||
props: {
|
||
// 初始化配置参数
|
||
url: String,
|
||
widgetUrl: String,
|
||
|
||
// 地图唯一性标识
|
||
mapKey: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
|
||
// 自定义参数
|
||
options: Object,
|
||
|
||
// 是否分屏显示
|
||
compare: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
|
||
// 是否插入到body元素上
|
||
appendToBody: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
|
||
// 自定义css类名
|
||
customClass: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
},
|
||
|
||
mounted() {
|
||
if (this.appendToBody) {
|
||
document.body.appendChild(this.$el);
|
||
}
|
||
|
||
if (this.mapKey) {
|
||
this.initMars3d(this.options);
|
||
} else {
|
||
mars3d.Resource.fetchJson({ url: this.url }).then((data) => {
|
||
// 根据费县平邑登录获取对应的图层
|
||
axios({
|
||
method: "get",
|
||
url: AppInfo[localStorage.getItem("areaName")].layerurl,
|
||
}).then((res) => {
|
||
let configLayers = [
|
||
|
||
];
|
||
res.data.data.forEach((item, index) => {
|
||
let group = null;
|
||
group = {
|
||
id: parseInt(Math.random() * 10000000),
|
||
name: item.serverName,
|
||
type: "group",
|
||
};
|
||
configLayers.unshift(group);
|
||
if (item.children && item.children.length > 0) {
|
||
item.children.forEach((it, idx) => {
|
||
|
||
let attribute = JSON.parse(it.attribute);
|
||
if(attribute.name == '森林火灾危险等级'){
|
||
attribute.type = "geojson";
|
||
attribute.url = "http://221.2.83.254:9007/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Aweixianxingdengji&maxFeatures=50&outputFormat=application%2Fjson"
|
||
// attribute.symbol.styleOptions = {}
|
||
delete attribute.layers;
|
||
delete attribute.parameters;
|
||
delete attribute.highlight;
|
||
attribute.symbol.styleOptions = {
|
||
"opacity": 0.8,
|
||
"color": "",
|
||
"width": 2,
|
||
"clampToGround": true
|
||
}
|
||
attribute.zIndex = 10000000000;
|
||
}
|
||
if(attribute.name == '引水上山水管网'){
|
||
attribute.type = "geojson";
|
||
attribute.url = "http://221.2.83.254:9007/geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ksp%3Ayinshuishangshanshuiguanwang&maxFeatures=100000&outputFormat=application%2Fjson";
|
||
delete attribute.layers;
|
||
delete attribute.parameters;
|
||
delete attribute.highlight;
|
||
attribute.symbol.styleOptions = {
|
||
"opacity": 0.8,
|
||
"color": "",
|
||
"width": 2,
|
||
"clampToGround": true
|
||
}
|
||
attribute.zIndex = 10000000000;
|
||
}
|
||
if(attribute.symbol && attribute.symbol.styleOptions && attribute.symbol.styleOptions.label){
|
||
attribute.symbol.styleOptions.label.pixelOffsetY = -40
|
||
attribute.symbol.styleOptions.label = {
|
||
text: "{name}",
|
||
font_size: 14,
|
||
color: Cesium.Color.AZURE,
|
||
outline: true,
|
||
outlineColor: Cesium.Color.BLACK,
|
||
outlineWidth: 2,
|
||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||
// pixelOffset: new Cesium.Cartesian2(10, -25) // 偏移量
|
||
pixelOffsetY:-40
|
||
}
|
||
}
|
||
attribute.pid = group.id;
|
||
// 替换所有图层地址路径 历史遗留数据库保存的是223服务器地址
|
||
attribute.url = attribute.url.replace("http://223.99.16.253:9007","http://221.2.83.254:9007")
|
||
// 去掉所有图层点击选中样式
|
||
delete attribute.highlight;
|
||
configLayers.unshift(attribute);
|
||
});
|
||
}
|
||
});
|
||
|
||
data.map3d.layers = configLayers
|
||
this.initMars3d(data.map3d);
|
||
});
|
||
// this.initMars3d(data.map3d)// 构建地图
|
||
});
|
||
}
|
||
},
|
||
|
||
destroy() {
|
||
this[`map${this.mapKey}`].destroy();
|
||
delete this[`map${this.mapKey}`];
|
||
},
|
||
|
||
methods: {
|
||
getLayers() {},
|
||
initMars3d(options) {
|
||
if (this[`map${this.mapKey}`]) return;
|
||
|
||
const mapOptions = {
|
||
...options,
|
||
...this.options,
|
||
};
|
||
|
||
// 创建三维地球场景
|
||
var map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions);
|
||
|
||
this[`map${this.mapKey}`] = map;
|
||
|
||
// 挂载到全局对象下，所有组件通过 this.map 访问
|
||
// Vue.prototype[`map${this.mapKey}`] = map
|
||
|
||
// 绑定对alert的处理，右键弹出信息更美观。
|
||
window.haoutil = window.haoutil || {};
|
||
window.haoutil.msg = (msg) => {
|
||
this.$message.success(msg);
|
||
};
|
||
window.haoutil.alert = (msg) => {
|
||
this.$message.success(msg);
|
||
};
|
||
//widget处理
|
||
if (
|
||
!(
|
||
typeof this.widgetUrl == "undefined" ||
|
||
this.widgetUrl == null ||
|
||
this.widgetUrl == ""
|
||
)
|
||
)
|
||
mars3d.Resource.fetchJson({ url: this.widgetUrl }).then((data) => {
|
||
this.initStaticWidget(map, data);
|
||
});
|
||
|
||
// 抛出事件
|
||
this.$emit("onload", map);
|
||
//开场动画
|
||
// map.openFlyAnimation({
|
||
// // duration1:4,
|
||
// // easingFunction1: Cesium.EasingFunction.QUINTIC_IN_OUT,
|
||
// callback: function () {
|
||
// //动画播放完成后回调
|
||
// },
|
||
// });
|
||
},
|
||
|
||
//初始化外部静态widget功能（兼容使用传统模式开发的一些widget）
|
||
initStaticWidget(map, widget) {
|
||
mars3d.widget.init(map, widget, "/");
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||
<style>
|
||
.mars3d-container {
|
||
height: 100%;
|
||
height: 100vh;
|
||
position: absolute;
|
||
top: 0px;
|
||
left: 0px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 重写Cesium的css */
|
||
|
||
/**cesium按钮背景色*/
|
||
.cesium-button {
|
||
background-color: #062020;
|
||
color: #e6e6e6;
|
||
fill: #e6e6e6;
|
||
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: 460px;
|
||
bottom: 150px;
|
||
}
|
||
|
||
.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>
|