From 0f0d87ffbe149d47342d2bf5d5e9ae6ce130c901 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期四, 20 十月 2022 09:44:05 +0800
Subject: [PATCH] 综合展示
---
src/components/mapsdk.vue | 245 +++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 226 insertions(+), 19 deletions(-)
diff --git a/src/components/mapsdk.vue b/src/components/mapsdk.vue
index 9730a8c..3d51d8e 100644
--- a/src/components/mapsdk.vue
+++ b/src/components/mapsdk.vue
@@ -1,50 +1,230 @@
<template>
- <div id="mapdiv"></div>
+ <div id="mapdiv" class="mapdiv">
+ <div class="bufferBox" v-if="showBufferBoxDialog">
+ <el-card class="box-card">
+ <div slot="header" class="clearfix">
+ <span>缂撳啿鍖哄垎鏋�</span>
+ <div style="float: right; cursor: pointer">
+ <i class="el-icon-close" @click="closeBufferBox(1)"></i>
+ </div>
+ </div>
+ <div class="box-body">
+ <el-form ref="form" :model="bufFrom" label-width="100px">
+ <el-form-item label="缂撳啿鍗婂緞(绫�):">
+ <el-input v-model="bufFrom.val"></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button @click="addBuffer(1)" type="info">鐐�</el-button>
+ <el-button @click="addBuffer(2)" type="info">绾�</el-button>
+ <el-button @click="addBuffer(3)" type="info">闈�</el-button>
+ <el-button @click="clearBuffer" type="info">娓呴櫎</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+ </el-card>
+ </div>
+ <div class="coordLocalBox" v-if="showCoordLocalBoxDialog">
+ <el-card class="box-card">
+ <div slot="header" class="clearfix">
+ <span>鍧愭爣瀹氫綅</span>
+ <div style="float: right; cursor: pointer">
+ <i class="el-icon-close" @click="closeBufferBox(2)"></i>
+ </div>
+ </div>
+ <div class="box-body">
+ <el-form ref="form" :model="coordFrom" label-width="50px">
+ <el-form-item label="缁忓害:">
+ <el-input v-model="coordFrom.lon"></el-input>
+ </el-form-item>
+ <el-form-item label="绾害:">
+ <el-input v-model="coordFrom.lat"></el-input>
+ </el-form-item>
+ <el-form-item label="楂樺害:">
+ <el-input v-model="coordFrom.height"></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button @click="setCoordLocal" type="info">瀹氫綅</el-button>
+ </el-form-item>
+ </el-form>
+ </div>
+ </el-card>
+ </div>
+ </div>
</template>
<script>
export default {
name: '',
data() {
- return {};
+ return {
+ buffer: null,
+ showBufferBoxDialog: false,
+ showCoordLocalBoxDialog: false,
+ bufFrom: {
+ val: 50,
+ },
+ coordFrom: {
+ lon: 110,
+ lat: 32,
+ height: 8000000,
+ },
+ };
},
mounted() {
this.init3DMap();
+ this.$bus.$on('mapChangeBox', (res) => {
+ this.showChangeBox(res);
+ });
},
methods: {
init3DMap() {
+ //鍦板浘鍒濆鍖�
window.sgworld = new SmartEarth.SGWorld('mapdiv', {
- url: '/SmartEarthSDK/Workers/image/earth.jpg',
- licenseServer: 'http://192.168.20.39/LFServer',
+ licenseServer: window.sceneConfig.licenseServer,
});
- window.Viewer = sgworld._Viewer;
- sgworld.Navigate.Stop(); //鍙栨秷椋炶鐘舵��
+ window.Viewer = window.sgworld._Viewer;
+ //瀹氫綅
+ // sgworld.Navigate.jumpTo({
+ // //璺宠浆瑙嗚
+ // destination: new Cesium.Cartesian3.fromDegrees(110, 32, 8000000),
+ // });
sgworld.Navigate.jumpTo({
//璺宠浆瑙嗚
- destination: new Cesium.Cartesian3.fromDegrees(110, 32, 8000000),
+ destination: {
+ x: 311837.3471863137,
+ y: 5628280.936629815,
+ z: 2992581.921482893,
+ },
+ orientation: {
+ heading: 2.5028896264234364,
+ pitch: -0.2201285642360813,
+ roll: 0.0,
+ },
});
+ Viewer._enableInfoOrSelection = false;
//鏄剧ずfps
- sgworld._Viewer.scene.debugShowFramesPerSecond = false;
- //mpt娣诲姞
+ Viewer.scene.debugShowFramesPerSecond = false;
+ //瀵艰埅鎺т欢
+ window.sgworld.navControl('nav', false);
+ //姣斾緥灏�
+ window.sgworld.navControl('scale', false);
+
+ //褰卞儚瀵规瘮璁剧疆
+ var base = {
+ url: 'https://a.tile.openstreetmap.org/',
+ };
+ window.openStreetMap = sgworld.Creator.createImageryProvider(
+ 'OpenStreetMap',
+ 'OpenStreetMap',
+ base,
+ '0',
+ undefined,
+ true,
+ ''
+ );
+ openStreetMap.item.show = false;
+ //mpt鍔犺浇
var option = {
- url: 'http://183.162.245.49:82/SG/Elevation',
- layerName: 'zhufeng.397336.mpt',
+ url: window.sceneConfig.mpt.url,
+ layerName: window.sceneConfig.mpt.name,
requestVertexNormals: true,
};
- sgworld.Creator.sfsterrainprovider('', option, '', true, '');
- //瀵艰埅鎺т欢
- document.getElementById('distanceLegendDiv').style.display = 'none';
- //姣斾緥灏�
- sgworld.navControl('enableCompass', false);
- //sgworld.navControl("enableDistanceLegend", false);
- setTimeout(() => {}, 10000);
+ sgworld.Creator.sfsterrainprovider('mpt', option, '', true, '');
+ window.elevationTool = new SmartEarth.ElevationTool(window.sgworld);
+ //妯″瀷鍔犺浇
+ },
+ //鏄剧ず寮圭獥
+ showChangeBox(res) {
+ if (res.name == 'Query') {
+ if (res.id == '6') {
+ } else if (res.id == '7') {
+ } else {
+ this.showBufferBoxDialog = true;
+ }
+ } else if (res.name == 'Coord') {
+ if (res.id == '1') {
+ this.showCoordLocalBoxDialog = true;
+ }
+ }
+ },
+ closeBufferBox(res) {
+ switch (res) {
+ case 1:
+ this.showBufferBoxDialog = false;
+ this.clearBuffer();
+ break;
+ case 2:
+ this.showCoordLocalBoxDialog = false;
+ break;
+ }
+ },
+ //瀹氫綅
+ setCoordLocal() {
+ var lon = parseFloat(this.coordFrom.lon);
+ var lat = parseFloat(this.coordFrom.lat);
+ var height = parseFloat(this.coordFrom.height);
+ sgworld.Navigate.jumpTo({
+ //璺宠浆瑙嗚
+ destination: new Cesium.Cartesian3.fromDegrees(lon, lat, height),
+ });
+ },
+ //缂撳啿鍖哄垎鏋�
+ clearBuffer() {
+ if (this.buffer == null) return;
+ this.buffer && this.buffer.clearBuff();
+ this.buffer = null;
+ },
+ getBufferTable(type) {
+ const points =
+ this.buffer.this_buff.buff.polygon.hierarchy.getValue().positions;
+ let geometrys = '';
+ let firstPoint;
+ let degrees = '';
+ points.forEach((p, i) => {
+ degrees = window.sgworld.Core.toDegrees(p);
+ geometrys += '[' + degrees.lon + ',' + degrees.lat + '],';
+ i === 0 && (firstPoint = '[' + degrees.lon + ',' + degrees.lat + ']');
+ });
+ geometrys += firstPoint;
+ if (geometrys.length != 0) geometrys.trimEnd(',');
+ geometrys = '{rings:[[' + geometrys + ']]}';
+ },
+ addBuffer(res) {
+ this.clearBuffer();
+ var buffRadius = this.bufFrom.val;
+ switch (res) {
+ case 1:
+ this.buffer = sgworld.Analysis.DrawPointBuffer(
+ buffRadius,
+ (event) => {
+ this.getBufferTable('point');
+ }
+ );
+ break;
+ case 2:
+ this.buffer = sgworld.Analysis.DrawPolylineBuffer(
+ buffRadius,
+ (event) => {
+ this.getBufferTable('line');
+ }
+ );
+ break;
+ case 3:
+ this.buffer = sgworld.Analysis.DrawPolygonBuffer(
+ buffRadius,
+ (event) => {
+ this.getBufferTable('polygon');
+ }
+ );
+ break;
+ }
},
},
};
</script>
<style scoped>
-#mapdiv {
+.mapdiv {
width: 100%;
height: 100%;
overflow: hidden;
@@ -52,4 +232,31 @@
padding: 0;
position: relative;
}
+.bufferBox {
+ width: 412px;
+ height: 230px;
+ z-index: 40;
+ position: absolute;
+ right: 1%;
+ bottom: 1%;
+}
+.coordLocalBox {
+ width: 350px;
+ height: 370px;
+ z-index: 40;
+ position: absolute;
+ right: 1%;
+ bottom: 1%;
+}
+.box-card {
+ background-color: rgba(0, 0, 0, 0.6);
+ border: 1px solid rgba(32, 160, 255, 0.6);
+ color: white;
+}
+.box-body {
+ padding: 18px;
+}
+/deep/ .el-form-item__label {
+ color: white !important;
+}
</style>
--
Gitblit v1.9.3