<template>
|
<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>
|
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">
|
.mapBtnList {
|
position: absolute;
|
bottom: 10px;
|
left: 50%;
|
margin-left: -128px;
|
display: flex;
|
box-sizing: border-box;
|
.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>
|
