379 lines
8.8 KiB
Vue
379 lines
8.8 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";
|
||
let GEOSERVER_BASE_API = process.env.VUE_APP_GEOSERVER_URL;
|
||
// 为了方便使用,绑定到原型链，在其他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) => {
|
||
// 根据沂水县平邑登录获取对应的图层
|
||
try{
|
||
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);
|
||
attribute.pid = group.id;
|
||
delete attribute.highlight;
|
||
|
||
if(attribute.type == "geojson"){
|
||
delete attribute.symbol.styleOptions.opacity
|
||
delete attribute.symbol.styleOptions.color
|
||
}
|
||
|
||
if(attribute && attribute.symbol && attribute.symbol.styleField && attribute.symbol.styleFieldOptions && Object.keys(attribute.symbol.styleFieldOptions).length>0){
|
||
attribute.type = 'geojson';
|
||
|
||
if(attribute.layers){
|
||
attribute.url = "geoserver/ksp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName="+attribute.layers+"&maxFeatures=1000000&outputFormat=application%2Fjson";
|
||
}
|
||
|
||
delete attribute.layers;
|
||
// delete attribute.symbol.styleOptions.color;
|
||
delete attribute.parameters;
|
||
delete attribute.highlight;
|
||
|
||
// if(!attribute.symbol.styleOptions){
|
||
attribute.symbol.styleOptions = {
|
||
"opacity": 0.8,
|
||
"color": "",
|
||
"width": 2,
|
||
"clampToGround": true
|
||
}
|
||
// }
|
||
attribute.zIndex = 10000000000;
|
||
}
|
||
|
||
|
||
let ipinfo = this.matchHttpIpPort(attribute.url);
|
||
if(ipinfo){ // 如果匹配得到则替换为配置文件中的
|
||
attribute.url = attribute.url.replace(ipinfo[0],GEOSERVER_BASE_API);
|
||
}else{ //如果没有匹配到则直接拼接
|
||
attribute.url = GEOSERVER_BASE_API+attribute.url
|
||
}
|
||
|
||
configLayers.unshift(attribute);
|
||
});
|
||
}
|
||
|
||
});
|
||
data.map3d.layers = configLayers;
|
||
this.initMars3d(data.map3d);
|
||
});
|
||
|
||
}catch(e){
|
||
this.initMars3d(data.map3d);
|
||
}finally{
|
||
|
||
}
|
||
|
||
|
||
// this.initMars3d(data.map3d)// 构建地图
|
||
});
|
||
}
|
||
},
|
||
|
||
destroy() {
|
||
this[`map${this.mapKey}`].destroy();
|
||
delete this[`map${this.mapKey}`];
|
||
},
|
||
|
||
methods: {
|
||
matchHttpIpPort(url) { // 匹配“ http://ip:port ”
|
||
const ipRegex = /^http\:\/\/\b(?:[0-9]{1,3}\.){3}[0-9]{1,3}\b\:\b[0-9]{1,5}\//;
|
||
const match = url.match(ipRegex);
|
||
if (match) {
|
||
return match;
|
||
}
|
||
return null;
|
||
},
|
||
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>
|