/* eslint-disable camelcase */
|
<template>
|
<div id="large-viewer-container" style="height: 100%; width: 100%"></div>
|
</template>
|
<script>
|
let largeViewer = null
|
|
export default {
|
name: 'largeMap',
|
data () {
|
return {
|
samllMapFlag: false
|
}
|
},
|
mounted () {
|
function generatePosition (num, isAdd) {
|
const list = []
|
for (let i = 0; i < num; i++) {
|
const lng = 121.49536592256028 + Math.random() * 0.04 * (isAdd ? 1 : -1)
|
const lat = 31.241616722278213 + Math.random() * 0.04 * (isAdd ? 1 : -1)
|
list.push({ lng, lat })
|
}
|
return list
|
}
|
|
function initViewer () {
|
largeViewer = new global.DC.Viewer('large-viewer-container', {
|
contextOptions: {
|
webgl: {
|
stencil: true,
|
preserveDrawingBuffer: true
|
}
|
}
|
}).setOptions({
|
// showAtmosphere: false, 大气层
|
showMoon: false, // 月亮
|
showSun: false, // 太阳
|
skyBox: {
|
show: false
|
},
|
globe: {
|
baseColor: global.DC.Color.BLACK
|
}
|
})
|
|
// const baseLayer = global.DC.ImageryLayerFactory.createBaiduImageryLayer({
|
// style: 'dark'
|
// })
|
// largeViewer.addBaseLayer(baseLayer, {
|
// iconUrl: 'examples/images/icon/midnight.png',
|
// name: '午夜蓝'
|
// })
|
|
const layerBuild = new global.DC.TilesetLayer('layerBuild').addTo(largeViewer)
|
const build = new global.DC.Tileset(
|
'//resource.dvgis.cn/data/3dtiles/ljz/tileset.json',
|
{ skipLevels: true }
|
)
|
const 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)
|
layerBuild.addOverlay(build)
|
const layer = new global.DC.PrimitiveLayer('layer').addTo(largeViewer)
|
let positions = generatePosition(50, true)
|
positions = positions.concat(generatePosition(50))
|
positions.forEach(item => {
|
const position = global.DC.Position.fromObject(item)
|
const end = position.copy()
|
end.alt = 5000 * Math.random()
|
const line = new global.DC.FlowLinePrimitive([position, end], 0.5)
|
line.setStyle({
|
speed: 6 * Math.random(),
|
color: global.DC.Color.fromCssColorString('rgb(141,172,172)'),
|
percent: 0.1,
|
gradient: 0.01
|
})
|
layer.addOverlay(line)
|
})
|
largeViewer.zoomToPosition('121.4941629,31.2091462,1859.56,0,-28.71')
|
|
// 视角旋转
|
largeViewer.scene.screenSpaceCameraController.enableTilt = false
|
}
|
|
global.DC.ready(initViewer)
|
},
|
methods: {
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scope>
|
</style>
|
