From 2a3bfbc64a74f3afaeced0756fcb2e4f60b94a24 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Wed, 12 Oct 2022 17:43:25 +0800
Subject: [PATCH] 首页布局调整
---
src/pcviews/homee/Map/index.vue | 287 +++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 277 insertions(+), 10 deletions(-)
diff --git a/src/pcviews/homee/Map/index.vue b/src/pcviews/homee/Map/index.vue
index c334000..19e407a 100644
--- a/src/pcviews/homee/Map/index.vue
+++ b/src/pcviews/homee/Map/index.vue
@@ -1,21 +1,288 @@
<template>
- <div class="container"></div>
+ <div id="viewer-container" style="width:100%;height:100%">
+ <div class="mapBtnList">
+ <div class="btn1 mapBtn" @click.stop="fullImg">全图</div>
+ <div class="btn2 mapBtn" @click.stop="ranging">距离</div>
+ <div class="btn3 mapBtn" @click.stop="area">面积</div>
+ <div class="btn4 mapBtn" @click.stop="ranging">全景</div>
+ <div class="btn5 mapBtn" @click.stop="clear">清除</div>
+ </div>
+ </div>
</template>
<script>
-export default {
+import {
+ getSceneList
+} from '@/api/pc/leftNav/index'
+const sceneLayer = null
+let baseLayer = []
+
+let tilesetLayer, tileset
+
+import baseLayerImgUrl from '@/assets/baseUrl'
+
+export default {
+ mounted () {
+ const that = this
+ function initViewer () {
+ global.viewer = new DC.Viewer('viewer-container')
+
+ // 天地图 影像
+ global.viewer.imageryLayers.addImageryProvider(
+ new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ url: 'https://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=789e558be762ff832392a0393fd8a4f1',
+ subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+ format: 'image/jpeg',
+ show: true,
+ maximumLevel: 18
+ })
+ )
+ global.viewer.camera.setView({
+ // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
+ // fromDegrees()方法，将经纬度和高程转换为世界坐标
+ destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
+ 116.027429, 28.681978, 800
+ ),
+ orientation: {
+ // 指向
+ heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
+ // that.addBaseLayer()
+
+ global.viewer.use(new global.DC.Measure())
+
+ that.addMxTileset()
+ }
+
+ global.DC.ready(initViewer)
+ },
+
+ methods: {
+
+ addMxTileset () {
+ const that = this
+ tilesetLayer = new global.DC.TilesetLayer('tilesetLayer')
+ global.viewer.addLayer(tilesetLayer)
+ tileset = new global.DC.Tileset('/zhxy/mx/tileset.json', {
+ luminanceAtZenith: 0.4,
+ // cullWithChildrenBounds: false,
+ // cullRequestsWhileMoving: false,
+ // skipLevelOfDetail: false,
+ shadows: global.DC.Namespace.Cesium.ShadowMode.DISABLED
+ })
+ tileset.setHeight(5)
+ tilesetLayer.addOverlay(tileset)
+ global.viewer.flyTo(tileset)
+ // tileset.on(global.DC.MouseEventType.CLICK, that.tilesetClick)
+ },
+
+ getViewExtend () {
+ const params = {}
+ const extend = global.viewer.camera.computeViewRectangle()
+ if (typeof extend === 'undefined') {
+ // 2D下会可能拾取不到坐标，extend返回undefined,所以做以下转换
+ const canvas = global.viewer.scene.canvas
+ const upperLeft = new global.DC.Namespace.Cesium.Cartesian2(0, 0)// canvas左上角坐标转2d坐标
+ const lowerRight = new global.DC.Namespace.Cesium.Cartesian2(
+ canvas.clientWidth,
+ canvas.clientHeight
+ )// canvas右下角坐标转2d坐标
+
+ const ellipsoid = global.viewer.scene.globe.ellipsoid
+ const upperLeft3 = global.viewer.camera.pickEllipsoid(
+ upperLeft,
+ ellipsoid
+ )// 2D转3D世界坐标
+
+ const lowerRight3 = global.viewer.camera.pickEllipsoid(
+ lowerRight,
+ ellipsoid
+ )// 2D转3D世界坐标
+
+ const upperLeftCartographic = global.viewer.scene.globe.ellipsoid.cartesianToCartographic(
+ upperLeft3
+ )// 3D世界坐标转弧度
+ const lowerRightCartographic = global.viewer.scene.globe.ellipsoid.cartesianToCartographic(
+ lowerRight3
+ )// 3D世界坐标转弧度
+
+ const minx = global.DC.Namespace.Cesium.Math.toDegrees(upperLeftCartographic.longitude)// 弧度转经纬度
+ const maxx = global.DC.Namespace.Cesium.Math.toDegrees(lowerRightCartographic.longitude)// 弧度转经纬度
+
+ const miny = global.DC.Namespace.Cesium.Math.toDegrees(lowerRightCartographic.latitude)// 弧度转经纬度
+ const maxy = global.DC.Namespace.Cesium.Math.toDegrees(upperLeftCartographic.latitude)// 弧度转经纬度
+
+ params.minx = minx
+ params.maxx = maxx
+ params.miny = miny
+ params.maxy = maxy
+ } else {
+ // 3D获取方式
+ params.maxx = global.DC.Namespace.Cesium.Math.toDegrees(extend.east)
+ params.maxy = global.DC.Namespace.Cesium.Math.toDegrees(extend.north)
+
+ params.minx = global.DC.Namespace.Cesium.Math.toDegrees(extend.west)
+ params.miny = global.DC.Namespace.Cesium.Math.toDegrees(extend.south)
+ }
+ return params // 返回屏幕所在经纬度范围
+ },
+
+ addBaseLayer () {
+ if (baseLayer.length > 0) {
+ baseLayer.forEach(item => {
+ global.viewer.imageryLayers.remove(
+ item.layer
+ )
+ })
+ }
+
+ baseLayer = []
+
+ this.updateBaseLayer(false)
+ },
+
+ updateBaseLayer (flag) {
+ const extent = this.getViewExtend()
+
+ const array = baseLayerImgUrl.filter(item => {
+ return item[1000]
+ })
+
+ array[0][1000].forEach(sm => {
+ let startFlag = false
+ if (flag == true) {
+ startFlag = baseLayer.some(dt => {
+ return dt.id == sm.id
+ })
+ }
+
+ if (startFlag == true) return
+
+ if (
+ (
+ sm.rectangle[0] > extent.minx &&
+ sm.rectangle[1] > extent.miny &&
+ sm.rectangle[2] < extent.maxx &&
+ sm.rectangle[3] < extent.maxy
+ ) ||
+ (
+ sm.rectangle[0] < extent.minx &&
+ sm.rectangle[1] < extent.maxy &&
+ sm.rectangle[2] > extent.minx &&
+ sm.rectangle[3] > extent.maxy
+ ) ||
+ (
+ sm.rectangle[0] < extent.maxx &&
+ sm.rectangle[1] < extent.maxy &&
+ sm.rectangle[2] > extent.maxx &&
+ sm.rectangle[3] > extent.maxy
+ ) ||
+ (
+ sm.rectangle[0] < extent.maxx &&
+ sm.rectangle[1] < extent.miny &&
+ sm.rectangle[2] > extent.maxx &&
+ sm.rectangle[3] > extent.miny
+ ) ||
+ (
+ sm.rectangle[0] < extent.minx &&
+ sm.rectangle[1] < extent.miny &&
+ sm.rectangle[2] > extent.minx &&
+ sm.rectangle[3] > extent.miny
+ ) ||
+ (
+ sm.rectangle[0] > extent.minx &&
+ sm.rectangle[1] < extent.maxy &&
+ sm.rectangle[2] < extent.maxx &&
+ sm.rectangle[3] > extent.maxy
+ ) ||
+ (
+ sm.rectangle[0] > extent.minx &&
+ sm.rectangle[1] > extent.miny &&
+ sm.rectangle[2] > extent.maxx &&
+ sm.rectangle[3] < extent.maxy
+ ) ||
+ (
+ sm.rectangle[0] > extent.minx &&
+ sm.rectangle[1] < extent.miny &&
+ sm.rectangle[2] < extent.maxx &&
+ sm.rectangle[3] > extent.miny
+ ) ||
+ (
+ sm.rectangle[0] < extent.minx &&
+ sm.rectangle[1] > extent.miny &&
+ sm.rectangle[2] > extent.minx &&
+ sm.rectangle[3] < extent.maxy
+ )
+ ) {
+ var layer = global.viewer.imageryLayers.addImageryProvider(new global.DC.Namespace.Cesium.SingleTileImageryProvider({
+ url: sm.url,
+ rectangle: global.DC.Namespace.Cesium.Rectangle.fromDegrees(sm.rectangle[0], sm.rectangle[1], sm.rectangle[2], sm.rectangle[3])
+ }))
+
+ baseLayer.push({ layer, id: sm.id })
+ }
+ })
+ },
+ ranging () {
+ global.viewer.measure.distanceSurface()
+ },
+ area () {
+ global.viewer.measure.area()
+ },
+ clear () {
+ global.viewer.measure.deactivate()
+ },
+ fullImg () {
+ this.addMxTileset()
+ },
+ }
}
+
</script>
-<style lang="scss" scoped>
-.container {
- width: 1020px;
- height: 600px;
- background: url(/zhxy/img/home/map.png) no-repeat;
- background-size: contain;
- border: 1px solid #28f2ff;
+<style lang="scss">
+.mapBtnList {
+ position: absolute;
+ bottom: 10px;
+ left: 50%;
+ margin-left: -128px;
+ display: flex;
box-sizing: border-box;
- // display: none;
+ .mapBtn {
+ width: 44px;
+ height: 44px;
+ background-position: -6px -6px;
+ z-index: 2;
+ margin-left: 5px;
+ color: #28f2ff;
+ text-align: center;
+ line-height: 68px;
+ font-size: 14px;
+ cursor: default;
+ border: 1px solid transparent;
+ }
+ .btn1 {
+ background-image: url(/zhxy/img/home/full-img.png);
+ }
+ .btn2 {
+ background-image: url(/zhxy/img/home/ranging.png);
+ }
+ .btn3 {
+ background-image: url(/zhxy/img/home/area.png);
+ }
+ .btn4 {
+ background-image: url(/zhxy/img/home/panorama.png);
+ }
+ .btn5 {
+ background-image: url(/zhxy/img/home/clear.png);
+ }
+}
+.mapBtnList :hover {
+ border: 1px solid white !important;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3