<template>
|
<div class="cesiumCard">
|
<el-input v-show="false" id="AttributePoi" v-model="camPosition"></el-input>
|
<CesiumMap></CesiumMap>
|
<div v-if="showSearch && showCard" class="searchPointCard">
|
<el-form label-width="auto" :model="form">
|
<el-form-item label="经度:">
|
<el-input v-model="form.lon" @blur="handleBlur('lon')" @focus="handleFocus('lon')"></el-input>
|
</el-form-item>
|
<el-form-item label="纬度:">
|
<el-input v-model="form.lat" @blur="handleBlur('lat')" @focus="handleFocus('lat')"></el-input>
|
</el-form-item>
|
<el-form-item label="高度:">
|
<el-input v-model="form.altitude"></el-input>
|
</el-form-item>
|
<el-form-item label="">
|
<el-button type="primary" @click="search">搜索</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import CesiumMap from "../../utils/components/cesium-map";
|
import "../../js/CesiumDraw"
|
export default {
|
name: '',
|
components: {
|
CesiumMap
|
},
|
props: {
|
showSearch: {
|
type: Boolean,
|
defaule: false
|
}
|
},
|
data() {
|
return {
|
// 地图拾点坐标
|
camPosition: "",
|
form: {
|
longitude: '',
|
latitude: '',
|
altitude: '',
|
lon: '',
|
lat: '',
|
},
|
showCard: false
|
}
|
},
|
mounted() {
|
this.showCard = false
|
this.handlePickMapPoint()
|
},
|
beforeDestroy() {
|
CesiumDraw.clearDrawHandler();
|
},
|
methods: {
|
clearMap () {
|
this.showCard = false
|
this.form.longitude = ''
|
this.form.latitude = ''
|
this.form.altitude = ''
|
this.form.lon = ''
|
this.form.lat = ''
|
viewer.entities.removeById("drawPointEntity")
|
},
|
handlePickMapPoint() {
|
let options = {
|
viewer: viewer,
|
pointcolor: Cesium.Color.BLUE,
|
printId: 'AttributePoi',
|
text: '新',
|
size: 36,
|
};
|
//开启监听拾取地图点位
|
viewer = window.viewer
|
CesiumDraw.drawPoint(options, () => {
|
this.camPosition = document.getElementById('AttributePoi').value;
|
let pois = this.camPosition.split(",");
|
let data = {
|
longitude: pois[0],
|
latitude: pois[1],
|
altitude: pois[2],
|
}
|
this.form.longitude = pois[0]
|
this.form.latitude = pois[1]
|
this.form.altitude = pois[2]
|
this.form.lon = new Array(String(pois[0]).length).fill('*').join('')
|
this.form.lat = new Array(String(pois[1]).length).fill('*').join('')
|
this.$emit('on-selectAddress', data)
|
this.showCard = true
|
});
|
},
|
showPickPoint(point) {
|
this.showCard = false
|
this.form.longitude = point.longitude
|
this.form.latitude = point.latitude
|
this.form.altitude = point.altitude
|
this.form.lon = new Array(String(point.longitude).length).fill('*').join('')
|
this.form.lat = new Array(String(point.latitude).length).fill('*').join('')
|
this.drawPoint(Cesium.Cartesian3.fromDegrees(point.longitude,point.latitude,point.altitude))
|
},
|
drawPoint(point) {
|
var drawPointEntity = viewer.entities.getById("drawPointEntity");
|
if (drawPointEntity) {
|
drawPointEntity.position = point.clone();
|
return
|
}
|
const entity = viewer.entities.add({
|
id: 'drawPointEntity',
|
position: point.clone(),
|
billboard: {
|
image: new Cesium.PinBuilder().fromText('新', Cesium.Color.BLUE, 36).toDataURL(),
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
},
|
ellipsoid: {
|
radii: new Cesium.Cartesian3(0.33, 0.65, 0.5),
|
material: Cesium.Color.BLUE.withAlpha(0.7)
|
}
|
});
|
viewer.flyTo(entity,{
|
offset: new Cesium.HeadingPitchRange(0.0, -90.0, 200000)
|
})
|
},
|
search() {
|
this.drawPoint(Cesium.Cartesian3.fromDegrees(+this.form.longitude,+this.form.latitude,+this.form.altitude))
|
this.$emit('on-selectAddress', this.form)
|
},
|
handleBlur(key) {
|
if (key == 'lon') {
|
this.form.longitude = this.form.lon
|
} else {
|
this.form.latitude = this.form.lat
|
}
|
let arr = new Array(this.form[key].length).fill('*')
|
this.form[key] = arr.join('')
|
},
|
handleFocus(key) {
|
this.form[key] = ''
|
viewer.entities.removeById("drawPointEntity")
|
}
|
},
|
}
|
</script>
|
|
<style scoped>
|
.cesiumCard{
|
position:relative;
|
}
|
.cesiumCard >>> .el-form-item__label {
|
color:black;
|
}
|
.searchPointCard{
|
position: absolute;
|
left: 0;
|
top:0;
|
width: 300px;
|
height: 260px;
|
background-color: rgba(255,255,255,0.2);
|
padding: 12px 24px;
|
}
|
</style>
|
