<template>
|
<div class="menu_Box">
|
<div
|
class="leftMen_div"
|
@click="setChangeTwoMenu(item)"
|
v-for="(item, index) in setListTwoMenu"
|
:class="{ lefMenuDivActive: showTwoMenuFlag == item.id }"
|
>
|
<div class="menuTwoImage" :class="item.css"></div>
|
<div>{{ $t(item.label) }}</div>
|
</div>
|
<mapinfo ref="mapinfo" />
|
<maplayer ref="maplayer" />
|
<input type="file" accept=".kml" class="file" style="display: none" />
|
</div>
|
</template>
|
|
<script>
|
import { transform } from 'ol/proj';
|
import mapinfo from '../Tools/mapinfo.vue';
|
import maplayer from '../Tools/maplayer.vue';
|
|
export default {
|
components: { mapinfo, maplayer },
|
data() {
|
return {
|
showTwoMenuFlag: false,
|
setListTwoMenu: [],
|
setListTwoMenuAll: [
|
[
|
{
|
id: 'a1',
|
label: 'synthesis.layer',
|
name: '图层管理',
|
css: 'twoMenu_imge11',
|
},
|
{
|
id: 'a2',
|
name: '场景提取',
|
label: 'synthesis.sceneExtraction',
|
css: 'twoMenu_imge12',
|
},
|
{
|
id: 'a3',
|
label: 'synthesis.release',
|
name: '场景发布',
|
css: 'twoMenu_imge13',
|
},
|
],
|
[
|
{
|
id: 'b1',
|
label: 'synthesis.split',
|
name: '分屏',
|
css: 'twoMenu_imge21',
|
},
|
{
|
id: 'b2',
|
label: 'synthesis.twod',
|
name: '二维',
|
css: 'twoMenu_imge22',
|
},
|
{
|
id: 'b3',
|
label: 'synthesis.threed',
|
name: '三维',
|
css: 'twoMenu_imge23',
|
},
|
{
|
id: 'b4',
|
label: 'synthesis.full',
|
name: '全图',
|
css: 'twoMenu_imge24',
|
},
|
{
|
id: 'b5',
|
label: 'synthesis.zommin',
|
name: '放大',
|
css: 'twoMenu_imge25',
|
},
|
{
|
id: 'b6',
|
label: 'synthesis.zoomout',
|
name: '缩小',
|
css: 'twoMenu_imge26',
|
},
|
{
|
id: 'b7',
|
label: 'synthesis.rule',
|
name: '比例尺',
|
css: 'twoMenu_imge27',
|
},
|
{
|
id: 'b8',
|
label: 'synthesis.compass',
|
name: '指北针',
|
css: 'twoMenu_imge28',
|
},
|
],
|
[
|
{
|
id: 'c1',
|
label: 'synthesis.someroaming',
|
name: '点漫游',
|
css: 'twoMenu_imge31',
|
},
|
{
|
id: 'c2',
|
label: 'synthesis.lineroaming',
|
name: '线路漫游',
|
css: 'twoMenu_imge32',
|
},
|
{
|
id: 'c3',
|
label: 'synthesis.mouseroaming',
|
name: '鼠标漫游',
|
css: 'twoMenu_imge33',
|
},
|
{
|
id: 'c4',
|
label: 'synthesis.snapshot',
|
name: '地图快照',
|
css: 'twoMenu_imge34',
|
},
|
{
|
id: 'c5',
|
label: 'synthesis.tdisplay',
|
name: '三维演示',
|
css: 'twoMenu_imge35',
|
},
|
],
|
[
|
{
|
id: 'd1',
|
label: 'synthesis.contouranalysis',
|
name: '等高线',
|
css: 'twoMenu_imge41',
|
},
|
{
|
id: 'd2',
|
label: 'synthesis.slopeanalysis',
|
name: '坡度分析',
|
css: 'twoMenu_imge42',
|
},
|
{
|
id: 'd3',
|
label: 'synthesis.pathanalysis',
|
name: '路径分析',
|
css: 'twoMenu_imge43',
|
},
|
{
|
id: 'd4',
|
label: 'synthesis.cuttinganalysis',
|
name: '地形剖切',
|
css: 'twoMenu_imge44',
|
},
|
{
|
id: 'd5',
|
label: 'synthesis.floodanalysis',
|
name: '淹没分析',
|
css: 'twoMenu_imge45',
|
},
|
{
|
id: 'd6',
|
label: 'synthesis.earthworkcalculation',
|
name: '土方量计算',
|
css: 'twoMenu_imge46',
|
},
|
{
|
id: 'd7',
|
label: 'synthesis.crosssectionanalysis',
|
name: '三维截面',
|
css: 'twoMenu_imge47',
|
},
|
{
|
id: 'd8',
|
label: 'synthesis.imagecontrast',
|
name: '影像对比',
|
css: 'twoMenu_imge48',
|
},
|
{
|
id: 'd9',
|
label: 'synthesis.pipelineAnalysis',
|
name: '管道分析',
|
css: 'twoMenu_imge49',
|
},
|
{
|
id: 'd10',
|
label: 'synthesis.flatterrain',
|
name: '地形平整',
|
css: 'twoMenu_imge410',
|
},
|
{
|
id: 'd11',
|
label: 'synthesis.terrainexcavation',
|
name: '地形开挖',
|
css: 'twoMenu_imge411',
|
},
|
],
|
[
|
{
|
id: 'e1',
|
label: 'synthesis.attributequery',
|
name: '属性查询',
|
css: 'twoMenu_imge51',
|
},
|
{
|
id: 'e2',
|
label: 'synthesis.rangequery',
|
name: '空间查询',
|
css: 'twoMenu_imge52',
|
},
|
],
|
[
|
{
|
id: 'f1',
|
label: 'synthesis.gpsrtk',
|
name: '坐标定位',
|
css: 'twoMenu_imge61',
|
},
|
{
|
id: 'f2',
|
label: 'synthesis.placenamelocation',
|
name: '地名定位',
|
css: 'twoMenu_imge62',
|
},
|
],
|
[
|
{
|
id: 'j1',
|
label: 'synthesis.synthobj.m1',
|
name: '水平距离',
|
css: 'twoMenu_imge71',
|
},
|
{
|
id: 'j2',
|
label: 'synthesis.synthobj.m4',
|
name: '垂直高度',
|
css: 'twoMenu_imge72',
|
},
|
{
|
id: 'j3',
|
label: 'synthesis.synthobj.m6',
|
name: '平面面积',
|
css: 'twoMenu_imge73',
|
},
|
{
|
id: 'j4',
|
label: 'synthesis.synthobj.m7',
|
name: '体积',
|
css: 'twoMenu_imge74',
|
},
|
{
|
id: 'j5',
|
label: 'synthesis.synthobj.m5',
|
name: '表面面积',
|
css: 'twoMenu_imge75',
|
},
|
{
|
id: 'j6',
|
label: 'synthesis.synthobj.m2',
|
name: '空间距离',
|
css: 'twoMenu_imge76',
|
},
|
],
|
[
|
{
|
id: 'h1',
|
label: 'synthesis.point',
|
name: '点',
|
css: 'twoMenu_imge81',
|
},
|
{
|
id: 'h2',
|
label: 'synthesis.line',
|
name: '线',
|
css: 'twoMenu_imge82',
|
},
|
{
|
id: 'h3',
|
label: 'synthesis.rectangle',
|
name: '矩形',
|
css: 'twoMenu_imge83',
|
},
|
{
|
id: 'h4',
|
label: 'synthesis.polygon',
|
name: '多边形',
|
css: 'twoMenu_imge84',
|
},
|
{
|
id: 'h5',
|
label: 'synthesis.import',
|
name: '导入',
|
css: 'twoMenu_imge85',
|
},
|
{
|
id: 'h6',
|
label: 'synthesis.export',
|
name: '导出',
|
css: 'twoMenu_imge86',
|
},
|
{
|
id: 'h7',
|
label: 'synthesis.removepaint',
|
name: '清除',
|
css: 'twoMenu_imge87',
|
},
|
],
|
],
|
isRuler: false,
|
isNaviget: false,
|
isolineFlag: false,
|
isslopeFlag: false,
|
isContrastFlag: false,
|
};
|
},
|
methods: {
|
//二級菜单点击切换
|
setChangeTwoMenu(res) {
|
this.showTwoMenuFlag = res.id;
|
this.$store.state.mapMenuBoolean = false;
|
this.$store.state.mapMenuBoxFlag = null;
|
this.$store.state.mapPopBoolean = false;
|
this.$store.state.mapPopBoxFlag = null;
|
var val = res.id[0];
|
if (window.model != null) {
|
window.model.deleteObject();
|
window.model = null;
|
}
|
switch (val) {
|
case 'a': //图层管理
|
this.setCoverage(res.id);
|
break;
|
case 'b':
|
this.setViewport(res.id);
|
break;
|
case 'c':
|
this.setWander(res.id);
|
break;
|
case 'd':
|
this.setAnalsy(res.id);
|
break;
|
case 'e':
|
this.setIquery(res.id);
|
break;
|
case 'f':
|
this.setOrientation(res.id);
|
break;
|
case 'j':
|
this.setMeasurement(res.id);
|
break;
|
case 'h':
|
sgworld.Creator.SimpleGraphic.edit(true, { editProp: true });
|
this.setPlot(res.id);
|
break;
|
}
|
},
|
setPlot(res) {
|
switch (res) {
|
case 'h1':
|
sgworld.Creator.createSimpleGraphic(
|
'point',
|
{},
|
function (entity) {}
|
);
|
break;
|
case 'h2':
|
sgworld.Creator.createSimpleGraphic(
|
'polyline',
|
{},
|
function (entity) {}
|
);
|
break;
|
case 'h3':
|
sgworld.Creator.createSimpleGraphic(
|
'rectangle',
|
{},
|
function (entity) {}
|
);
|
break;
|
case 'h4':
|
sgworld.Creator.createSimpleGraphic(
|
'polygon',
|
{},
|
function (entity) {}
|
);
|
break;
|
case 'h5':
|
this.handleOpenClick();
|
break;
|
case 'h6':
|
this.handleSaveClick();
|
break;
|
case 'h7':
|
sgworld.Creator.SimpleGraphic.clear();
|
|
break;
|
}
|
},
|
handleSaveClick() {
|
let funDownload = function (content, filename) {
|
let eleLink = document.createElement('a');
|
eleLink.download = filename;
|
eleLink.style.display = 'none';
|
// 字符内容转变成blob地址
|
let blob = new Blob([content]);
|
eleLink.href = URL.createObjectURL(blob);
|
// 触发点击
|
document.body.appendChild(eleLink);
|
eleLink.click();
|
// 然后移除
|
document.body.removeChild(eleLink);
|
};
|
let entities = new Cesium.EntityCollection();
|
let dataSources = sgworld.Viewer.dataSources;
|
for (let i = 0, j = dataSources.length; i < j; i++) {
|
for (let v of dataSources.get(i).entities.values) {
|
entities.add(v);
|
}
|
}
|
for (let v of sgworld.Viewer.entities.values) {
|
entities.add(v);
|
}
|
|
if (entities.values.length) {
|
console.log(sgworld.Viewer.entities);
|
|
let promise = Cesium.exportKml({ entities: sgworld.Viewer.entities });
|
console.log(entities);
|
// let promise = Cesium.exportKml({ entities: entities });
|
promise.then(function (e) {
|
funDownload(e.kml, new Date().getTime() + '.kml');
|
});
|
} else {
|
alert('当前场景没有entities实体');
|
}
|
},
|
handleOpenClick() {
|
// let that = this;
|
let fileInput = document.querySelector('.file');
|
fileInput.onchange = function (evt) {
|
let files = evt.target.files;
|
if (files.length > 0) {
|
let file = evt.target.files[0];
|
let fileReader = new FileReader();
|
fileReader.readAsDataURL(file);
|
fileReader.onload = () => {
|
sgworld.Viewer.dataSources
|
.add(
|
Cesium.KmlDataSource.load(fileReader.result, {
|
camera: sgworld.Viewer.scene.camera,
|
canvas: sgworld.Viewer.scene.canvas,
|
})
|
)
|
.then((KmlDataSource) => {
|
console.log(KmlDataSource);
|
// let entities = kmlDataSource.entities;
|
});
|
};
|
}
|
// fileInput.value = null;
|
};
|
fileInput.click();
|
},
|
setMeasurement(res) {
|
switch (res) {
|
case 'j1':
|
var measure = window.sgworld.Command.execute(
|
0,
|
2,
|
this.colorAll,
|
(data) => {
|
data.id = window.sgworld.Core.getuid();
|
this.measureData.set(data.id, measure);
|
this.openMeasureResultInfo('水平距离', data);
|
}
|
);
|
break;
|
case 'j6':
|
var measure = window.sgworld.Command.execute(
|
0,
|
10,
|
this.colorAll,
|
(data) => {
|
data.id = window.sgworld.Core.getuid();
|
this.measureData.set(data.id, measure);
|
this.openMeasureResultInfo('空间距离', data);
|
}
|
);
|
break;
|
case 'j3':
|
var measure = window.sgworld.Command.execute(
|
1,
|
11,
|
this.colorAll,
|
(data) => {
|
data.id = window.sgworld.Core.getuid();
|
this.measureData.set(data.id, measure);
|
this.openMeasureResultInfo('海拔高度', data);
|
}
|
);
|
break;
|
case 'j2':
|
var measure = window.sgworld.Command.execute(
|
0,
|
5,
|
this.colorAll,
|
(data) => {
|
data.id = window.sgworld.Core.getuid();
|
this.measureData.set(data.id, measure);
|
this.openMeasureResultInfo('垂直高度', data);
|
}
|
);
|
break;
|
case 'j5':
|
var measure = window.sgworld.Command.execute(
|
0,
|
8,
|
{
|
...this.colorAll,
|
tin: true, // 是否显示tin三角网
|
onlyTerrain: false, // 是否只测量精细地形
|
},
|
(data) => {
|
data.id = window.sgworld.Core.getuid();
|
this.measureData.set(data.id, measure);
|
this.openMeasureResultInfo('表面面积', data);
|
}
|
);
|
break;
|
case 'j3':
|
var measure = window.sgworld.Command.execute(
|
0,
|
3,
|
this.colorAll,
|
(data) => {
|
data.id = window.sgworld.Core.getuid();
|
this.measureData.set(data.id, measure);
|
this.openMeasureResultInfo('平面面积', data);
|
}
|
);
|
break;
|
case 'j4':
|
var volumetricMeasurementTool =
|
window.sgworld.Creator.createVolumetricMeasureTool();
|
volumetricMeasurementTool.startDrawing(
|
{ ...this.colorAll, onlyTerrain: false },
|
'auto',
|
(data) => {
|
if (volumetricMeasurementTool.popupData) {
|
volumetricMeasurementTool.popupData.value = `填方：${
|
data.volume.fill.toFixed(4) + data.unit.fill
|
}<br>挖方：${data.volume.dig.toFixed(4) + data.unit.dig}`;
|
} else {
|
data.id = window.sgworld.Core.getuid();
|
this.measureData.set(data.id, volumetricMeasurementTool);
|
let popupData = this.openMeasureResultInfo('体积方量', data);
|
volumetricMeasurementTool.popupData = popupData;
|
}
|
}
|
);
|
break;
|
case 'j8':
|
var measure = window.sgworld.Command.execute(
|
0,
|
12,
|
this.colorAll,
|
(data) => {
|
data.id = window.sgworld.Core.getuid();
|
this.measureData.set(data.id, measure);
|
this.openMeasureResultInfo('角度', data);
|
}
|
);
|
break;
|
}
|
},
|
openMeasureResultInfo(name, data) {
|
let info = '';
|
switch (name) {
|
case '水平距离':
|
case '空间距离':
|
info = '总长度：' + data.distance[data.distance.length - 1];
|
break;
|
case '海拔高度':
|
info = '海拔：' + data.height;
|
break;
|
case '垂直高度':
|
info = `${data.gddistance}<br>${data.kjdistance}<br>${data.spdistance}`;
|
break;
|
case '表面面积':
|
case '平面面积':
|
info = data.mj;
|
break;
|
case '角度':
|
data.labels.forEach((label) => {
|
info += label.label.text.getValue() + '<br>';
|
});
|
break;
|
case '体积方量':
|
info = `填方：${
|
data.volume.fill.toFixed(4) + data.unit.fill
|
}<br>挖方：${data.volume.dig.toFixed(4) + data.unit.dig}`;
|
break;
|
}
|
return (
|
this.$refs &&
|
this.$refs.mapinfo &&
|
this.$refs.mapinfo.open(name, info, {
|
close: () => {
|
// 清除测量
|
this.clearMeasure(data.id);
|
},
|
})
|
);
|
},
|
clearMeasure(id) {
|
if (id) {
|
let data = this.measureData.get(id);
|
data && data.deleteObject && data.deleteObject();
|
// 体积方量
|
data && data.cleanUp && data.cleanUp();
|
this.measureData.delete(id);
|
} else {
|
this.measureData.forEach((data) => {
|
data.deleteObject && data.deleteObject();
|
// 体积方量
|
data.cleanUp && data.cleanUp();
|
});
|
this.measureData.clear();
|
}
|
},
|
setIquery(res) {
|
switch (res) {
|
case 'e2':
|
this.$store.state.mapMenuBoolean = true;
|
this.$store.state.mapMenuBoxFlag = '1';
|
break;
|
case 'e1':
|
this.$store.state.mapMenuBoolean = true;
|
this.$store.state.mapMenuBoxFlag = '2';
|
break;
|
}
|
},
|
setAnalsy(res) {
|
var that = this;
|
switch (res) {
|
case 'd1':
|
that.isolineFlag = !that.isolineFlag;
|
elevationTool.tf = that.isolineFlag;
|
elevationTool.render();
|
break;
|
case 'd2':
|
that.isslopeFlag = !that.isslopeFlag;
|
if (that.isslopeFlag == true) {
|
elevationTool.type = 'slope';
|
} else {
|
elevationTool.type = 'none';
|
}
|
elevationTool.render();
|
break;
|
case 'd3':
|
var value = {
|
name: 'Analysis',
|
id: 3,
|
};
|
this.$bus.$emit('mapChangeBox', value);
|
break;
|
case 'd4':
|
if (window.AnalysisDXPM) {
|
this.clear(res);
|
} else {
|
this.addterrainSectionAnalysis();
|
}
|
break;
|
case 'd5':
|
if (window.AnalysisFlood) {
|
this.clear(res);
|
} else {
|
this.addAnalysisFlood();
|
}
|
break;
|
case 'd6':
|
var that = this;
|
var volumetricMeasurementTool =
|
sgworld.Creator.createVolumetricMeasureTool();
|
volumetricMeasurementTool.startDrawing(
|
{ ...this.colorAll, onlyTerrain: false },
|
'auto',
|
(data) => {
|
if (volumetricMeasurementTool.popupData) {
|
volumetricMeasurementTool.popupData.value = `填方：${
|
data.volume.fill.toFixed(4) + data.unit.fill
|
}<br>挖方：${data.volume.dig.toFixed(4) + data.unit.dig}`;
|
} else {
|
data.id = sgworld.Core.getuid();
|
this.measureData.set(data.id, volumetricMeasurementTool);
|
let popupData = that.openMeasureResultInfo('体积方量', data);
|
volumetricMeasurementTool.popupData = popupData;
|
}
|
}
|
);
|
break;
|
case 'd7':
|
var that = this;
|
window.model = sgworld.Creator.create3DTilesets(
|
'',
|
modelUrl,
|
{},
|
{},
|
'0',
|
true,
|
(data) => {
|
sgworld.Navigate.flyToObj(data);
|
that.setclippingModel();
|
}
|
);
|
break;
|
case 'd8':
|
if (this.isContrastFlag == false) {
|
this.isContrastFlag = true;
|
sgworld.Analysis.createCurtainContrast(2, 1);
|
} else {
|
this.isContrastFlag = false;
|
sgworld.Analysis.clearCurtainContrast();
|
}
|
break;
|
case 'd10':
|
if (window.TerrainFlattening) {
|
window.TerrainFlattening.remove();
|
window.TerrainFlattening = null;
|
} else {
|
sgworld.Creator.createSimpleGraphic(
|
'polygon',
|
{
|
clampToGround: true,
|
},
|
function (entity) {
|
var positions = entity.polygon.hierarchy.getValue().positions;
|
sgworld.Creator.SimpleGraphic.remove(entity.id);
|
window.TerrainFlattening =
|
sgworld.Creator.createTerrainModifier(
|
'地形压平',
|
positions,
|
10,
|
{}
|
);
|
}
|
);
|
}
|
break;
|
case 'd11':
|
if (window.Excavation) {
|
window.Excavation.clear();
|
window.Excavation = null;
|
} else {
|
window.Excavation = sgworld.Analysis.TerrainExcavation(
|
10,
|
{},
|
function () {}
|
);
|
}
|
break;
|
}
|
},
|
setclippingModel() {
|
if (window.model) {
|
setTimeout(() => {
|
window.model.clippingModel({
|
direction: 'z',
|
});
|
}, 1000);
|
// window.model.clippingModel({
|
// direction: 'z',
|
// });
|
}
|
},
|
clear(res) {
|
switch (res) {
|
case 'd4':
|
layer.close(this.dxpmIndex);
|
this.dxpmIndex = undefined;
|
if (window.AnalysisDXPM) {
|
window.AnalysisDXPM.flyPoint &&
|
Viewer.entities.remove(window.AnalysisDXPM.flyPoint);
|
window.AnalysisDXPM && window.AnalysisDXPM.deleteObject();
|
window.AnalysisDXPM = undefined;
|
}
|
break;
|
case 'd5':
|
window.AnalysisFlood.endWater();
|
window.AnalysisFlood = undefined;
|
break;
|
}
|
},
|
addAnalysisFlood() {
|
var method = {
|
pointSelect: true,
|
spood: 20,
|
GroupID: 0,
|
url: '/SmartEarthSDK/Workers/image/waterNormals.jpg',
|
};
|
window.AnalysisFlood = sgworld.Command.execute(
|
2,
|
2,
|
method,
|
(value) => {}
|
);
|
},
|
|
addterrainSectionAnalysis() {
|
window.AnalysisDXPM = sgworld.Command.execute(
|
2,
|
6,
|
{ cyjj: 50, objid: 0 },
|
(Distance) => {
|
if (Distance.gcs && Distance.gcs.length) {
|
window.AnalysisDXPM.analyseData = Distance;
|
this.dxpmIndex = layer.open({
|
type: 2,
|
title: '分析结果',
|
shade: false,
|
area: ['80%', '280px'],
|
offset: 'b',
|
skin: 'other-class',
|
content: '/SmartEarthSDK/Workers/analysis/AnalysisDXPM.html',
|
end: () => {
|
this.dxpmIndex && this.clear('d4');
|
},
|
});
|
} else {
|
//剖面
|
window.AnalysisDXPM && window.AnalysisDXPM.deleteObject();
|
}
|
}
|
);
|
},
|
setWander(res) {
|
switch (res) {
|
case 'c1':
|
window.sgworld.Analysis.setPointFly();
|
break;
|
case 'c2':
|
var url = window.location.href;
|
var testurl = '';
|
if (url.indexOf('web') != -1) {
|
testurl = '/web';
|
}
|
window.sgworld.Command.execute(2, 3, '', (data) => {
|
data.showPoint = false;
|
data.showLine = true;
|
data.mode = 1;
|
// 弹窗数据
|
window.PathAnimationData = {
|
flyData: data,
|
};
|
window.PathAnimationData.winIndex = layer.open({
|
type: 2,
|
title: '路径动画',
|
shade: false,
|
area: ['352px', '690px'],
|
offset: 'r',
|
skin: 'other-class',
|
content: testurl + '/SmartEarthSDK/Workers/path/Path.html',
|
end: function () {
|
PathAnimationData.fly && PathAnimationData.fly.exit();
|
},
|
});
|
});
|
break;
|
case 'c3':
|
sgworld.Analysis.createindoormode({ showHelp: true });
|
break;
|
case 'c4':
|
window.sgworld.Analysis.createScreenshot();
|
break;
|
}
|
},
|
setOrientation(res) {
|
var resid;
|
switch (res) {
|
case 'f1':
|
resid = 1;
|
break;
|
case 'f2':
|
resid = 2;
|
break;
|
}
|
var val = {
|
name: 'Coord',
|
id: resid,
|
};
|
this.$bus.$emit('mapChangeBox', val);
|
},
|
setViewport(res) {
|
switch (res) {
|
case 'b1': //分屏
|
this.$bus.$emit('changemap', 1);
|
break;
|
case 'b2': //二维
|
this.$bus.$emit('changemap', 2);
|
break;
|
case 'b3': //三维
|
this.$bus.$emit('changemap', 3);
|
break;
|
case 'b4': //全图
|
window.sgworld.Navigate.jumpTo({
|
//跳转视角
|
destination: new Cesium.Cartesian3.fromDegrees(110, 32, 8000000),
|
});
|
window.map
|
.getView()
|
.setCenter(transform([110, 32], 'EPSG:4326', 'EPSG:3857'));
|
window.map.getView().setZoom(4);
|
break;
|
case 'b5': //放大
|
window.sgworld.Navigate.zoomIn();
|
// 获取当前视图
|
var zoom = window.map.getView().getZoom(); // 获取当前缩放级别
|
window.map.getView().setZoom(zoom + 1); // 设置缩放级别
|
|
break;
|
case 'b6': //缩小
|
window.sgworld.Navigate.zoomOut();
|
var zoom = window.map.getView().getZoom(); // 获取当前缩放级别
|
window.map.getView().setZoom(zoom - 1); // 设置缩放级别
|
break;
|
case 'b7': //比例尺
|
this.isRuler = !this.isRuler;
|
window.sgworld.navControl('scale', this.isRuler);
|
break;
|
case 'b8': //指北针
|
this.isNaviget = !this.isNaviget;
|
window.sgworld.navControl('nav', this.isNaviget);
|
break;
|
}
|
},
|
setCoverage(res) {
|
switch (res) {
|
case 'a1':
|
this.$refs && this.$refs.maplayer && this.$refs.maplayer.open();
|
break;
|
}
|
},
|
menuChange(res) {
|
this.setListTwoMenu = this.setListTwoMenuAll[res];
|
},
|
},
|
mounted() {
|
this.measureData = new Map();
|
this.colorAll = {
|
point: Cesium.Color.fromCssColorString('#ff0000'),
|
polyline: Cesium.Color.fromCssColorString('#ffff00').withAlpha(0.6),
|
polygon: Cesium.Color.fromCssColorString('#ffff00').withAlpha(0.6),
|
};
|
this.$bus.$on('setChangeTwoMenu', (res) => {
|
this.menuChange(res);
|
});
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.menu_Box {
|
width: 100%;
|
height: 100%;
|
|
margin: 0;
|
padding: 0;
|
overflow-y: auto;
|
text-align: center;
|
display: flex;
|
flex-wrap: wrap;
|
align-content: flex-start;
|
.leftMen_div {
|
font-size: 16px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #ffffff;
|
padding: 10px;
|
min-width: 100px;
|
margin-left: 10px;
|
margin-top: 10px;
|
border-radius: 5px;
|
}
|
.leftMen_div:hover {
|
background: linear-gradient(180deg, #002992, #080472);
|
border: 1px solid #000000;
|
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.21);
|
}
|
.lefMenuDivActive {
|
background: linear-gradient(180deg, #002992, #080472);
|
}
|
.menuTwoImage {
|
width: 32px;
|
height: 32px;
|
display: inline-block;
|
}
|
|
.twoMenu_imge11 {
|
background: url('../../assets/img/synthesis/图层 32.png') no-repeat center;
|
}
|
.twoMenu_imge12 {
|
background: url('../../assets/img/synthesis/图层 35.png') no-repeat center;
|
}
|
.twoMenu_imge13 {
|
background: url('../../assets/img/synthesis/发布.png') no-repeat center;
|
}
|
//视图
|
.twoMenu_imge21 {
|
background: url('../../assets/img/synthesis/圆角矩形 12 拷贝 3.png')
|
no-repeat center;
|
}
|
.twoMenu_imge22 {
|
background: url('../../assets/img/synthesis/图层 10 拷贝.png') no-repeat
|
center;
|
}
|
.twoMenu_imge23 {
|
background: url('../../assets/img/synthesis/图层 11 拷贝.png') no-repeat
|
center;
|
}
|
.twoMenu_imge24 {
|
background: url('../../assets/img/synthesis/图层 12 拷贝 2.png') no-repeat
|
center;
|
}
|
.twoMenu_imge25 {
|
background: url('../../assets/img/synthesis/圆角矩形 5 拷贝 2.png')
|
no-repeat center;
|
}
|
.twoMenu_imge26 {
|
background: url('../../assets/img/synthesis/圆角矩形 5 拷贝 3.png')
|
no-repeat center;
|
}
|
.twoMenu_imge27 {
|
background: url('../../assets/img/synthesis/矩形 9.png') no-repeat center;
|
}
|
.twoMenu_imge28 {
|
background: url('../../assets/img/synthesis/椭圆 4.png') no-repeat center;
|
}
|
//漫游
|
.twoMenu_imge31 {
|
background: url('../../assets/img/synthesis/椭圆 6.png') no-repeat center;
|
}
|
.twoMenu_imge32 {
|
background: url('../../assets/img/synthesis/椭圆 7 拷贝 2.png') no-repeat
|
center;
|
}
|
.twoMenu_imge33 {
|
background: url('../../assets/img/synthesis/图层 14 副本 拷贝.png')
|
no-repeat center;
|
}
|
.twoMenu_imge34 {
|
background: url('../../assets/img/synthesis/图层 74 拷贝 2.png') no-repeat
|
center;
|
}
|
.twoMenu_imge35 {
|
background: url('../../assets/img/synthesis/椭圆 7 拷贝 4.png') no-repeat
|
center;
|
}
|
//分析
|
.twoMenu_imge41 {
|
background: url('../../assets/img/synthesis/椭圆 8 拷贝 8.png') no-repeat
|
center;
|
}
|
.twoMenu_imge42 {
|
background: url('../../assets/img/synthesis/圆角矩形 12 拷贝 5.png')
|
no-repeat center;
|
}
|
.twoMenu_imge43 {
|
background: url('../../assets/img/synthesis/圆角矩形 10 副本 3.png')
|
no-repeat center;
|
}
|
.twoMenu_imge44 {
|
background: url('../../assets/img/synthesis/图层 74 拷贝 3.png') no-repeat
|
center;
|
}
|
.twoMenu_imge45 {
|
background: url('../../assets/img/synthesis/图层 20.png') no-repeat center;
|
}
|
.twoMenu_imge46 {
|
background: url('../../assets/img/synthesis/图层 14 拷贝 3.png') no-repeat
|
center;
|
}
|
.twoMenu_imge47 {
|
background: url('../../assets/img/synthesis/图层 18.png') no-repeat center;
|
}
|
.twoMenu_imge48 {
|
background: url('../../assets/img/synthesis/圆角矩形 12 拷贝 6.png')
|
no-repeat center;
|
}
|
.twoMenu_imge49 {
|
background: url('../../assets/img/synthesis/管道.png') no-repeat center;
|
}
|
.twoMenu_imge410 {
|
background: url('../../assets/img/synthesis/dxkw.png') no-repeat center;
|
}
|
.twoMenu_imge411 {
|
background: url('../../assets/img/synthesis/矩形 14 拷贝 7.png') no-repeat
|
center;
|
}
|
//查询
|
.twoMenu_imge51 {
|
background: url('../../assets/img/synthesis/图层 23.png') no-repeat center;
|
}
|
.twoMenu_imge52 {
|
background: url('../../assets/img/synthesis/空间查询.png') no-repeat center;
|
}
|
//定位
|
.twoMenu_imge61 {
|
background: url('../../assets/img/synthesis/图层 27.png') no-repeat center;
|
}
|
.twoMenu_imge62 {
|
background: url('../../assets/img/synthesis/图层 28.png') no-repeat center;
|
}
|
//测量
|
.twoMenu_imge71 {
|
background: url('../../assets/img/synthesis/图层 31.png') no-repeat center;
|
}
|
.twoMenu_imge72 {
|
background: url('../../assets/img/synthesis/图层 31 拷贝.png') no-repeat
|
center;
|
}
|
.twoMenu_imge73 {
|
background: url('../../assets/img/synthesis/矩形 13 拷贝.png') no-repeat
|
center;
|
}
|
.twoMenu_imge74 {
|
background: url('../../assets/img/synthesis/图层 18 拷贝.png') no-repeat
|
center;
|
}
|
.twoMenu_imge75 {
|
background: url('../../assets/img/synthesis/M 拷贝.png') no-repeat center;
|
}
|
.twoMenu_imge76 {
|
background: url('../../assets/img/synthesis/空间测距.png') no-repeat center;
|
}
|
//标绘
|
.twoMenu_imge81 {
|
background: url('../../assets/img/synthesis/椭圆 5 拷贝 3.png') no-repeat
|
center;
|
}
|
.twoMenu_imge82 {
|
background: url('../../assets/img/synthesis/椭圆 3 拷贝 16.png') no-repeat
|
center;
|
}
|
.twoMenu_imge83 {
|
background: url('../../assets/img/synthesis/椭圆 3 拷贝 20.png') no-repeat
|
center;
|
}
|
.twoMenu_imge84 {
|
background: url('../../assets/img/synthesis/椭圆 3 拷贝 23.png') no-repeat
|
center;
|
}
|
.twoMenu_imge85 {
|
background: url('../../assets/img/synthesis/导入.png') no-repeat center;
|
}
|
.twoMenu_imge86 {
|
background: url('../../assets/img/synthesis/导出.png') no-repeat center;
|
}
|
.twoMenu_imge87 {
|
background: url('../../assets/img/synthesis/清除.png') no-repeat center;
|
}
|
}
|
</style>
|
