<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')
|
|
// 去除水印
|
const primitiveArr = global.viewer.scene.primitives._primitives
|
global.viewer.scene.primitives.remove(primitiveArr[0])
|
|
|
global.viewer.setOptions({
|
globe:{
|
baseColor:DC.Color.BLACK
|
}
|
})
|
let layer_build = new DC.TilesetLayer('layer_build').addTo(global.viewer)
|
let build = new DC.Tileset(
|
'//resource.dvgis.cn/data/3dtiles/ljz/tileset.json',
|
{skipLevels:true}
|
)
|
let fs = `
|
varying vec3 v_positionEC;
|
void main(void){
|
vec4 position = czm_inverseModelView * vec4(v_positionEC,1); // 位置
|
float glowRange = 100.0; // 光环的移动范围(高度)
|
gl_FragColor = vec4(0.2, 0.5, 1.0, 1.0); // 颜色
|
gl_FragColor *= vec4(vec3(position.z / 100.0), 1.0); // 渐变
|
// 动态光环
|
float time = fract(czm_frameNumber / 360.0);
|
time = abs(time - 0.5) * 2.0;
|
float diff = step(0.005, abs( clamp(position.z / glowRange, 0.0, 1.0) - time));
|
gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - diff);
|
}
|
`
|
build.setCustomShader(fs)
|
layer_build.addOverlay(build)
|
let layer = new DC.PrimitiveLayer('layer').addTo(global.viewer)
|
let positions = generatePosition(50,true)
|
positions = positions.concat(generatePosition(50,))
|
positions.forEach(item=>{
|
let position = DC.Position.fromObject(item)
|
let end = position.copy()
|
end.alt = 5000 * Math.random()
|
let line = new DC.FlowLinePrimitive([position,end],0.5)
|
line.setStyle({
|
speed: 6 * Math.random(),
|
color: DC.Color.fromCssColorString("rgb(141,172,172)"),
|
percent:0.1,
|
gradient:0.01
|
})
|
layer.addOverlay(line)
|
})
|
global.viewer.flyToPosition("121.4941629,31.2091462,1859.56,0,-28.71")
|
|
// // 天地图 影像
|
// 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('/zhjg/qx/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(/zhjg/img/home/full-img.png);
|
}
|
.btn2 {
|
background-image: url(/zhjg/img/home/ranging.png);
|
}
|
.btn3 {
|
background-image: url(/zhjg/img/home/area.png);
|
}
|
.btn4 {
|
background-image: url(/zhjg/img/home/panorama.png);
|
}
|
.btn5 {
|
background-image: url(/zhjg/img/home/clear.png);
|
}
|
}
|
.mapBtnList :hover {
|
border: 1px solid white !important;
|
}
|
</style>
|
