<template>
|
<div>
|
<div id="viewer-container" :style="{ height: isDetail ? '95vh' : '40vh', width: '100%' }"></div>
|
<div style="position: absolute;right:45%;top:-1%;z-index: 999999">
|
<p style="margin-top: 10px" v-if="!isDetail">
|
<el-button type="primary" size="small" @click="draw('polygon')">绘制区域</el-button>
|
<el-button size="small" @click="clearDraw">重置</el-button>
|
</p>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "dcMap",
|
props:['isDetail','range'],
|
data(){
|
return{
|
polygonLayer:null,
|
polyLineLayer:null,
|
polygon:null,
|
polyLine:null,
|
//绘制工具
|
plotTool:null,
|
coordinates:[]
|
}
|
},
|
created() {
|
|
},
|
mounted() {
|
let self = this
|
global.DC.ready(() => {
|
initViewer()
|
})
|
|
function initViewer() {
|
//配置viewer
|
global.viewer = new global.DC.Viewer('viewer-container',{
|
contextOptions: {
|
webgl: {
|
alpha: true,
|
stencil: true,
|
preserveDrawingBuffer: true
|
}
|
},
|
sceneMode:2
|
})
|
|
//加载地图
|
global.viewer.imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
url: 'https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal',
|
format: 'image/jpeg',
|
show: true,
|
maximumLevel: 18
|
})
|
)
|
|
//添加图层
|
self.polygonLayer = new global.DC.VectorLayer('polygonLayer')
|
global.viewer.addLayer(self.polygonLayer)
|
|
//添加图层
|
self.polyLineLayer = new global.DC.VectorLayer('polyLineLayer')
|
global.viewer.addLayer(self.polyLineLayer)
|
|
self.plotTool = new global.DC.Plot(global.viewer)
|
|
//初始化定位
|
global.viewer.camera.setView({
|
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
|
// fromDegrees()方法，将经纬度和高程转换为世界坐标
|
destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
|
//设置坐标为上饶市信州区
|
117.966460, 28.431002, 5000.0
|
),
|
orientation: {
|
// 指向
|
heading: global.DC.Namespace.Cesium.Math.toRadians(0, 0),
|
// 视角
|
pitch: global.DC.Namespace.Cesium.Math.toRadians(-90),
|
roll: 0.0
|
}
|
})
|
}
|
|
if (this.isDetail){
|
this.showPolyLine(this.range)
|
}
|
|
},
|
methods:{
|
//开始绘画
|
draw(type){
|
if (this.polygon){
|
this.clearDraw()
|
}
|
|
this.plotTool && this.plotTool.draw(type,overlay => {
|
if(overlay){
|
this.polygonLayer.addOverlay(overlay)
|
overlay.positions.forEach(e=>{
|
this.coordinates.push([e.lng,e.lat])
|
})
|
let toData = this.doData(this.coordinates)
|
this.$emit('toData', toData)
|
}
|
})
|
},
|
//重置
|
clearDraw(){
|
this.polygonLayer.clear()
|
},
|
//转换成数据库数据
|
doData(val) {
|
let str = "LINESTRING("
|
for (let k = 0; k < val.length; k++) {
|
str += `${val[k][0]} ${val[k][1]}`
|
if (k != val.length - 1) {
|
str += ","
|
}
|
}
|
str = str + "," + `${val[0][0]} ${val[0][1]}`
|
str += ")"
|
// console.log(str)
|
return '\'' + str + '\''
|
},
|
//回显多边形
|
showPolygon(positions){
|
let viewer = global.viewer
|
positions = positions.replaceAll(",",";").replaceAll(" ",",")
|
this.polygon = new global.DC.Polygon(positions)
|
this.polygon.setStyle({
|
material: DC.Color.RED
|
})
|
this.polygonLayer.addOverlay(this.polygon)
|
viewer.flyTo(this.polygonLayer)
|
},
|
//回显线
|
showPolyLine(positions){
|
let viewer = global.viewer
|
positions = positions.replaceAll(",",";").replaceAll(" ",",")
|
this.polyLine = new global.DC.Polyline(positions)
|
this.polyLine.setStyle({
|
material: DC.Color.RED
|
})
|
this.polyLineLayer.addOverlay(this.polyLine)
|
viewer.flyTo(this.polyLineLayer)
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
