<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>
|
let polygonLayer = null
|
let polyLineLayer = null
|
let polygon = null
|
let polyLine = null
|
let plotTool = null
|
let plot = undefined
|
|
export default {
|
name: "dcMap",
|
props: ['isDetail', 'range'],
|
data () {
|
return {
|
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
|
// })
|
// )
|
|
global.viewer.imageryLayers.addImageryProvider(
|
new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
|
url: "http://10.141.11.11:80/slapi/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326",
|
layer: "wmts_4326_361100",
|
style: "default",
|
format: "image/png",
|
tileMatrixSetID: "c",
|
tileMatrixLabels: new Array(18).fill(0).map((v, i) => i + 1),
|
tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
|
})
|
)
|
|
// global.viewer.imageryLayers.addImageryProvider(
|
// new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
|
// url: 'http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
|
// subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
|
// format: 'image/jpeg',
|
// show: true,
|
// maximumLevel: 18
|
// })
|
// )
|
|
//添加图层
|
polygonLayer = new global.DC.VectorLayer('polygonLayer')
|
global.viewer.addLayer(polygonLayer)
|
plot = new global.DC.Plot(global.viewer, {
|
clampToModel: true
|
})
|
|
//添加图层
|
polyLineLayer = new global.DC.VectorLayer('polyLineLayer')
|
global.viewer.addLayer(polyLineLayer)
|
|
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 (polygon) {
|
this.clearDraw()
|
}
|
this.coordinates = []
|
plotTool && plotTool.draw(type, overlay => {
|
if (overlay) {
|
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 () {
|
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) {
|
console.log('showPolygon', positions)
|
let viewer = global.viewer
|
positions = positions.replaceAll(",", ";").replaceAll(" ", ",")
|
polygon = new global.DC.Polygon(positions)
|
polygon.setStyle({
|
material: global.DC.Color.RED
|
})
|
polygonLayer.addOverlay(polygon)
|
viewer.flyTo(polygonLayer)
|
polygon.on(global.DC.MouseEventType.CLICK, this.polygonClick)
|
},
|
//回显线
|
showPolyLine (positions) {
|
let viewer = global.viewer
|
positions = positions.replaceAll(",", ";").replaceAll(" ", ",")
|
polyLine = new global.DC.Polyline(positions)
|
polyLine.setStyle({
|
material: global.DC.Color.RED
|
})
|
polyLineLayer.addOverlay(polyLine)
|
viewer.flyTo(polyLineLayer)
|
},
|
|
// 点击编辑多边形
|
polygonClick (e) {
|
let plotOverlay = e.overlay
|
plot.edit(plotOverlay, (e) => {
|
let newPolygonPositions = []
|
let newPolygonPositionsArr = []
|
plotOverlay._positions.forEach((item, index) => {
|
if (index % 2 == 0) {
|
newPolygonPositions.push(item)
|
newPolygonPositionsArr.push([item._lng, item._lat])
|
}
|
})
|
plotOverlay.positions = newPolygonPositions
|
let toData = this.doData(newPolygonPositionsArr)
|
this.$emit('toData', toData)
|
}, { material: global.DC.Color.RED.withAlpha(0.5) })
|
},
|
}
|
}
|
</script>
|
|
<style scoped></style>
|
