<template>
|
<div class="menu_Box box_div">
|
<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" />
|
<queryinfo ref="queryinfo" />
|
<input
|
type="file"
|
accept=".kml"
|
class="file"
|
style="display: none"
|
/>
|
<input
|
:accept="'.shp, .shx, .dbf, .prj'"
|
style="display: none"
|
ref="pathClear"
|
type="file"
|
name="file"
|
id="shpFile"
|
multiple="multiple"
|
@change="handleOpenShp()"
|
/>
|
</div>
|
</template>
|
|
<script>
|
|
import { transform } from 'ol/proj';
|
import mapinfo from '../Tools/mapinfo.vue';
|
import maplayer from '../Tools/maplayer.vue';
|
import queryinfo from '../Tools/queryinfo.vue';
|
import $ from 'jquery'
|
import { getToken } from '@/utils/auth';
|
import {
|
OverviewMap,
|
defaults as defaultControls,
|
FullScreen,
|
ScaleLine,
|
Rotate,
|
|
} from "ol/control.js"
|
import * as turf from '@turf/turf';
|
import { geometry } from '@turf/turf';
|
|
export default {
|
components: { mapinfo, maplayer, queryinfo },
|
data() {
|
return {
|
showTwoMenuFlag: false,
|
setListTwoMenu: [],
|
setListTwoMenuAll: [
|
[
|
{
|
id: 'a1',
|
label: 'synthesis.layer',
|
name: '图层管理',
|
css: 'twoMenu_imge11',
|
},
|
|
],
|
[
|
{
|
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: 'b9',
|
label: 'synthesis.undergroundMode',
|
name: '地下模式',
|
css: 'twoMenu_imge29',
|
},
|
],
|
[
|
{
|
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: '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: "d12",
|
label: "synthesis.visibilityAnalysis",
|
name: "通视分析",
|
css: "twoMenu_imge412",
|
},
|
{
|
id: "d13",
|
label: "synthesis.viewAnalysis",
|
name: "视域分析",
|
css: "twoMenu_imge413",
|
},
|
{
|
id: "d14",
|
label: "synthesis.circularViewAnalysis",
|
name: "圆形视域分析",
|
css: "twoMenu_imge414",
|
},
|
|
|
],
|
[
|
{
|
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: "j7",
|
label: "synthesis.synthobj.m9",
|
name: "高程量测",
|
css: "twoMenu_imge77",
|
},
|
],
|
[
|
{
|
id: 'h1',
|
label: 'synthesis.point',
|
name: '点',
|
css: 'twoMenu_imge81',
|
},
|
{
|
id: 'h8',
|
label: 'synthesis.addlabel',
|
name: '文字',
|
css: 'twoMenu_imge88',
|
},
|
{
|
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: '导入KML',
|
css: 'twoMenu_imge85',
|
},
|
{
|
id: 'h6',
|
label: 'synthesis.export',
|
name: '导出KML',
|
css: 'twoMenu_imge86',
|
},
|
|
{
|
id: 'h9',
|
label: 'synthesis.import1',
|
name: '导入SHP',
|
css: 'twoMenu_imge85',
|
},
|
{
|
id: 'h10',
|
label: 'synthesis.export1',
|
name: '导出SHP',
|
css: 'twoMenu_imge86',
|
},
|
|
|
{
|
id: 'h7',
|
label: 'synthesis.removepaint',
|
name: '清除',
|
css: 'twoMenu_imge87',
|
},
|
], [
|
{
|
id: 'i1',
|
name: '场景提取',
|
label: 'synthesis.sceneExtraction',
|
css: 'twoMenu_imge12',
|
},
|
{
|
id: 'i2',
|
label: 'synthesis.release',
|
name: '场景发布',
|
css: 'twoMenu_imge13',
|
}, {
|
id: 'i3',
|
label: 'synthesis.tdisplay',
|
name: '三维演示',
|
css: 'twoMenu_imge35',
|
},
|
]
|
],
|
isRuler: false,
|
isNaviget: false,
|
isolineFlag: false,
|
isslopeFlag: false,
|
isContrastFlag: false,
|
UndergroundMode: false,
|
scaleLine: null,
|
Excavation: false,
|
entityaLayers: [],
|
isMenuFlag: null,
|
};
|
},
|
methods: {
|
//二級菜单点击切换
|
setChangeTwoMenu(res) {
|
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;
|
}
|
sgworld.Analysis.clearCurtainContrast();
|
if (this.isMenuFlag == "d") {
|
this.clearAllAnalsy();
|
}
|
if (this.isMenuFlag !=val) {
|
sgworld.Creator.SimpleGraphic.clear();
|
this.isMenuFlag = val;
|
if (this.entityaLayers.length != 0) {
|
for (var i in this.entityaLayers) {
|
sgworld.Viewer.entities.remove(this.entityaLayers[i]);
|
}
|
this.entityaLayers = [];
|
}
|
for (var i in this.$store.state.queryInfo) {
|
sgworld.Viewer.entities.remove(this.$store.state.queryInfo[i]);
|
}
|
this.$store.state.queryInfo = [];
|
if (this.$store.state.primitLayer != null) {
|
sgworld.Viewer.entities.remove(this.$store.state.primitLayer);
|
sgworld.Creator.DeleteObject(this.$store.state.primitLayer);
|
this.$store.state.primitLayer = null;
|
}
|
}
|
this.showTwoMenuFlag = res.id;
|
|
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 'h9':
|
// this.handleOpenShp();
|
$("#shpFile").click();
|
break;
|
case 'h10':
|
this.handleSaveShp();
|
break;
|
case 'h7':
|
sgworld.Creator.SimpleGraphic.clear();
|
for (var i in this.entityaLayers) {
|
sgworld.Viewer.entities.remove(this.entityaLayers[i]);
|
}
|
this.entityaLayers = [];
|
break;
|
case 'h8':
|
sgworld.Creator.createSimpleGraphic('label', {}, function (entity) {
|
|
});
|
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实体');
|
}
|
},
|
handleSaveShp() {
|
|
var entities = sgworld.Viewer.entities.values;
|
if (entities.length == 0) {
|
return;
|
}
|
var std = [];
|
for (var i in entities) {
|
var type, fillColor, alpha, wkt, name;
|
var bak = {}
|
|
if (entities[i].name) {
|
|
name = entities[i].name
|
}
|
if (entities[i].properties) {
|
|
var properties = entities[i].properties.propertyNames;
|
for (var j in properties) {
|
bak[properties[j]] = entities[i].properties[properties[j]]._value;
|
}
|
} else {
|
bak = {
|
"name": entities[i].name
|
}
|
}
|
if (entities[i].rectangle) {//矩形
|
type = 'rectangle'
|
var east = Cesium.Math.toDegrees(entities[i].rectangle.coordinates.getValue().east);
|
var north = Cesium.Math.toDegrees(entities[i].rectangle.coordinates.getValue().north);
|
var west = Cesium.Math.toDegrees(entities[i].rectangle.coordinates.getValue().west);
|
var south = Cesium.Math.toDegrees(entities[i].rectangle.coordinates.getValue().south);
|
var line = turf.polygon([[[east, north], [west, north], [west, south], [east, south], [east, north]]])
|
wkt = this.$wkt.convert(line.geometry)
|
var fill = entities[i].rectangle._material._color._value;
|
fillColor = fill.red + ',' + fill.green + ',' + fill.blue;
|
alpha = fill.alpha;
|
} else if (entities[i].point) {//点
|
type = 'point'
|
let ellipsoid = Viewer.scene.globe.ellipsoid;
|
let cartographic = ellipsoid.cartesianToCartographic(entities[i].position.getValue());
|
let lat = Cesium.Math.toDegrees(cartographic.latitude);
|
let lng = Cesium.Math.toDegrees(cartographic.longitude);
|
let alt = cartographic.height;
|
let point = turf.point([lng, lat, alt])
|
wkt = this.$wkt.convert(point.geometry)
|
var fill = entities[i].point._color._value;
|
fillColor = fill.red + ',' + fill.green + ',' + fill.blue;
|
alpha = fill.alpha;
|
|
|
} else if (entities[i].polygon) {
|
type = 'polygon';
|
var fill = entities[i].polygon._material._color._value;
|
fillColor = fill.red + ',' + fill.green + ',' + fill.blue;
|
alpha = fill.alpha;
|
var geometry = entities[i].polygon.hierarchy.getValue().positions;
|
var coordinates = [];
|
for (var k in geometry) {
|
coordinates.push(this.setCartesianToEightFour(geometry[k]))
|
}
|
if (coordinates[0] != coordinates[1]) {
|
coordinates.push(coordinates[0])
|
}
|
var polygon = turf.polygon([coordinates])
|
wkt = this.$wkt.convert(polygon.geometry)
|
} else if (entities[i].polyline) {
|
type = "polyline";
|
var coordinates = [];
|
var geometry = entities[i].polyline.positions.getValue();
|
for (var k in geometry) {
|
coordinates.push(this.setCartesianToEightFour(geometry[k]))
|
}
|
var polyline = turf.lineString(coordinates)
|
wkt = this.$wkt.convert(polyline.geometry)
|
|
var fill = entities[i].polyline._material._color._value;
|
fillColor = fill.red + ',' + fill.green + ',' + fill.blue;
|
alpha = fill.alpha;
|
} else if (entities[i].label) {
|
type = "label";
|
let ellipsoid = Viewer.scene.globe.ellipsoid;
|
let cartographic = ellipsoid.cartesianToCartographic(entities[i].position.getValue());
|
let lat = Cesium.Math.toDegrees(cartographic.latitude);
|
let lng = Cesium.Math.toDegrees(cartographic.longitude);
|
let alt = cartographic.height;
|
let point = turf.point([lng, lat, alt])
|
wkt = this.$wkt.convert(point.geometry)
|
var fill = entities[i].label.backgroundColor._value;
|
fillColor = fill.red + ',' + fill.green + ',' + fill.blue;
|
alpha = fill.alpha;
|
}
|
std.push({
|
id: parseInt(i) + 1,
|
type: type,
|
fillColor: fillColor,
|
opacity: alpha,
|
name: name,
|
bak: JSON.stringify(bak),
|
wkt: wkt
|
})
|
}
|
$.ajax({
|
url: BASE_URL + "/comprehensive/downloadShp?token=" + getToken(),
|
type: "POST",
|
data: JSON.stringify(std),
|
dataType: 'json', // html、json、jsonp、script、text
|
contentType: "application/json", // "application/x-www-form-urlencoded"
|
success: (rs) => {
|
if (rs && rs.code == 200) {
|
var a = document.createElement('a'); // 创建一个a标签元素
|
a.style.display = 'none'; // 设置元素不可见
|
|
a.href = BASE_URL + "/comprehensive/downloadFile?token=" + getToken() + "&guid=" + rs.result;
|
|
document.body.appendChild(a); // 加入
|
a.click(); // 触发点击,下载
|
document.body.removeChild(a); // 释放
|
}
|
},
|
error: function (e) {
|
}
|
});
|
|
},
|
handleOpenShp() {
|
var formData = new FormData();
|
var fs = document.getElementById("shpFile");
|
var exts = [".shp", ".shx", ".dbf", ".prj"];
|
var count = 0;
|
for (var i = 0, c = fs.files.length; i < c; i++) {
|
var name = fs.files[i].name.toLocaleLowerCase();
|
var ext = name.substring(name.lastIndexOf("."));
|
if (exts.indexOf(ext) > -1) {
|
count++;
|
formData.append(fs.files[i].name, fs.files[i]); // fs.files[i].name,file
|
}
|
}
|
if (count != 4) {
|
alert("ShapeFile文件选择不全！");
|
return;
|
}
|
var that = this;
|
$.ajax(BASE_URL + "/comprehensive/uploadShp?token=" + getToken(), {
|
type: "post",
|
data: formData,
|
async: true,
|
cache: false,
|
processData: false,
|
contentType: false,
|
success: function (rs) {
|
|
if (rs.code == 200) {
|
that.showShpEntity(rs.result);
|
}
|
},
|
error: function (e) {
|
console.error(e);
|
}
|
});
|
|
document.getElementById("shpFile").value = ""
|
|
},
|
showShpEntity(res) {
|
|
for (var i in res) {
|
var wkt = this.$wkt.parse(res[i].wkt);
|
var fillColor = res[i].fillColor.split(",");
|
var color = new Cesium.Color(parseFloat(fillColor[0]), parseFloat(fillColor[1]), parseFloat(fillColor[2]), res[i].opacity);
|
var name = res[i].name
|
switch (res[i].type) {
|
case 'rectangle':
|
case 'polygon':
|
|
var std = [];
|
var geo = wkt.coordinates[0];
|
for (var i in geo) {
|
std.push(geo[i][0])
|
std.push(geo[i][1])
|
}
|
var entity = Viewer.entities.add({
|
name: name,
|
polygon: {
|
hierarchy: Cesium.Cartesian3.fromDegreesArray(std),
|
//height : 100000,
|
material: color,
|
outline: true,
|
outlineColor: color,
|
}
|
})
|
this.entityaLayers.push(entity)
|
break;
|
case 'point':
|
let point = Viewer.entities.add({
|
name: name,
|
position: Cesium.Cartesian3.fromDegrees(wkt.coordinates[0], wkt.coordinates[1]), //经纬度转世界坐标
|
point: {
|
show: true,
|
color: color,
|
pixelSize: 10,
|
outlineColor: color,
|
outlineWidth: 3,
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
},
|
});
|
|
this.entityaLayers.push(point)
|
break;
|
case 'polyline':
|
var std = [];
|
var geo = wkt.coordinates;
|
for (var i in geo) {
|
std.push(geo[i][0])
|
std.push(geo[i][1])
|
}
|
let line = Viewer.entities.add({
|
name: name,
|
polyline: {
|
//经纬度数组转世界坐标，带高度的话是fromDegreesArrayHeights
|
positions: Cesium.Cartesian3.fromDegreesArray(std),
|
width: 10,
|
material: color,
|
clampToGround: true,
|
}
|
})
|
|
this.entityaLayers.push(line)
|
break;
|
case 'label':
|
debugger
|
const label = Viewer.entities.add({
|
position: Cesium.Cartesian3.fromDegrees(wkt.coordinates[0], wkt.coordinates[1]),
|
label: {
|
text: name,
|
fillColor: color,
|
font: '28px',
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.TOP,
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
},
|
})
|
this.entityaLayers.push(label)
|
break;
|
}
|
}
|
},
|
|
setCartesianToEightFour(res) {
|
var std = [];
|
let ellipsoid = Viewer.scene.globe.ellipsoid;
|
let cartographic = ellipsoid.cartesianToCartographic(res);
|
let lat = Cesium.Math.toDegrees(cartographic.latitude);
|
let lng = Cesium.Math.toDegrees(cartographic.longitude);
|
let alt = cartographic.height;
|
std = [lng, lat, alt]
|
return std;
|
},
|
handleOpenClick() {
|
var that = this;
|
sgworld.Creator.SimpleGraphic.edit(true, { editProp: true });
|
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 = () => {
|
var kmlOptions = {
|
camera: sgworld.Viewer.scene.camera,
|
canvas: sgworld.Viewer.scene.canvas,
|
clampToGround: true,
|
};
|
var geocachePromise = Cesium.KmlDataSource.load(
|
fileReader.result,
|
kmlOptions
|
);
|
|
geocachePromise.then(function (dataSource) {
|
var geocacheEntities = dataSource.entities.values;
|
that.entityaLayers = geocacheEntities;
|
for (var i = 0; i < geocacheEntities.length; i++) {
|
var entity = geocacheEntities[i];
|
|
sgworld.Viewer.entities.add(entity);
|
}
|
});
|
// 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();
|
},
|
setLayerScene() {
|
|
var URL = window.location.href.split("#");
|
this.openwindow({ url: URL[0] + 'LfSKyline/index.html' });
|
},
|
|
openwindow(data) {
|
var url = data.url; //转向网页的地址;
|
var name = data.title || '选择要添加的页面'; //网页名称，可为空;
|
var iWidth = window.screen.width; //弹出窗口的宽度;
|
var iHeight = window.screen.height; //弹出窗口的高度;
|
var iTop = 0 //获得窗口的垂直位置;
|
var iLeft = 0; //获得窗口的水平位置;
|
window.open(url, name, 'height=' + iHeight + ',,innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no');
|
},
|
|
|
|
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(0, 3, 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;
|
case "j7":
|
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
|
}
|
},
|
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;
|
}
|
},
|
clearAllAnalsy() {
|
// switch (this.showTwoMenuFlag) {
|
// case 'd1':
|
// that.isolineFlag = false;
|
// elevationTool.tf = that.isolineFlag;
|
// elevationTool.render();
|
// break;
|
// case 'd2':
|
// that.isslopeFlag = false;
|
// elevationTool.type = 'none';
|
// elevationTool.render();
|
// break;
|
// }
|
},
|
|
|
|
setAnalsy(res) {
|
//this.$refs && this.$refs.queryinfo && this.$refs.queryinfo.close("queryinfo");
|
var that = this;
|
switch (res) {
|
case 'd1':
|
that.isolineFlag = !that.isolineFlag;
|
elevationTool.tf = that.isolineFlag;
|
elevationTool.render();
|
break;
|
case 'd2':
|
that.isslopeFlag = !that.isslopeFlag;
|
window.PDelevationTool= new SmartEarth.ElevationTool(sgworld);//全局变量
|
if (that.isslopeFlag == true) {
|
PDelevationTool.type = 'slope';
|
PDelevationTool.tf = this.checked;
|
} else {
|
PDelevationTool.type = 'none';
|
}
|
PDelevationTool.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 'd9':
|
this.$refs && this.$refs.queryinfo && this.$refs.queryinfo.close("queryinfo");
|
this.$store.state.mapPopBoxFlag = '3';
|
|
this.$refs && this.$refs.queryinfo && this.$refs.queryinfo.open("管道空间分析", null, {
|
close: () => {
|
if (this.$store.state.pipelineEntity.length != 0) {
|
for (var i in this.$store.state.pipelineEntity) {
|
var item = this.$store.state.pipelineEntity[i]
|
sgworld.Viewer.entities.remove(item);
|
}
|
}
|
}
|
});
|
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.DXTerrainFlattening!=null){
|
DXTerrainFlattening.remove();
|
}
|
sgworld.Creator.createSimpleGraphic(
|
'polygon',
|
{
|
clampToGround: true,
|
},
|
function (entity) {
|
let positions = entity.polygon.hierarchy.getValue().positions;
|
console.log(positions);
|
sgworld.Creator.SimpleGraphic.remove(entity.id);
|
|
window.DXTerrainFlattening = 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;
|
|
case "d12":
|
if (window.TSExcavation!=null) {
|
window.TSExcavation.deleteObject()
|
window.TSExcavation = null
|
} else {
|
window.TSExcavation = sgworld.Analysis.createSightLine({
|
type: "default",
|
})
|
}
|
break
|
case "d13":
|
if (this.Excavation) {
|
this.Excavation.destroy()
|
this.Excavation = null
|
} else {
|
this.Excavation = sgworld.Analysis.create3DViewshedPoss({
|
height: 1.8,
|
})
|
}
|
break
|
case "d14":
|
if (window.Excavation) {
|
window.Excavation.close()
|
window.Excavation = null
|
} else {
|
var SYFX_visible_color = { r: 0.0, g: 1.0, b: 0.0 },
|
SYFX_notVisible_color = { r: 1.0, g: 0.0, b: 0.0 }
|
window.Excavation = sgworld.Analysis.create3DViewshed({
|
name: "Viewshed On Frederick",
|
height: 1.8,
|
color: {
|
Back: SYFX_notVisible_color,
|
Fore: SYFX_visible_color,
|
},
|
isSpherical: "spherical",
|
})
|
}
|
|
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) {
|
var url = window.location.href;
|
var testurl = '';
|
if (url.indexOf('web') != -1) {
|
testurl = '/web';
|
}
|
window.AnalysisDXPM.analyseData = Distance;
|
this.dxpmIndex = layer.open({
|
type: 2,
|
title: '分析结果',
|
shade: false,
|
area: ['80%', '280px'],
|
offset: 'b',
|
skin: 'other-class',
|
content: testurl + '/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);
|
if (this.isRuler == true) {
|
this.scaleLine = new ScaleLine({
|
units: "metric"
|
});
|
window.map.addControl(this.scaleLine);
|
} else {
|
|
window.map.removeControl(this.scaleLine);
|
this.scaleLine = false;
|
}
|
break;
|
case 'b8': //指北针
|
this.isNaviget = !this.isNaviget;
|
window.sgworld.navControl('nav', this.isNaviget);
|
this.$store.state.isNaviget = this.isNaviget
|
break;
|
case 'b9': //地下模式
|
this.UndergroundMode = !this.UndergroundMode;
|
window.sgworld.Analysis.UndergroundMode(this.UndergroundMode, 0.3)
|
break;
|
}
|
},
|
setCoverage(res) {
|
switch (res) {
|
case 'a1':
|
if (this.$store.state.layerMnage == false) {
|
this.$refs && this.$refs.maplayer && this.$refs.maplayer.closeAll();
|
this.$refs && this.$refs.maplayer && this.$refs.maplayer.open();
|
this.$store.state.layerMnage = true;
|
} else if (this.$store.state.layerMnage == true) {
|
this.$refs && this.$refs.maplayer && this.$refs.maplayer.closeAll();
|
this.$store.state.layerMnage = false;
|
}
|
|
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) => {
|
|
if (res == 8) { this.setLayerScene(); } else {
|
this.menuChange(res);
|
}
|
|
});
|
|
this.$store.state.showAllLayers = true;
|
this.$store.state.layerMnage = false;
|
this.$store.state.treeData = null;
|
this.$store.state.checkedKeys = [];
|
this.setCoverage('a1');
|
},
|
};
|
</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;
|
border: 1px solid rgba(0, 0, 0, 0);
|
padding: 10px;
|
min-width: 100px;
|
margin-left: 10px;
|
margin-top: 10px;
|
border-radius: 5px;
|
}
|
.leftMen_div:hover {
|
background: rgba(64, 158, 255, 0.4);
|
border: 1px solid #409eff;
|
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
|
border-radius: 5px;
|
}
|
.lefMenuDivActive {
|
background: rgba(64, 158, 255, 0.4);
|
border: 1px solid #409eff;
|
}
|
.menuTwoImage {
|
width: 40px;
|
height: 40px;
|
display: inline-block;
|
}
|
}
|
</style>
|
