<template>
|
<public-box class="technique-layer">
|
<template slot="public-box-header">
|
<div class="title">
|
<span>地图数据</span>
|
</div>
|
<img class="close deblurring" src="/img/navicon/close.png" alt @click="closeModel" />
|
</template>
|
<template slot="public-box-content">
|
<div class="list-box">
|
<ul v-show="signList.length > 0">
|
<li v-for="(item, index) in signList" :key="index">
|
<img src="/img/icon/layer-manage.png" alt />
|
{{item.name}}
|
<el-switch
|
@change="(value) => mapLayerChange(value, item)"
|
v-model="item.flag"
|
active-text="显示"
|
inactive-text="关闭"
|
></el-switch>
|
</li>
|
</ul>
|
<div v-show="signList.length == 0" class="no-data">
|
<img src="/img/icon/no-data.png" alt />
|
<div>暂无数据</div>
|
</div>
|
</div>
|
</template>
|
</public-box>
|
</template>
|
|
<script>
|
|
const layerMaps = []
|
|
let layerSat = null
|
let layerSATtwo = null
|
|
let tcLayer = null
|
|
export default {
|
data () {
|
return {
|
signList: [
|
{ name: '高德矢量', flag: false },
|
{ name: '百度矢量', flag: false },
|
{ name: '腾讯矢量', flag: false },
|
{ name: 'Arcgis', flag: false },
|
{ name: '中国地形', flag: true },
|
{ name: '倾斜数据', flag: false },
|
{ name: '矢量白膜', flag: false },
|
{ name: '热力图', flag: false },
|
// { name: 'WMS', flag: false },
|
{ name: 'WMTS', flag: false },
|
{ name: 'S3M', flag: false }
|
// { name: 'TMS', flag: false }
|
],
|
destroyedFlag: true
|
}
|
},
|
mounted () {
|
},
|
methods: {
|
mapLayerChange (value, item) {
|
if (value) {
|
if (item.name == '高德矢量') {
|
const baselayer = global.viewer.imageryLayers.addImageryProvider(global.DC.ImageryLayerFactory.createAmapImageryLayer())
|
layerMaps.push({ name: item.name, layers: [baselayer], type: 'Cesium' })
|
} else if (item.name == '百度矢量') {
|
const baselayer = global.viewer.imageryLayers.addImageryProvider(global.DC.ImageryLayerFactory.createBaiduImageryLayer())
|
const baselayerTraffic = global.viewer.imageryLayers.addImageryProvider(global.DC.ImageryLayerFactory.createBaiduImageryLayer({
|
style: 'traffic'
|
}))
|
layerMaps.push({ name: item.name, layers: [baselayer, baselayerTraffic], type: 'Cesium' })
|
} else if (item.name == '腾讯矢量') {
|
const baselayer = global.viewer.imageryLayers.addImageryProvider(global.DC.ImageryLayerFactory.createTencentImageryLayer())
|
layerMaps.push({ name: item.name, layers: [baselayer], type: 'Cesium' })
|
} else if (item.name == 'Arcgis') {
|
const baselayerShaded = global.viewer.imageryLayers.addImageryProvider(global.DC.ImageryLayerFactory.createArcGisImageryLayer({
|
url:
|
'https://services.arcgisonline.com/arcgis/rest/services/World_Shaded_Relief/MapServer'
|
}))
|
layerMaps.push({ name: item.name, layers: [baselayerShaded], type: 'Cesium' })
|
} else if (item.name == '中国地形') {
|
this.$EventBus.$emit('chinaDx', 'add')
|
} else if (item.name == '倾斜数据') {
|
this.$EventBus.$emit('mxOrQx', true)
|
} else if (item.name == '矢量白膜') {
|
this.createSAT()
|
} else if (item.name == '热力图') {
|
this.createTC()
|
} else if (item.name == 'WMS') {
|
} else if (item.name == 'WMTS') {
|
const vec = global.viewer.imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
|
url: ' http://t1.tianditu.gov.cn/vec_w/wmts?tk=e9533f5acb2ac470b07f406a4d24b4f0',
|
type: 'wmts',
|
layer: 'vec',
|
style: 'default',
|
format: 'tiles',
|
tileMatrixSetID: 'w',
|
show: true,
|
maximumLevel: 18
|
})
|
)
|
|
const cva = global.viewer.imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
|
url: ' http://t1.tianditu.gov.cn/cva_w/wmts?tk=e9533f5acb2ac470b07f406a4d24b4f0',
|
type: 'wmts',
|
layer: 'cva',
|
style: 'default',
|
format: 'tiles',
|
tileMatrixSetID: 'w',
|
show: true,
|
maximumLevel: 18
|
})
|
)
|
|
layerMaps.push({ name: item.name, layers: [vec, cva], type: 'Cesium' })
|
} else if (item.name == 'S3M') {
|
const streenMlayer = new global.DC.S3MLayer('streenMlayer', 'http://resource.dvgis.cn/data/3dtiles/CBD/cbd.scp')
|
global.viewer.addLayer(streenMlayer)
|
global.viewer.flyToPosition('116.45793269658417,39.92711385557482,617.5967826044838,181.95219395269424,-21.286437065473546')
|
layerMaps.push({ name: item.name, layers: [streenMlayer], type: 'DC' })
|
}
|
} else {
|
if (item.name == '高德矢量' || item.name == '百度矢量' || item.name == '腾讯矢量' || item.name == 'Arcgis' || item.name == 'WMTS' || item.name == 'S3M') {
|
layerMaps.some((sm, index) => {
|
if (sm.name == item.name) {
|
if (sm.type == 'DC') {
|
sm.layers.forEach(map => {
|
global.viewer.removeLayer(
|
map
|
)
|
})
|
} else {
|
sm.layers.forEach(map => {
|
global.viewer.imageryLayers.remove(
|
map
|
)
|
})
|
}
|
|
layerMaps.splice(index, 1)
|
|
return true
|
}
|
})
|
} else if (item.name == '中国地形') {
|
this.$EventBus.$emit('chinaDx', 'remove')
|
} else if (item.name == '倾斜数据') {
|
this.$EventBus.$emit('mxOrQx', false)
|
} else if (item.name == '矢量白膜') {
|
this.removeSAT()
|
} else if (item.name == '热力图') {
|
this.removeTC()
|
} else if (item.name == 'WMS') {
|
|
}
|
}
|
},
|
|
closeModel () {
|
this.$store.dispatch('delVisitedViews', this.$route)
|
this.$router.push('/pcLayout/default')
|
},
|
|
locationSAT () {
|
global.viewer.flyToPosition('121.4941629,31.2091462,1859.56,0,-28.71')
|
},
|
|
// 科技感删除
|
removeSAT () {
|
layerSat != null && global.viewer.removeLayer(layerSat)
|
layerSATtwo != null && global.viewer.removeLayer(layerSATtwo)
|
layerSat = null
|
layerSATtwo = null
|
},
|
|
// 科技感添加
|
createSAT () {
|
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
|
}
|
|
layerSat = new global.DC.TilesetLayer('layerSat').addTo(global.viewer)
|
|
const build = new global.DC.Tileset(
|
'http://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)
|
|
layerSat.addOverlay(build)
|
|
layerSATtwo = new global.DC.PrimitiveLayer('layer').addTo(global.viewer)
|
|
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
|
})
|
layerSATtwo.addOverlay(line)
|
})
|
|
this.locationSAT()
|
},
|
|
generatePosition (num) {
|
const list = []
|
for (let i = 0; i < num; i++) {
|
const lng = 120.38105869 + Math.random() * 0.5
|
const lat = 31.10115627 + Math.random() * 0.5
|
list.push(new global.DC.Position(lng, lat))
|
}
|
return list
|
},
|
|
locationTC () {
|
global.viewer.flyToPosition('120.670183527,31.348282115,109658.22,0,-89.90659095062371')
|
},
|
|
removeTC () {
|
tcLayer != null && global.viewer.removeLayer(tcLayer)
|
tcLayer = null
|
},
|
|
createTC () {
|
tcLayer = new global.DC.HeatLayer('tcLayer', {
|
useGround: true,
|
radius: 40
|
})
|
global.viewer.addLayer(tcLayer)
|
const positions = this.generatePosition(3000)
|
tcLayer.setPositions(positions)
|
|
this.locationTC()
|
}
|
|
},
|
destroyed () {
|
this.signList.forEach(item => {
|
layerMaps.some((sm, index) => {
|
if (sm.name == item.name) {
|
if (sm.type == 'DC') {
|
sm.layers.forEach(map => {
|
global.viewer.removeLayer(
|
map
|
)
|
})
|
} else {
|
sm.layers.forEach(map => {
|
global.viewer.imageryLayers.remove(
|
map
|
)
|
})
|
}
|
|
layerMaps.splice(index, 1)
|
|
return true
|
}
|
})
|
})
|
|
this.$EventBus.$emit('chinaDx', 'add')
|
|
this.$EventBus.$emit('mxOrQx', false)
|
|
this.removeSAT()
|
|
this.removeTC()
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.move {
|
cursor: move;
|
}
|
</style>
|
