<template>
|
<div id="mapContainer" class="mapContainer">
|
|
</div>
|
</template>
|
|
<script>
|
import mapServer from '@/assets/js/mapSdk/mapServe.js';
|
import mapConfig from '@/assets/js/mapSdk/mapConfig.js';
|
import mapData from '@/assets/js/mapSdk/mapData.js';
|
import { layer_selectAll } from "@/api/mapView/map.js";
|
import axios from 'axios';
|
import road from './road';
|
export default {
|
name: 'mapView',
|
mounted() {
|
this.initMap();
|
},
|
methods: {
|
async initMap() {
|
window.earthCtrl = new SmartEarth.EarthCtrl('mapContainer', {
|
// 隐藏默认底图
|
defaultImagery: false,
|
// 隐藏logo
|
printLog: false,
|
// sceneMode: SmartEarth.Cesium.SceneMode.SCENE2D
|
StaticFileBaseUrl: '/CimSDK/',
|
navigationOption: {
|
enableCompass: false,
|
enableZoomControls: false,
|
enableDistanceLegend: false,
|
enableCompassOuterRing: false,
|
},
|
|
});
|
|
// 初始化Cesium
|
window.Cesium = SmartEarth.Cesium;
|
// 初始化Viewer
|
window.Viewer = earthCtrl.viewer;
|
//设置地球颜色
|
Viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString('#A9A9A9');
|
// 地形加载
|
const terrain = config.terrain;
|
if (terrain.isShow && terrain.isUrl) {
|
const terrainProvider = await Cesium.CesiumTerrainProvider.fromUrl(terrain.isUrl, {
|
requestWaterMask: true,
|
requestVertexNormals: true,
|
});
|
|
Viewer.terrainProvider = terrainProvider;
|
}
|
// 默认设置底图
|
this.addImageLayer();
|
},
|
addImageLayer() {
|
const baseLayer = mapData.baseLayer;
|
// 添加天地图底图
|
mapServer.addLayer({
|
serveType: 'tdMap',
|
url: baseLayer.sUrl + baseLayer.vecLayer + baseLayer.lUrl,
|
});
|
// 添加天地图标注
|
mapServer.addLayer({
|
serveType: 'tdMap',
|
url: baseLayer.sUrl + baseLayer.cvaLayer + baseLayer.lUrl,
|
});
|
// 初始化视角
|
this.setdefaultPerspective();
|
},
|
setdefaultPerspective() {
|
mapConfig.sertCameraTo(mapData.defaultPerspective);
|
if (config.baseModel.url) {
|
mapServer.addLayer(config.baseModel);
|
}
|
this.getSelectLayers();
|
},
|
getSelectLayers() {
|
layer_selectAll().then(response => {
|
if (response.data.code != 200) return
|
|
response.data.result.filter(item => {
|
if (item.type == 2 && item.isShow == 1) {
|
if (item.cnName != "配网线") {
|
mapServer.addLayer(item)
|
}
|
}
|
|
})
|
this.$nextTick(() => {
|
this.addRoadLayer();
|
})
|
|
})
|
},
|
addRoadLayer() {
|
earthCtrl.factory.createPathLayer({
|
url: road,
|
// color: "#00FA9A", //线的颜色
|
color: "#ff0000", //线的颜色
|
width: 5.0, //线的宽度
|
pointColor: "#FFFFFF", //移动点的颜色
|
speed: 1,
|
far: 50000
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.mapContainer {
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
<style>
|
.map-info-bar {
|
display: none !important;
|
}
|
|
.el-form-item__label {
|
color: white
|
}
|
</style>
|
