From 6e0ef2d1f836680e6a55b7fc2d813b759038c144 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期二, 25 十月 2022 15:35:34 +0800
Subject: [PATCH] 路径规划，底图切换
---
src/components/mapsdk.vue | 377 +++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 361 insertions(+), 16 deletions(-)
diff --git a/src/components/mapsdk.vue b/src/components/mapsdk.vue
index 1b00353..b4ddd62 100644
--- a/src/components/mapsdk.vue
+++ b/src/components/mapsdk.vue
@@ -103,10 +103,58 @@
</div>
</el-card>
</div>
+ <div class="pathAnalysisBox" v-if="showPathAnalysisBoxDialog">
+ <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(4)"></i>
+ </div>
+ </div>
+ <div class="box-body">
+ <el-form ref="form" :model="pathFrom" label-width="50px">
+ <el-form-item label="缁忓害:">
+ <el-input style="width: 300px" v-model="pathFrom.lon"></el-input>
+ <el-link
+ :underline="false"
+ @click="showMouseLeftClick(1)"
+ style="margin-left: 10px"
+ ><i style="color: white" class="el-icon-plus"></i
+ ></el-link>
+ </el-form-item>
+ <el-form-item label="绾害:">
+ <el-input style="width: 300px" v-model="pathFrom.lat"></el-input>
+ <el-link
+ :underline="false"
+ @click="showMouseLeftClick(2)"
+ style="margin-left: 10px"
+ ><i style="color: white" class="el-icon-plus"></i
+ ></el-link>
+ </el-form-item>
+ <el-form-item>
+ <el-button @click="showMouseLeftClick(3)" type="info"
+ >鏌ヨ</el-button
+ >
+ </el-form-item>
+ </el-form>
+ </div>
+ </el-card>
+ </div>
+ <div
+ @click="changeMenulayer"
+ class="center CenDiv"
+ :class="{ center1: centerFlag }"
+ >
+ <div
+ id="cenBg"
+ v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
+ ></div>
+ </div>
</div>
</template>
<script>
+import $ from 'jquery';
import {
select_Comprehensive_ByPageAndCount,
select_Comprehensive_SelectWktById,
@@ -119,7 +167,12 @@
showBufferBoxDialog: false,
showCoordLocalBoxDialog: false,
showToponymicLocalBoxDialog: false,
+ showPathAnalysisBoxDialog: false,
comprehensive: {},
+ pathFrom: {
+ lon: '116.086746,39.937314',
+ lat: '116.086000,39.936289',
+ },
bufFrom: {
val: 50,
},
@@ -136,6 +189,13 @@
count: 0,
tableData: [],
imagePoint: null,
+ handler: null,
+ pathStart: null,
+ pathEnd: null,
+ pathData: null,
+
+ isActive: false,
+ isMenuLayer: true,
};
},
mounted() {
@@ -146,29 +206,70 @@
},
methods: {
init3DMap() {
+ var webKey = '94a34772eb88317fcbf8428e10448561';
+
//鍦板浘鍒濆鍖�
window.sgworld = new SmartEarth.SGWorld('mapdiv', {
licenseServer: window.sceneConfig.licenseServer,
});
+
window.Viewer = window.sgworld._Viewer;
+
//瀹氫綅
- // sgworld.Navigate.jumpTo({
- // //璺宠浆瑙嗚
- // destination: new Cesium.Cartesian3.fromDegrees(110, 32, 8000000),
- // });
sgworld.Navigate.jumpTo({
//璺宠浆瑙嗚
- destination: {
- x: 311837.3471863137,
- y: 5628280.936629815,
- z: 2992581.921482893,
- },
- orientation: {
- heading: 2.5028896264234364,
- pitch: -0.2201285642360813,
- roll: 0.0,
- },
+ destination: new Cesium.Cartesian3.fromDegrees(
+ 116.055913,
+ 39.937685,
+ 8000
+ ),
});
+ Viewer.imageryLayers.addImageryProvider(
+ new Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
+ layer: 'tdtVecBasicLayer',
+ style: 'default',
+ format: 'image/jpeg',
+ tileMatrixSetID: 'GoogleMapsCompatible',
+ show: false,
+ })
+ );
+
+ Viewer.imageryLayers.addImageryProvider(
+ new Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
+ layer: 'tdtBasicLayer',
+ style: 'default',
+ format: 'image/jpeg',
+ tileMatrixSetID: 'GoogleMapsCompatible',
+ show: false,
+ })
+ );
+ Viewer.imageryLayers.addImageryProvider(
+ new Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=94a34772eb88317fcbf8428e10448561',
+ layer: 'tdtAnnoLayer',
+ style: 'default',
+ format: 'image/jpeg',
+ tileMatrixSetID: 'GoogleMapsCompatible',
+ })
+ );
+
+ // sgworld.Navigate.jumpTo({
+ // //璺宠浆瑙嗚
+ // destination: {
+ // x: 311837.3471863137,
+ // y: 5628280.936629815,
+ // z: 2992581.921482893,
+ // },
+ // orientation: {
+ // heading: 2.5028896264234364,
+ // pitch: -0.2201285642360813,
+ // roll: 0.0,
+ // },
+ // });
+
+ // Viewer.scene.globe.depthTestAgainstTerrain = true;
Viewer._enableInfoOrSelection = false;
//鏄剧ずfps
Viewer.scene.debugShowFramesPerSecond = false;
@@ -197,9 +298,23 @@
layerName: window.sceneConfig.mpt.name,
requestVertexNormals: true,
};
- sgworld.Creator.sfsterrainprovider('mpt', option, '', true, '');
+ // sgworld.Creator.sfsterrainprovider('mpt', option, '', true, '');
window.elevationTool = new SmartEarth.ElevationTool(window.sgworld);
- //妯″瀷鍔犺浇
+ },
+
+ changeMenulayer() {
+ this.isActive = !this.isActive;
+ this.isMenuLayer = !this.isMenuLayer;
+ this.setLayerVisible();
+ },
+ setLayerVisible() {
+ if (this.isActive == true) {
+ Viewer.imageryLayers.get(1).show = true;
+ Viewer.imageryLayers.get(2).show = false;
+ } else {
+ Viewer.imageryLayers.get(1).show = false;
+ Viewer.imageryLayers.get(2).show = true;
+ }
},
//鏄剧ず寮圭獥
showChangeBox(res) {
@@ -215,6 +330,10 @@
} else if (res.id == '2') {
this.showToponymicLocalBoxDialog = true;
this.getToponymicData();
+ }
+ } else if (res.name == 'Analysis') {
+ if (res.id == '3') {
+ this.showPathAnalysisBoxDialog = true;
}
}
},
@@ -292,6 +411,11 @@
this.imagePoint = null;
}
break;
+ case 4:
+ this.showPathAnalysisBoxDialog = false;
+ this.clearPathAll(3);
+
+ break;
}
},
//瀹氫綅
@@ -355,6 +479,168 @@
break;
}
},
+ showMouseLeftClick(res) {
+ if (res == 3) {
+ if (this.linePath != null) {
+ this.clearPathAll(3);
+ }
+
+ var jsonurl =
+ 'http://192.168.20.39:9055/gisserver/wnsserver/beijingdaohang_wns?start=' +
+ this.pathFrom.lon +
+ '&end=' +
+ this.pathFrom.lat +
+ '&propertyName=Shape&tolerance=500&request=FindPath&format=json';
+ $.ajax({
+ url: jsonurl,
+ async: false,
+ type: 'GET',
+ dataType: 'json',
+ contentType: 'application/json;charset=utf-8',
+ success: (data) => {
+ this.executeFly3D(data);
+ },
+ });
+ } else {
+ var that = this;
+ if (this.handler != null) {
+ this.clearLeftClick();
+ }
+ this.handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
+ this.handler.setInputAction(function (event) {
+ let cartesian = Viewer.camera.pickEllipsoid(event.position);
+ let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+ let lng = parseFloat(
+ Cesium.Math.toDegrees(cartographic.longitude)
+ ).toFixed(6); // 缁忓害
+ let lat = parseFloat(
+ Cesium.Math.toDegrees(cartographic.latitude)
+ ).toFixed(6); // 绾害
+ if (that.linePath != null) {
+ that.clearPathAll(3);
+ }
+ if (lng != null && lat != null) {
+ let val = lng + ',' + lat;
+ var position = sgworld.Creator.CreatePosition(lng, lat, 0);
+ if (res == 1) {
+ if (that.pathStart != null) {
+ that.clearPathAll(1);
+ }
+
+ that.pathStart = sgworld.Creator.CreateLabel(
+ position,
+ '',
+ SmartEarthRootUrl + 'Workers/image/start.png',
+ {
+ // 鏂囨湰鍋忕Щ閲�
+ pixelOffset: {
+ x: 0,
+ y: -50,
+ }, // 鏃犺閬尅
+ disableDepthTestDistance: Infinity,
+ scale: 0.8,
+ },
+ 0,
+ '璧峰鐐�'
+ );
+
+ that.pathFrom.lon = val;
+ } else if (res == 2) {
+ if (that.pathEnd != null) {
+ that.clearPathAll(2);
+ }
+
+ that.pathEnd = sgworld.Creator.CreateLabel(
+ position,
+ '',
+ SmartEarthRootUrl + 'Workers/image/end.png',
+ {
+ // 鏂囨湰鍋忕Щ閲�
+ pixelOffset: {
+ x: 0,
+ y: -50,
+ }, // 鏃犺閬尅
+ disableDepthTestDistance: Infinity,
+ scale: 0.8,
+ },
+ 0,
+ '缁撴潫鐐�'
+ );
+ that.pathFrom.lat = val;
+ }
+ that.clearLeftClick();
+ }
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+ }
+ },
+ clearPathAll(res) {
+ switch (res) {
+ case 1:
+ if (this.pathStart != null) {
+ sgworld.Creator.DeleteObject(this.pathStart);
+ this.pathStart = null;
+ }
+ break;
+ case 2:
+ if (this.pathEnd != null) {
+ sgworld.Creator.DeleteObject(this.pathEnd);
+ this.pathEnd = null;
+ }
+ break;
+ case 3:
+ if (this.pathStart != null) {
+ sgworld.Creator.DeleteObject(this.pathStart);
+ this.pathStart = null;
+ }
+
+ if (this.pathEnd != null) {
+ sgworld.Creator.DeleteObject(this.pathEnd);
+ this.pathEnd = null;
+ }
+ if (this.linePath != null) {
+ sgworld.Creator.DeleteObject(this.linePath);
+ this.linePath = null;
+ }
+ break;
+ case 4:
+ if (this.linePath != null) {
+ sgworld.Creator.DeleteObject(this.linePath);
+ this.linePath = null;
+ }
+ break;
+ }
+ },
+ clearLeftClick() {
+ this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); //绉婚櫎浜嬩欢
+ this.handler = null;
+ },
+ executeFly3D(res) {
+ var position = [];
+ if (res) {
+ var positionA = res.features;
+ if (positionA.length > 0) {
+ for (var i = 0; i < positionA.length; i++) {
+ var val = positionA[i];
+ if (val.geometry.type == 'LineString') {
+ var val_data = val.geometry.coordinates;
+ for (var j = 0; j < val_data.length; j++) {
+ position.push({ x: val_data[j][0], y: val_data[j][1] });
+ }
+ }
+ }
+ this.linePath = sgworld.Creator.createPolyline(
+ position,
+ '#ffff00',
+ 1,
+ 0,
+ '绾�'
+ );
+ sgworld.Navigate.flyToObj(this.linePath);
+ } else {
+ return;
+ }
+ }
+ },
},
};
</script>
@@ -371,6 +657,15 @@
.bufferBox {
width: 412px;
height: 230px;
+ z-index: 40;
+ position: absolute;
+ right: 1%;
+ bottom: 1%;
+}
+
+.pathAnalysisBox {
+ width: 412px;
+
z-index: 40;
position: absolute;
right: 1%;
@@ -445,4 +740,54 @@
::v-deep .el-pagination__jump {
color: white;
}
+.center {
+ left: 1%;
+}
+.CenDiv {
+ position: absolute;
+ bottom: 1%;
+ height: 40px;
+ width: 60px;
+ z-index: 101;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ box-shadow: 3px 3px 6px #666;
+ border: 1px solid rgba(204, 204, 204, 0.76);
+ border-radius: 5px;
+ cursor: pointer;
+}
+.center1 {
+ right: 1%;
+}
+.right {
+ position: absolute;
+ top: 50px;
+ right: 0;
+ width: 20%;
+ height: calc(100% - 50px);
+
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+.CenDiv:hover {
+ border: 1px solid #409eff;
+}
+.active {
+ width: 100%;
+ height: 100%;
+ background: url('../assets/img/Layer/imgLayer2.png') no-repeat center;
+ position: absolute;
+ background-size: 100% 100%;
+ border-radius: 5px;
+}
+.menuLayer {
+ width: 100%;
+ height: 100%;
+ background: url('../assets/img/Layer/imgLayer1.png') no-repeat center;
+ position: absolute;
+ background-size: 100% 100%;
+ border-radius: 5px;
+}
</style>
--
Gitblit v1.9.3