|
|
@ -16,7 +16,7 @@ |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
let viewer,plot,layer,currentGraphic |
|
|
|
let viewer,plot,layer,currentGraphic,trackLineGraphicId,mySelfPosGraphicId |
|
|
|
let graphicsList = [] |
|
|
|
const viewerClick = (e) => { |
|
|
|
console.log('点击viewerClick >>>>> ', e.graphic) |
|
|
@ -100,6 +100,10 @@ export default { |
|
|
|
type: Object, |
|
|
|
default: () => {}, |
|
|
|
}, |
|
|
|
traceList: { |
|
|
|
type: Array, |
|
|
|
default: () => [], |
|
|
|
} |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
@ -130,6 +134,22 @@ export default { |
|
|
|
}, |
|
|
|
deep: true, |
|
|
|
immediate: true, |
|
|
|
}, |
|
|
|
traceList: { |
|
|
|
handler(val) { |
|
|
|
console.log('地图traceList >>>>> ', val) |
|
|
|
if (val) { |
|
|
|
setTimeout(() => { |
|
|
|
this.handleAddLayerBefore({ |
|
|
|
type: 'polyline', |
|
|
|
positions: val, |
|
|
|
iconName: 'pos_track.svg', |
|
|
|
uid: 'track' |
|
|
|
}); |
|
|
|
}, 100); |
|
|
|
} |
|
|
|
}, |
|
|
|
immediate: true, |
|
|
|
} |
|
|
|
}, |
|
|
|
created() {}, |
|
|
@ -177,11 +197,11 @@ export default { |
|
|
|
setTimeout(() => { |
|
|
|
viewer.scene.camera.setView({ |
|
|
|
destination: new Cesium.Cartesian3.fromDegrees(113.27, 23.13, this.defaultHeight), |
|
|
|
orientation: { |
|
|
|
heading: 0, |
|
|
|
pitch: -90, |
|
|
|
roll: 0, |
|
|
|
}, |
|
|
|
// orientation: { |
|
|
|
// heading: 0, |
|
|
|
// pitch: -90, |
|
|
|
// roll: 0, |
|
|
|
// }, |
|
|
|
duration: 2, |
|
|
|
}); |
|
|
|
}, 300); |
|
|
@ -197,11 +217,11 @@ export default { |
|
|
|
setMapCenter(long,lat, height = this.defaultHeight, duration = 2){ |
|
|
|
viewer.scene.camera.setView({ |
|
|
|
destination: new Cesium.Cartesian3.fromDegrees(long, lat, height), |
|
|
|
orientation: { |
|
|
|
heading: 0, |
|
|
|
pitch: -90, |
|
|
|
roll: 0, |
|
|
|
}, |
|
|
|
// orientation: { |
|
|
|
// heading: 0, |
|
|
|
// pitch: -90, |
|
|
|
// roll: 0, |
|
|
|
// }, |
|
|
|
duration: duration, |
|
|
|
}); |
|
|
|
}, |
|
|
@ -230,11 +250,11 @@ export default { |
|
|
|
if(entries.viewpoint){ |
|
|
|
viewer.scene.camera.flyTo({ |
|
|
|
destination: entries.viewpoint.position, |
|
|
|
orientation: { |
|
|
|
heading: entries.viewpoint.heading, |
|
|
|
pitch: entries.viewpoint.pitch, |
|
|
|
roll: entries.viewpoint.roll, |
|
|
|
}, |
|
|
|
// orientation: { |
|
|
|
// heading: entries.viewpoint.heading, |
|
|
|
// pitch: entries.viewpoint.pitch, |
|
|
|
// roll: entries.viewpoint.roll, |
|
|
|
// }, |
|
|
|
duration: 2, |
|
|
|
}); |
|
|
|
} |
|
|
@ -341,6 +361,56 @@ export default { |
|
|
|
plotOptions |
|
|
|
); |
|
|
|
}, |
|
|
|
// 添加节点前处理已存在的节点 |
|
|
|
handleAddLayerBefore({ type, position, positions = [], iconName = '', uid = '' } = {}){ |
|
|
|
if (uid === 'track' && trackLineGraphicId) { |
|
|
|
let graphicItem = layer.getGraphic(trackLineGraphicId) |
|
|
|
if (graphicItem) layer.removeGraphic(graphicItem) |
|
|
|
} else if (uid === 'self' && mySelfPosGraphicId) { |
|
|
|
let graphicItem = layer.getGraphic(mySelfPosGraphicId) |
|
|
|
if (graphicItem) layer.removeGraphic(graphicItem) |
|
|
|
} |
|
|
|
// 添加节点 |
|
|
|
console.log('添加节点 >>>>> ') |
|
|
|
this.addLayer({ type, position, positions, iconName, uid }) |
|
|
|
}, |
|
|
|
// 添加点线 |
|
|
|
addLayer({ type, position, positions = [], iconName = '', uid = '' } = {}){ |
|
|
|
let graphicItem |
|
|
|
if (type === 'billboard') { |
|
|
|
// 添加点 |
|
|
|
graphicItem = new sycim.Billboard(position, `/mobileH5/icons/${iconName}`) |
|
|
|
graphicItem.setStyle({ |
|
|
|
canEdit: false, |
|
|
|
horizontalOrigin: sycim.HorizontalOrigin.CENTER, |
|
|
|
verticalOrigin: sycim.VerticalOrigin.BOTTOM |
|
|
|
//disableDepthTestDistance: 5000, |
|
|
|
}) |
|
|
|
} else if (type === 'polyline') { |
|
|
|
// 添加线 |
|
|
|
let positionsStr = positions?.map((item) => item.join(',')).join(';') |
|
|
|
graphicItem = new sycim.Polyline(positionsStr) |
|
|
|
graphicItem.setStyle({ |
|
|
|
canEdit: false, |
|
|
|
width: this.defaultLineWidth, |
|
|
|
clampToGround: true, |
|
|
|
lineType: '1', |
|
|
|
speed_s: 2, |
|
|
|
horizontalOrigin: sycim.HorizontalOrigin.CENTER, |
|
|
|
verticalOrigin: sycim.VerticalOrigin.BOTTOM, |
|
|
|
material: sycim.Cesium.Color.fromCssColorString('#4598FF') |
|
|
|
}) |
|
|
|
} |
|
|
|
if (graphicItem) { |
|
|
|
console.log('需要添加的graphicItem >>>>> ', graphicItem) |
|
|
|
if (uid === 'track') { |
|
|
|
trackLineGraphicId = graphicItem.graphicId |
|
|
|
} else if (uid === 'self') { |
|
|
|
mySelfPosGraphicId = graphicItem.graphicId |
|
|
|
} |
|
|
|
layer.addGraphic(graphicItem) |
|
|
|
} |
|
|
|
}, |
|
|
|
// 提交获取点线等数据 |
|
|
|
submit(){ |
|
|
|
console.log('map -submit >>>>> ', graphicsList) |
|
|
|